vue官方文档阅读总结

数据与方法

除了数据属性,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-前缀指令怎么用

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值