初识Vue
文章目录
- 1. 前言
- 2. Vue 的特点
- 3. 安装 Vue
- 4. HelloWord
1. 前言
vue是什么 ？
引用 ： vue.js 文档
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只
关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
页应用提供驱动。
可以看到 上面说 vue 是 一套用于构建用户界面的渐进式框架 啥意思呢 ？
构建用户界面 : 将我们拿到的数据 通过某些方法 ， 变成用户所能看到的界面 。
渐进式 ： Vue 可以自底向上逐层的应用 .
简单来说 : 如果我们自己写的应用非常简单 就可以 引入一个轻量小巧的核心库 。 如果应用比较复杂 就可以引入各式各样的Vue 插件 。
2. Vue 的特点
1.采用组件化模式 ，提高代码复用率 ，且让代码更好维护。
2. 声明式编码 , 让编码人员无需直接操作 DOM ，提高开发效率 .
假设 有一组数据
[{id = '001', name :"张三" , age :18}{id = '002', name :"李四" , age :18}{id = '003', name :"王五" , age :18}
]
在提供一个容器 ：
想要实现下面这样的效果 ：
这里先使用 js 写 , 命令式 编码
Document
使用 vue 完成 ： 声明式 编码
Document
- {{person.id}} - {{person.name}} - {{person.age}}
3. 使用虚拟DOM + 优秀的 Diff算法 , 尽量复用 DOM 节点.
3. 安装 Vue
这里可以通过 官方文档 下载 ：Vue.js (vuejs.org)
这里我们安装完 vue ， 引入 vue .
vue 开发者工具安装
下面通过 vue 来 写一个 helloword 程序
4. HelloWord
这里我们想要通过 vue 来让页面显示HelloWord ， 就需要先创建一个 vue 实例对象 ， 让后通过 配置项 el 指定服务的容器 ， el 指定完 后 ，就可以通过 data 存储数据 来为 el 所指定的容器使用 。 (此时涉及到插值语法 ,后面说).
下面我们根据这个 案例
引出一个注意事项 : 容器和实例一一对应
另外 ：
上一篇：day09_数组进阶