vue框架相关

1. vue
   vue渐进式的javascript库，基于mvvm模式，m model,v view ,vm viewModel(m<->v),数据驱动框架
   jquery & vue

2. 模板语法

   1. 双大括号
      一般用在标签的内部

      {{ message }}

      {{ message.split("").reverse().join("")}} {{ a + b }}
   2. 指令
      一般用在标签的属性中
      v-html v-if v-else-if v-else v-show v-for v-model v-bind:attr 【:attr】
      v-on:eventType 【@eventType】
      v-slot:slotName="作用域" 【#slotName】
   3. 组件

      1. 功能组件
         
         elementui 提供了一套完整的组件库
         

      2. 页面组件
         Customer.vue 组件
         

          </template>
          <script>
          	export default {
         
          	}
          </script>
          <style scoped>
         
          </style>
         

3. vue实例
   每个组件都有一个vue实例与之对应。

   1. 根组件的实例对象由用户自己创建
      根组件
      let vm = new Vue({
      el:"#app",
      data:{

       }
      

      })
      子组件
      let myAlert = {
      template:``,
      data(){
      return {

       	}
       },
       methods:{}
      

      }
      Vue.component(‘my-alert’,myAlert)
      调用my-alert，实际上就是创建了一个myAlert的实例
      

   2. vue实例对象可以访问
      vue实例对象可以直接访问data、methods、props、computed定义的属性或者方法；
      methods中的方法、构造函数、计算属性中的方法中的this指向当前vue实例

4. 生命周期
   初始化vue实例对象
   beforeCreate
   created
   编译模板，将模板转换为dom对象$elbeforeMount将vue实例中的data、method绑定到$el
   mounted
   设置监听，data中值发生变化，模板就会重新渲染
   beforeUpdate
   updated
   销毁
   beforeDestroy
   destroyed

5. style与class绑定
   style

   1. style属性的绑定

      data:{ style:'color:red' }

   2. style属性的绑定拓展语法

      data:{ style:{ color:'red' } } =>
      data:{ style:{ color:'red' } a:{ background:"lightblue" } }

   class

   1. class属性
      data:{ cc:"basic current" }
   2. class属性的拓展语法（vue）
      data:{ a:"basic", b:"current" }

6. 事件机制

   1. 三要素
      事件源
      事件处理函数
      事件对象

   2. 事件绑定