文章目录

• 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 写 , 命令式 编码

 
使用 vue 完成 ： 声明式 编码

{{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 所指定的容器使用 。 (此时涉及到插值语法 ,后面说).

 
下面我们根据这个 案例

 
引出一个注意事项 : 容器和实例一一对应

 
另外 ：