模板语法
插值
文本
最常用的文本插值方法是使用"Mustache"语法
Message:{{msg}}
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，可以执行一次性的插值，当数据改变时，插值处的内容便不会再更新
这个数据将不会改变{{msg}}
纯HTMl
{{}}会将数据解释为纯文本，为了能够输出HTML，可以使用 v-html 指令
var exp=new Vue({
el:".exp",
data:{
msg:"big world",
rewHtml:"
hello world
"}
})
属性 rewHtml 会将这个 div 内的内容替换，也就是说原来绑定的 msg 属性被忽略，rewHtml 将作为 HTML 被直接添加
hello world
特性
Mustache 语法不能用在设置 HTML 特性上，这时候就可以使用 v-bind 指令：
var exp=new Vue({
el:".exp",
data:{
tit:"2333"
}
})
布尔类特性可以这样设置，值为 false ，则该特性就会被删除
按钮
var exp=new Vue({
el:".exp",
data:{
tit:true
}
})
如上，当我们把 tit 的值改为 false 时，则 button 中的 disabled 会被删除，按钮也就可以点击了
javascript 表达式
Vue 也提供了对js表达式的支持
var exp=new Vue({
el:".exp",
data:{
message:"abcdefg"
}
})
gfedcba
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
指令
指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我上一篇文章中也提到过了
显示
这里， v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件，也在我的上一篇文章中也提到了
修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
过滤器
过滤器可以被用作一些常见的文本格式化，规定好过滤器的方法，便可以在模板里调用了。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：
{{ message | capitalize }}
var exp=new Vue({
el:".exp",
data:{
message:"abcdefg"
},
filters:{
reverse:function(value){
return value.split("").reverse().join("")
}
}
})
过滤器也可以串联：
var exp=new Vue({
el:".exp",
data:{
message:"abcdefg"
},
filters:{
reverse:function(value){
return value.split("").reverse().join("")
},
split:function(value1){
return value1.split("")
}
}
})
[ "g", "f", "e", "d", "c", "b", "a" ]
在这个例子中，reverse 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数 split，将 reverse 的结果传递到 split 中。
过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 取值后的值作为第三个参数。
缩写
Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind 缩写
v-on 缩写
计算属性
getter函数
正向{{message}}
反向{{reMessage}}
var exp = new Vue({
el:".exp",
data:{
message:"abcdefg"
},
computed:{
reMessage:function(){
return this.message.split("").reverse().join("")
}
}
})
结果如下
正向abcdefg
反向gfedcba
这里我们声明了一个计算属性 reMessage。我们提供的函数将用作属性 vm.reMessage 的 getter 函数：
console.log(exp.reMessage) // --> "gfedcba"
exp.message="Hello"
console.log(exp.reMessage) // --> eybdooG
当我们在控制台修改exp.message的值时，exp.reMessage 的值也会更新
计算属性 vs method 方法
其实针对上面的例子，使用method方法也可以达到
反向{{reMessage}}
methods: {
reMessage: function () {
return this.message.split('').reverse().join('')
}
}
事实上，在计算结果上，method方法和compute方法是一致的，然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
而使用method方法时，每次重新渲染时，都要再次执行函数
计算属性 vs Watched 属性
{{fullName}}
var exp=new Vue({
el:".exp",
data:{
firstName:"Pure",
lastName:"View",
fullName:"PureView"
},
watch:{
firstName:function(val){
this.fullName=val+this.lastName
},
lastName:function(val){
this.fullName=this.firstName+val1
}
}
})
如上，我们要改变fullName的值，使用watch方法会有比较多的重复代码，如果要改变的数据很多，则需要写很多的watch方法。其实可以使用计算属性：
var exp=new Vue({
el:".exp",
data:{
firstName:"Pure",
lastName:"View"
},
computed:{
fullName:function(){
return this.firstName+this.lastName
}
}
})
这样就舒服多了。
计算 setter
{{fullName}}
var exp=new Vue({
el:".exp",
data:{
firstName:"Pure",
lastName:"View"
},
computed:{
fullName:{
get:function(){
return this.firstName+this.lastName
},
set:function(newValue){
var name=newValue.split("")
this.firstName=name[0]
this.lastName = name[name.length - 1]
}
}
}
})
在控制台修改 exp.fullName的值，那么 firstName 和 lastName 的值也会相应的更新
Vue 方法
事件
methods:{
}
过滤器
filters:{
}
计算
conputed:{
}
观察
watch:{
}
钩子函数
created:function(){
//创建
},
mounted:function(){
//挂载
},
updated:function(){
//更新
},
destoryed:function(){
//销毁
)
To be continue......
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
