Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。
一，插值的几种方式
1，文本插值，使用双大括号{{}}
js代码：
var vm = new Vue({
el:"#app",
data:{
text:"文本"
}
})
html代码：
<div id="app">{{text}}</div> // 文本
2，原始html
双大括号会将数据解析成普通文本，而不是html代码。为了输出真正的html，需要使用 v-html指令
举例：
js代码：
var vm = new Vue({
el:"#app",
data:{
orihtml:"<span style='color:red'>红色</span>"
}
})
html代码：
<div id="app" v-html="orihtml"></div> // 红色
<div id="app">{{orihtml}}</div> // <span style='color:red'>红色</span>
3，属性
双大括号语法不能作用到属性上，这种情况使用指令:v-bind
举例：
<ul v-for="item in category" v-bind:key="item.id">
<li>{{item.name}}</li>
<li>{{item.description}}</li>
</ul>
// 动态的为key绑定一个属性，这个属性为item.id
//v-bind具有简写形式
// <ul :key="item.id"></ul>
JavaScript表达式
{{1+1}}
{{num + 1}}
{{ ok ? 'YES' : 'NO' }}
二，指令
带有v-前缀的特殊属性。指令的职责是：当表达式的值发生改变时，将其产生的连带影响，响应式的作用于dom。
v-if|v-else|v-else-if
v-for
遍历渲染
举例
<div v-for="item in list"></div>
v-if v-else v-else-if
条件渲染
举例：
<h1 v-if="exp">Vue is awesome!</h1>
<h1 v-else>Oh no</h1>
**注意**：是否能看到文本内容，取决于exp值的真假,
当exp返回true时h1的内容会被渲染，否则渲染v-else指令中的内容
v-if可以单独使用
v-show:
条件性渲染某块内容，但是v-show仅仅是切换元素的display属性，
元素始终都会被渲染，v-show不支持template元素
**注意：**：
v-if 与 v-show
v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
v-if是惰性的，如果在初始渲染时条件为假，他就什么也不做，直到条件第一次变为真的时候，才会渲染条件块。
v-show不管初始条件是真是假，元素总会被渲染，并且只是简单的基于css进行切换；
v-if的切换开销高，v-show的初始渲染开销高
注意： 频繁的切换，使用v-show比较好，条件很少改变时，使用v-if比较好。
v-bind
v-bind指令可以用来响应式更新html属性，属性绑定
v-bind:key='item.id'
v-bind:title='title'
**注意**： v-bind可以简写
:key='item.id'
:title='title'
v-on
事件绑定，用于监听dom事件
举例：
<a v-on:click="handler">百度</a>
**注意**：v-on可以简写
<a @click="handler">百度</a>
v-model
双向数据绑定，一般应用在表单元素上
举例：
v-model="form.title"
动态参数
你可以使用动态参数为一个动态的事件名绑定处理函数
动态参数表达式有一些语法约束，evName无效,evname有效，回避大写
<li>
<h3>动态参数</h3>
<input type="text" v-model="evname" />
<!-- dblclick -->
<button v-on:[evname]="xxx()">点我</button>
</li>
new Vue({
el: '#app',
data() {
return {
msg: 'hello vue',
evname:'click'
}
};
},
/* 事件是用methods,与data同级 */
methods:{
xxx(){
console.log('xxx方法执行')
}
}
});
简写
v-bind:简写 : 如 v-bind:id -> :id
v-on简写变成@ 如 v-on:click -> @click
全局过滤器
全局过滤器定义在实例化外面,过滤全局
注：全局过滤器只能当项目发布到前端服务器的时候，才能使用
<li>
<h3>全局过滤器</h3>
{{msg |b}}
</li>
<script type="text/javascript">
// value 表示要过滤的内容
Vue.filter('c',function(v){
return v.substring(7);
})
new Vue({
el: '#app',
data() {
return {
msg: 'http://www.baidu.com',
};
},
/* 局部过滤器可以针对这里的变量进行过滤 */
filters:{
a(v){
return v.substring(4);
},
b(v){
return v.substring(3,12)
}
}
});
</script>
局部过滤器
<div id="app">
<ul>
<li>
<h3>局部过滤器</h3>
{{msg}}
{{msg |a}}
</li>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg: 'http://www.baidu.com',
};
},
/* 局部过滤器可以针对这里的变量进行过滤 */
filters:{
a(v){
return v.substring(4);
}
}
});
</script>
计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
<div id="app">
<li>
<h3>计算属性</h3>
数量:<input type="text" v-model="num" />
单价:<input type="text" v-model="price" />
计算总价: {{total}}
</li>
</div>
new Vue({
el: '#app',
data() {
return {
num:1,
price:16,
};
},
computed:{
total(){
// 在计算属性定义的时候,是可以获取大盘
return parseInt(this.num) * parseInt(this.price);
}
}
});
监听属性
监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}
<li>
<h3>监听属性</h3>
km:<input type="text" v-model="km" />
mm:<input type="text" v-model="mm" />
</li>
new Vue({
el: '#app',
data() {
return {
km:1,
mm:1000
};
},
watch:{
km(v){
this.mm=v*1000;
},
mm(v){
this.km=v/1000;
}
}
});
计算属性和监听属性的区别：
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例： 购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 。
与watch之间的区别：
watch主要用于监控Vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象 。
computed(计算属性) 和 watch(监听属性) 都存在缓存机制,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出 监听属性比计算属性复杂！ 因此在一个项目同时可以使用计算属性和监听属性实现时候我们 优先使用计算属性，其次是监听属性，最后选择methods!
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
