Vue是数据驱动视图的，只要model（模型层）的数据改变了，Vue就会帮我们改变视图上显示的内容，不用我们自己去动手写代码更新。那么，它是怎么做到的，我们的代码要怎么写才能做到这一点。
答案是：Vue实例。
先确保你的项目安装好Vue.js
安装好之后，我们来看看怎么创建和使用Vue实例，我们把它分成 4 步走。
第1步 创建语法
创建一个Vue实例的语法很简单，如下：
<script>
let vm = new Vue({});
</script>通过关键语句 new Vue( )我们就可以创建一个Vue实例：vm了。我们注意到了我们给Vue( )传了一个参数选项，是一个空对象，我们接着往下看。
第2步 设置数据
我们就是利用上面的对象参数，来创建这个Vue实例wm的，比如，设置vm里面的数据。
let vm = new Vue({
//实例vm的数据
data:{
name: "张三",
age : 21
}
}) 写法也很简单，参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。比如：name为张三，age为21等等。
第3步 挂载元素
创建了一个实例vm，设置了vm的数据后，我们怎么把数据展示在视图上呢这就要通过我们的挂载元素了。我们看看怎么用：
视图view部分：
<div id="app"></div>视图（html部分）上我们有一个id为”app”的div元素。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
name: "张三",
age : 21
}
});我们看到参数中我们不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为我们实例vm的挂载目标。表示我们的实例vm和id为“app”的DOM节点就关联起来了。
第4步 渲染
实例vm创建好了，数据data有了，DOM节点也关联起来了，最后一步，就是把vm的数据绑定到指定的视图上了，也就是数据渲染。
<div id="app">
我是{{ name }}，
今年{{ age }}岁
</div>就是你看到的这么简单，我们只需要用一个双大括号：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我们给实例vm设置的数据name和age，我们用{{ }}可以直接读取到它们的值。
我们访问页面，就会看到vm的数据data就会被成功地渲染出来：
就这样，我们就成功地创建了一个vue实例，并把它的数据渲染在视图上了，超简单。
创建并使用一个Vue实例并不难，仅需4步走：
定义一个vue实例的4个常用选项
具体讲一下定义一个vue实例会用到的4个常用参数选项，不常用的选项，咱先不管它（后面有需要会补充）。因为学会这4个，就可以满足基本的开发需要了。
filters 过滤器
第一个要讲的是过滤器filters选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
}
})num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：
<div id="app">
数字1：{{ num1 }}<br>
数字2：{{ num2 }}<br>
数字3：{{ num3 }}
</div>
突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。
这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
},
//过滤器
filters:{
toInt(value){
return parseInt(value);
}
}
});相信大家都注意到了，参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。
如果toInt( )函数的写法你看起来觉得陌生的话，这样写你会不会觉得熟悉很多：
//过滤器
filters:{
toInt:function(value){
return parseInt(value);
}
}
我们回到过滤器filters，接着讲：定义完filters属性后，我们怎么用呢？
<div id="app">
数字1：{{ num1 | toInt}}<br>
数字2：{{ num2 | toInt}}<br>
数字3：{{ num3 | toInt}}
</div>也很简单，如上面代码所示，通过管道符 | 把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。
我们运行后得到结果：
computed 计算属性
有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:1,
num2:3,
num3:6
},
//计算属性
computed:{
sum(){
return this.num1+this.num2+this.num3
}
}
});
计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：
<div id="app">
总和：{{ sum }}
</div>计算属性computed用法更简洁，仅需{{ sum }}就能读取到它的计算结果：1+3+6结果应该为10。
需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。
methods 方法
顾名思义，在methods中，我们可以定义一些方法，供组件使用。
比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
}
});
定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上：
<div id="app">
{{ a }}
<button v-on:click="plus">加1</button>
</div>
在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法plus( )就会被调用,实现给a的值加1，并更新视图。
（点击多次，a的值实时更新）
watch 观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。
上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。
在上个例子的代码基础上，我们加上watch部分的代码：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
},
//观察
watch:{
a(){
console.log(`有变化了，最新值：`);
console.log(this.a);
}
}
});最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a，我们看运行结果：
看到了，我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。
总结：定义一个vue实例常用的4个选项：过滤器filters、计算属性computed、方法methods、观察watch。