1. 文本插值是最常见的一种数据绑定方式，语法是使用双括号（Mustache）将变量包含
<div id="app">
<p>{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>上述 HTML 代码中的 message 与 script 中 data 的 message 属性绑定，两者数据同步，当我们更新data中对应的属性值时，无需操作 HTML，页面会自动更新数据。
我们也可以使用 v-once 指令，表示只执行一次插值，后面如果数据有改变，插值将不会更新。
<body>
<div id="app">
<p v-once>{{message}}</p>
<!-- message只会渲染一次 -->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
</body>2.输出 HTML 代码，可以使用 v-html 指令。
<body>
<div id="app">
<p v-html="message"></p>
<!-- 渲染结果
<p><h1>hello</h1></p>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'<h1>hello</h1>'
}
})
</script>
</body>注意：在页面上动态的渲染html是一件很危险的事情，因为它很容易导致 XSS 攻击 (跨站脚本攻击)。
3.要给 HTML 元素绑定属性，不能直接使用文本插值，vue 有特定的指令 【v-bind】进行属性的绑定
<body>
<div id="app">
<p v-bind:class="value">hello</p>
<!-- 渲染结果
<p class="content">hello</p>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
value:'content'
}
})
</script>
</body>属性的插值使用比较频繁，所以vue也提供了该指令的简写【:】，一个冒号，效果跟使用【v-bind:】一样。
<body>
<div id="app">
<h2 v-bind:id="vid" v-bind:class="vclass" :title="vtitle">vue多属性绑定</h2>
<!-- 渲染结果
<h2 id="myid" class="myclass" title="mytitle"></h2>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
vid:"myid",
vclass:'myclass',
vtitle:'mytitle'
}
})
</script>
</body>4.javascript表达式
<body>
<div id="app">
<h2>{{name.toLowerCase()}}</h2>
<!-- 渲染结果
<h2>myapp</h2>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
name:'MYAPP'
}
})
</script>
</body>注意：使用 JavaScript 表达式进行运算时，只能使用单个表达式或者链式调用，不能使用语句。
5.指令指的是带有【v-】前缀的特殊属性，在插值中，我们已经使用了【v-html】和【v-bind】这两个指令。可以看出，指令的职责是当表达式的值改变时，响应式地作用于 DOM。
<a v-bind:href="url"></a>上述代码中 href 就是【v-bind】指令的参数，告知【v-bind】指令将 href 属性和 url 的值绑定在一起。
6. 过滤器
对于一些要经过复杂计算才显示的插值，简单的表达式可能无法满足，这时可以使用vue的过滤器进行处理。
过滤器在插值和【v-bind】指令中使用，格式如下：
<!-- 在两个大括号中 -->
{{ name | myfilters }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div><body>
<div id="app">
<h2>{{name | myfilter}}</h2>
<!-- 渲染结果
<h2>ppaym</h2>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
name:'myapp'
},
filters:{
myfilter(value){
return value.split('').reverse().join('');
}
}
})
</script>
</body>上述代码中定义了一个myfilters的过滤器，功能是将插值进行反转后输出
多个过滤器可以串联使用，下面实例是在一个插值中使用了两个过滤器：
<body>
<div id="app">
<h2>{{name | myfilter | touppercase}}</h2>
<!-- 渲染结果
<h2>PPAMY</h2>
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
name:'myapp'
},
filters:{
myfilter(value){
return value.split('').reverse().join('');
},
touppercase(value){
return value.toUpperCase();
}
}
})
</script>
</body>7.对于【v-on】和【v-bind】这两个最常使用的指令，vue提供了简写。
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a><!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>8.计算属性computed
如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。
<body>
<div id="app">
a={{a}}===b={{b}}
<!-- 渲染结果
a=1===b=2
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
a:1
},
computed:{
b:function(){
return this.a + 1;
}
}
})
</script>
</body>9.缓存是计算属性的一大特点，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变动时，获取的值将一直是缓存值。
<body>
<div id="app">
a={{a}}===b={{b}}
<!-- 渲染结果
a=1===b=2
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
a:1
},
computed:{
b:function(){
return this.a + 1;
}
}
})
vm.b = 8;
</script>上述实例中，我们对 b 进行了重新赋值，但是没有改变a的值，因为 b 是依赖于 a 的，所以最终 b 的结果还是2
10.计算属性与methods的区别
计算属性能实现的功能，使用方法（methods）也能实现，但两者还是有本质的不同，区别如下：
- 计算属性获取的是缓存值，而methods是直接调用函数进行计算所得。
- 计算属性中的函数在dom加载后马上执行，并将结果显示在页面上。methods中的函数需要一定的触发条件，否则不会执行。
11.vue.js 计算属性有两个方法，分别为 getter 和 setter，当没有指明方法时，默认使用 getter
<body>
<div id="app">
a={{a}}===b={{b}}
<!-- 渲染结果
a=1===b=2
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
a:1
},
computed:{
b:{
get:function(){
return this.a + 1;
}
}
}
})
</script>
</body><body>
<div id="app">
{{title}}
<!-- 渲染结果
hello,javascript
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
title:'hello,html'
},
computed:{
message:{
get:function(){
return this.title;
},
set:function(newValue){
this.title = newValue;
}
}
}
})
vm.title="hello,javascript"
// 不设置这一句会输出hello,html
</script>
</body>