Vue的模板语法和计算属性

waterc 发布于2019-08-20 19:04 / 3460人阅读

摘要：模板语法上一篇入门，属性和指令下一篇的与绑定插值文本最常用的文本插值方法是使用语法标签将会被替代为对应数据对象上属性的值。计算属性只有在它的相关依赖发生改变时才会重新求值。

模板语法

上一篇：Vue 入门，Vue属性和指令：https://segmentfault.com/a/11...

下一篇：Vue 的 Class 与 Style 绑定：https://segmentfault.com/a/11...

插值文本

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

Message:{{msg}}

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

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

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

纯HTMl

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

{{msg}}

属性 rewHtml 会将这个 div 内的内容替换，也就是说原来绑定的 msg 属性被忽略，rewHtml 将作为 HTML 被直接添加

hello world

特性

Mustache 语法不能用在设置 HTML 特性上，这时候就可以使用 v-bind 指令：

哈哈哈哈

布尔类特性可以这样设置，值为 false ，则该特性就会被删除

如上，当我们把 tit 的值改为 false 时，则 button 中的 disabled 会被删除，按钮也就可以点击了

javascript 表达式

Vue 也提供了对js表达式的支持

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

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

过滤器也可以串联：


{{message|reverse|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}}

结果如下

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

事实上，在计算结果上，method方法和compute方法是一致的，然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

而使用method方法时，每次重新渲染时，都要再次执行函数

计算属性 vs Watched 属性


    {{fullName}}

在控制台修改 exp.fullName的值，那么 firstName 和 lastName 的值也会相应的更新

Vue 方法

事件

methods:{

}

过滤器

filters:{

}

计算

conputed:{

}

观察

watch:{

}

钩子函数

created:function(){
//创建
},
mounted:function(){
//挂载
},
updated:function(){
//更新
},
destoryed:function(){
//销毁
)

To be continue......

上一篇：Vue 入门，Vue属性和指令：https://segmentfault.com/a/11...

下一篇：Vue 的 Class 与 Style 绑定：https://segmentfault.com/a/11...

GPU云服务器云服务器 vue的计算属性 vue实例属性 vue.js 属性匹配对象的属性和函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85101.html

Vue实例、模板语法、计算属性

摘要：然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。这是计算属性无法做到的。 Vue实例构造器每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的： var vm=new Vue({ //...

CoffeX 2019-08-20 19:04 评论0 收藏0
你想知道的vue的模板语法

摘要：模板语法插值文本数据绑定最常见的形式就是使用语法双大括号的文本插值标签将会被替代为对应数据对象上属性的值。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于。通常更好的想法是使用属性而不是命令式的回调。模板语法插值文本数据绑定最常见的形式就是使用 Mustache 语法（双大括号）的文本插值： Message: {{ msg }} Mustache 标签将会被...

LeviDing 2019-08-20 19:04 评论0 收藏0
Vue_Vue权威指南

摘要：效率不高，很多多余，称之为脏检查。通过索引设置数组元素并触发视图更新。解决闪烁问题自定义指令自定义指令提供一种机制将数据的变化映射为行为。 Vue特性 Vue只是聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue通过简单 API提供高效的数据绑定和灵活的组件系统轻量数据绑定指令插件化架构从传统后台MVC 向REST API + 前端MV*迁移DOM是数据的一种自然映...

SimonMa 2019-08-21 14:31 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

CompileYouth 2019-08-21 11:18 评论0 收藏0
Vue.js起手式+Vue小作品实战

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代...

付伦 2019-08-01 16:07 评论0 收藏0