vue框架总结

一、指令

• v-model 数据绑定
• v-for 循环
• v-html 为绑定的元素添加html文档片段
• v-bind 属性绑定，简写 ‘：’
• v-on 事件绑定，简写 ‘ @ ’
• v-if
• v-show
  v-if和v-show控制元素显示或隐藏，v-show原理是改变元素的display属性，v-if则使该元素在文档流中消失。

二、computed和method区别

• computed定义的方法我们是以属性访问的形式调用的，而且具有缓存功能；
• computed基于依赖的数据，只有在它的相关依赖数据发生改变时才会重新计算；
• method是在数据发生改变渲染页面的时候会重新调用；

三、插槽

• 插槽相当于一个占位符，当没有内容传递过去的时候会显示插槽的内容
• 具名插槽：
  一个组件中可以使用多个插槽,为了区分每一个插槽的位置可以添加名字
  通过name属性设置名字
  在父组件中使用具名插槽的时候需要把插入的内容放置在template节点中
  使用v-slot:插槽的name值 进行绑定位置
  v-slot可以简写为#
  在既有具名插槽又有默认插槽的时候
  如果不使用v-slot进行绑定name会把所有的内容都插入在默认位置

四、template

• template标签是不会在页面中渲染出来的
• template创建的模板节点，是不会被渲染出来的 ，并且只能放在vue实例的作用域之外

五、生命周期

• beforeCreate--------created
• beforeMount---------mounted
• beforeUpdate--------updated
• beforeDestroy-------destroyed

beforeCreate--------created

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。
注意：此时还是没有el选项

created---------beforeMount

在这一阶段发生的事情还是比较多的。

首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。

template参数选项的有无对生命周期的影响：
（1）.如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
（2）.如果没有template选项，则将外部HTML作为模板编译。
（3）.可以看到template中的模板优先级要高于outer HTML的优先级。

beforemount------- mounted

可以看到此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。

mounted

在mounted之前h1中还是通过{{message}}进行占位的，因为此时还有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

beforeUpdate-------updated

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数

beforeDestroy------destroyed

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。