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

CoffeX 发布于2019-08-20 19:04 / 3149人阅读

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

Vue实例 构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：

 var vm=new Vue({
           //选项
     })  //vm(ViewModel 的简称)是Vue的实例，Vue是vm的构造器

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

 var vm=new Vue({
            el:"#app",
            data:{
                msg:"hallo vue.js"
            } 
       })

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性：

{{msg}}

生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模板、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。针对vm实例，不同生命周期提供了不同的钩子函数。(created mounted updated destroyed)


   {{msg}}

模板语法 插值 纯文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

{{msg}}

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

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

{{ msg }}//这个将不会改变

纯html

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

特性

mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

nihao

这同样适用于布尔类特性，如果求值结果是 falsy 的值，则该特性将会被删除：

插入表达式

{{ number + 1 }}
{{ ok ? "YES" : "NO" }}
{{ message.split("").reverse().join("") }}

指令

指令（Directives）是带有 v- 前缀的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

现在你看到我了

v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

“参数”，在指令名称之后以冒号表示

v-bind 指令可以用于响应式地更新 HTML 属性：

v-on 指令，它用于监听 DOM 事件：

修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

 百度

过滤器

用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：


   {{msg|format|daxie}}
   dvjs

过滤器可以串联


    {{msg|format|daxie}}

    {{msg|format|daxie}}
    dvjs

过滤器可以接收参数

 
    {{msg|format(11)|daxie}}

    {{msg|format(22)|daxie}}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 "arg1" 作为第二个参数，表达式 arg2 取值后的值作为第三个参数。

缩写 v-bind缩写

v-on缩写

计算属性 计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：


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

这就是对于任何复杂逻辑，你都应当使用计算属性的原因。

getter函数


    {{ReverseMsg}}

vm.ReverseMsg 的值始终取决于 vm.msg 的值。

计算属性的缓存 vs method方法

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，method 调用方式将总是再次执行函数。


    {{ReverseMsg}}
    {{ReverseMsg}}
    {{ReverseMsg1}}
    {{ReverseMsg1}}

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。

计算属性 vs Watched 属性


    {{fullName}}

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

观察 watchers

当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。


    {{msg}}

 
    {{msg}}

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

云服务器 GPU云服务器 vue实例属性 vue的计算属性 vue.js 属性修改实例属性

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

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

你想知道的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.js基础理解

摘要：之对基础理解构造器是一个构造函数，编程中称之为构造器每一个都是一个构造函数的实例，这个过程叫做实例化构造函数需要将其实例化后才会启用构造器要求实例化时需要传入一个选项对象组件其实都是被扩展的实例。 vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数，编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫...

Rainie 2019-08-20 19:04 评论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