模板语法

插值

文本

最常用的文本插值方法是使用"Mustache"语法

Message:{{msg}}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

通过使用 v-once 指令,可以执行一次性的插值,当数据改变时,插值处的内容便不会再更新

这个数据将不会改变{{msg}}

纯HTMl

{{}}会将数据解释为纯文本,为了能够输出HTML,可以使用 v-html 指令

{{msg}}

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表达式的支持

{{ message.split('').reverse().join('')}}

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 }}

{{ message|reverse}}

var exp=new Vue({

el:".exp",

data:{

message:"abcdefg"

},

filters:{

reverse:function(value){

return value.split("").reverse().join("")

}

}

})

过滤器也可以串联:

{{message|reverse|split}}

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......

Logo

前往低代码交流专区

更多推荐