vue官方文档阅读总结

最新推荐文章于 2023-03-12 23:13:47 发布

Cainell

最新推荐文章于 2023-03-12 23:13:47 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/Cainell/article/details/102591638

版权

数据与方法

除了数据属性，vue实例还暴露了一些有用的实例属性和方法，它们都有前缀$,以便与用户定义的属性区分开来。例如：

var data = { a: 1}
var vm = new Vue({
    el: '#example',
    data: data
})

vm.$data === data //=> true
vm.$el === doucment.getElementById('example') //==>true

//$watch是一个实例方法
vm.$watch('a',function(newValue,oldValue){
    //这个回调将在'vm.a'改变后调用
})

这些实例方法和属性可以在vue官网给出的API参考中查询其功能和用法。

实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。

比如created钩子可以在一个实例被创建后执行代码。也有一些其他钩子，在实例生命周期的不同阶段被调用，如：mounted、updated和destroyed。生命周期钩子的this上下文指向调用它的vue实例。

不要在选项属性或回调上使用箭头函数，比如：created: () => console.log(this.a)或vm.$watch('a',newValue => this.myMethod()。因为箭头函数是和父级上下文绑定在一起的，this不会是如你所预期的vue实例。经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示：

下图展示了生命周期图示。在学习vue的过程中，掌握它。

Vue å®ä¾çå½å¨æ

模板语法：

vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层vue实例的数据。所有vue.js的模板都得合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少。

如果你熟悉虚拟DOM并且偏爱js的原始力量，你也可以不用模板，直接写渲染函数（render)函数，使用可选的jsx语法。

插值

#文本

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

<span>Message:{{msg}}</span>

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

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

<span v-once>这个将不会改变：{{msg}}</span>

帮助链接：

Vue.js 模板语法：

https://www.runoob.com/vue2/vue-template-syntax.html

计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单计算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性vs侦听属性

computed watch created

getter setter

知道v-前缀指令怎么用