vue.js &3 @慕课网

生命周期函数钩子

• 定义：vue实例在某一时间点会自动执行的函数
• 实例：

模板语法

• 都可以加入一些表达式
• 实例：

计算属性，方法和侦听器

• 计算属性：当变量不改变时，计算机制将不调用（缓存概念）

• 方法：没有缓存机制，性能不如计算属性

• 侦听器：同样具有缓存机制，但代码较计算属性复杂

计算属性中的get和set

• get方法：通过其他的值，计算一个新值
• set方法：通过设置一个值，改变与之相关联的值

  

Vue中的样式绑定(通过对象与数组)

• class的对象绑定

• class与数组绑定：添加或删除页面上不同的类

• class与style

条件渲染

• v-if :对应的变量值为false，指令从DOM上移除
• v-show :对应的变量值为false，指令在页面上依旧存在，只是返回‘display noon’
• 总结：v-show的性能较高，不会反复的创建和删除DOM

• 注： v-if和v-show一定要连在一起使用
• key值：当我们给每个标签加上一个key值时，vue就不会去复用不同key值得内容

列表熏染

• vue中对数组变异方法(也可以通过改变数据的引用来改变数组的内容)
  push:添加一项
  pop：删除最后一项
  shift:删除第一项
  unshift:向数组的第一项添加内容
  splice:对数组截取
  sort:对数组进行排序
  reverse:对数组进行取反

• 利用模板标签进行数据的循环

• 对象的循环

• • 改变数据

1. 更改数据引用

   

2. 使用Vue.set方法

   

3. set实例方法

   

4. 数组上的set方法

   

   
   注： 改变对象的方法：改变引用，set方法