Vue知识点串讲--属性绑定、class与style绑定、生命周期、组件应用

1.属性绑定

• v-bind:属性="":可以进行绑定属性，将数据和这个属性进行绑定
• 注意：在id=app下使用插值表达式{{msg}}，会出现闪烁的情况。可以使用<span v-text="msg"></span>的形式去绑定

2.class与style绑定

:class="{类名：布尔值}"：当布尔值为true时去执行这个类型
:style="{width:widthLen}"：在里面去书写插值表达式

3.生命周期

额外概念：

• vue实例从创建到销毁的过程就是生命周期
• this.$destroy()：会手动调用系统的destroy方法，去销毁所有的资源

完整过程：

• 首先创建vue实例并初始化数据（完成了beforecreate和created操作），然后判断有没有el选项，没有就去寻找mounted（这个只能手动增加，手动去挂载dom），有就去查找有没有template选项，有就编译这个模板成为render函数，没有就从外部的html中查找，编译模板成为render函数。（template选项一般不用，因为在外部更为灵活）。
• beforecreat：组件实例还没创建
• created：此时组件实例已创建，一般用来发送异步请求获取数据
• beforemount：这里虚拟dom创建完成了，但还没挂载到页面上，所以在这里去改变data中的数据是不会触发update的，此时获取的el内容也不是真正的数据，可能还只是插值表达式，因为对应的内容还没有挂载到dom上面。
• mounted：页面渲染完毕
• 虚拟dom对比（diff）：在beforeUpdate和updated中，会将原来的dom和现在的dom进行对比，找到变化的组件，并进行重新渲染
• beforeDestroy：，vue实例尚未销毁，在这里进行一些清理的工作，比如清楚定时器，因为这些需要手动的清除
• Destroy：vue实例已经销毁，所有事件监听器子实例都被销毁

3.1 ref vs refs vs $el

• ref：给组件绑定一个名字，可以通过$refs来获取
• refs：就是ref的集合
• $el：用来获取元素的dom，通过$refs获取到该组件之后，要执行dom操作，必须加上$el，因为组件不是元素

3.2 render函数

最重要的工作就是生成虚拟dom

4.组件应用

单一功能原则：原则上一个组件应该只负责一个功能，如果它负责了多个功能，应该考虑把它进行拆分

大驼峰命名，使用时用-：indexA -> <index-a></index-a>

4.1 为什么组件的data必须是函数，而vue的根实例既可以是对象也可以是函数

1.因为以函数的形式返回，每个实例都会有各自的作用域，互不影响，各自维护的是各自的数据，当这个实例的数据变化了不会影响到别的实例

2.而对象的引用是指向同一块内存空间的，这个实例data的改变会影响到别的实例

3.而根实例是单例模式，它只有一个实例，所以不存在这些问题

4.2 组件注册

组件的注册有两种方法：在全局组件中注册和在vue实例中注册。需要注意，子组件只能在父组件中使用，其他组件是不能用的，只有注册了才能使用

vue实例：在vue实例中注册的组件：HelloMsg，首先要定义 然后在vue实例的components中去注册

局部注册：直接Vue.component（‘组件名’,{}）

      // 定义HelloMsg组件
      const HelloMsg = {
        data() {
          return {
            msg: "Hello World",
          };
        },
        template: `<div>{{msg}}</div>`,
      };
      Vue.component("ComponentA", {
        template: "<div><son></son></div>",
        components: {
          son: son,
        },
      });
      Vue.component("father", {
        template: "<div><p>我是父组件</p><son></son></div>",
        components: {
          // 创建一个子组件
          //   son: {
          //     template: "<p>我是子组件</p>",
          //   },
          son: son,
        },
      });
      var vm = new Vue({
        el: "#app",
        data: {},
        components: {
          "hello-msg": HelloMsg,
        },
      });