JS框架：Vue 的实用主义全解

Vue的实用主义全解

options里有什么

• Vue(options)中，options包含五类属性

  1. 数据：data, props, propsData, computed, methods, watch
  2. dom：el, template, render, renderError
  3. 生命周期钩子：beforeCreate, created, beforeMount, mounted, beforeUpdate, Updated, actived, deactived, beforeDestroy, destroyed, errorCaptured
  4. 资源：directives, filters, components
  5. 组合：parent, mixins, extends, provide, inject
  6. 其余：暂时不看。

基础属性

1. el - 挂载点

   • 用法：new Vue({ el:'#app' })
     等价于：new Vue().$mount('#app')

2. data - 内部数据

   • 用法：data:{...} / data(){ return{...} }
     支持函数和对象形式，推荐函数写法

3. methods - 方法

   • 事件处理或普通函数

4. components - 组件

   • 用法：

     import Cpn form './Cpn.vue'
     ...
     new Vue({
         components:{
             Abc: Cpn
         }
         template:`
             <abc/>
         `
         ...
     })

   • 组件的其余引入方法：

     1. 页面内建立组件：

        //第一个参数为组件名，第二个参数是vue实例中的options
          Vue.component("Abc",{
            template: "<div>n</div>"
             ...
        })

     2. 前两种的结合

        new Vue({
             components:{
               Abc:{
                     template:``,
                     methods:{}
                    ...
               }
            }
        })

     3. 命名规则： 组件通常都以大写字母开头。

5. 生命钩子：

   • created(){...}实例出如今内存中时调用
   • mounted(){...} //实例出如今页面中时调用
   • updated(){...} //实例数据更新时调用
   • destroyed(){...} //实例被销毁时调用
6. props：

• 定义：自定义组件的属性

• 使用方法：

  //Demo组件内：
  export default{
      props:['counter']   //也能够传回调函数
  }
      //main.js内:
  template:`
      <Demo counter="1" />
  `

• 注意：若是想给自定义组件的属性赋值变量，须要前边加冒号“:”。例如：

  //main.js内
  ...
  data:{ n: 5 }
  template:`<Demo :counter:"n" />`

进阶属性

1. computed - 计算属性

   • 语法：

     1. data:{ firstName:'Oliver', lastName:'Young' }
           computed:{ //至关于只有get方法
             Name(){ 
                 return this.firstName+this.lastName 
             }
           }

     2. computed:{
               Name:{
                 get(){ return this.firstName+this.lastName }
                 set(value){ this.firstName=value }
               }
           }

   • 优势：

     简化代码，避免重复，方便修改
     自带缓存功能：若是依赖的属性没有变化，则不会从新计算

   • 什么时候使用：若是一个数据依赖于其余数据，使用computed

2. watch - 侦听

   • 用途：数据变化时，调用一个函数

   • 语法：

     1. ```
        watch:{
           o1: function(newVal,oldVal){},  //newVal和oldVal是Vue传给你用的
           o2(){},     //es6语法
           o3:[f1,f2]  //依次执行f1，f2
           o4:{
               handler(){//处理函数},
               deep: true/false,   //见下方解释
               immediate: true/false   //第一次是否执行
           },
           o5: 'callbackName',     //回调函数，写在methods里
           "obj.a": function(){}   //侦听obj的属性
        }
        ``` 
     2.  `vm.$watch('obj',fun,{deep:true})`

   • 什么叫“变化”？

     1. 简单类型：值变了，就是变了。
     2. 复杂类型（对象）：地址变了，才算变了。如：本来是obj:{num:1}，从新赋值为obj:{num}:1，分配了新的内存，因此变了。
     3. 当deep=true时，obj.a变了也意味着obj变了。

3. computed V.S watch

   1. computed：计算属性； watch：侦听。

   2. computed：

      • 调用时不须要加括号()
      • 会自动缓存。在依赖不变的状况下不会从新计算。

   3. watch:

      • 若是监听的属性变化时，执行一个回调
      • Vue框架会传给回调两个参数，依次是newValue，oldValue

      • immediate：第一次渲染时，是否监听

        • deep：监听一个对象时，是否监听对象里属性的变化

4. template

   • 三种写法

     1. 写在HTML里（vue完整版）

        //index.html
        <div id="app" @click="add">{{n}}</div>
         //main.js
        const vm = new Vue({
             el:'#app',
             data(){ return{
                 n:0
             }},
             methods:{
                 add(){ this.n+=1 }
             }
        })

     2. 写在options里（vue完整版）

        //index.html
        <div id="app></div>
         //main.js
        const vm = new Vue({
             el:'#app',
             template:`
                 <div>
                    {{n}}
                    <button @click="add">+1</button>
                </div>
          `,
             data(){ return{ n:0 } },
             methods:{
                 add(){ this.n+=1 }
             }
        })

     3. 配合.vue文件（vue运行时版）

        //Demo.vue
        <template>
          <div>
              {{n}}
              <button @click="add">+1</button>
          </div>
        </template>
        <script>
          export default {
              data(){ return{ n:0 } },
              methods:{
                  add(){...}
              }
          }
        </script>
        <style>
          //这里写css
        </style>
         
          //index.html
        <div id="app"></div>
        
          //main.js
        import Demo from './Demo'
        new Vue({
          render: h => h(Demo)
        }).$mount('#app')

   • template 模板语法

     1. 表达式 — {{ }}

        • {{ content }}： content能够是data中的数据，表达式，函数调用

     2. 绑定属性 — v-bind:

        • 当标签的属性须要使用data域中的数据时，有两种写法。例子以下：

          data:{ className:'red' }
           ...
          <div :class="className">
            //或 <div v-bind:class="className">

     3. 样式绑定 — :style

        • data:{
             fontsize: 16,
             top: 10
          }
          <div :style="{fontSize: fontsize+'px', 'padding-top': top+'px'}">

        • CSS 属性名能够用驼峰式 或短横线分隔(记得用引号括起来)来命名

     4. 绑定事件 — v-on:

        • 用法
          <button v-on:click="add">+1</button>
<button v-on:click="n+=1">n+1</button>
        • 简写
          <button @click="n+=1">+1</button>

     5. 条件判断 — v-if

        • <div v-if="x>0">x大于0</div>
           <div v-else-if="x===0">x等于0</div>
           <div v-else>x小于0</div>

          用法显而易见，很好理解

     6. 循环 — v-for

        • for(value,key) in 对象 / for (item,index) in 数组

          <ul>
             <li v-for="(item,index) in arrary" :key="index">
                {{index}}:{{item}}
             </li>
           </ul>
           <ul>
             <li v-for="(value,key) in arrary" :key="key">
                {{key}}:{{value}}
             </li>
           </ul>

        • :key="index"会有bug，最好不要用index看成key

     7. 显示/隐藏 — v-show

        • <div v-show="n%2==0"> n是偶数 </div>
        • 近似于<div :style={display: n%2==0? 'block':'none' }> n是偶数 </div>

     8. 修饰符

        • v-on：{.keyCode| .keyAlias} .prevent, .stop 等等

          • <input @keypress.13="fn" />：用户键盘输入回车时，调用fn
          • <input @keypress.enter="fn" />：输入回车，调用fn
          • <a @click.prevent="fn"></a>：阻止默认事件
          • <a @click.stop="fn"></a>：中止事件冒泡

        • v-bind: .sync 等等

          • .sync 详细用法（子组件改父组件值）
        • v-model: .lazy .number .trim
        • 更多修饰符 Vue文档

5. directives - 指令

   • 内置指令： v-on, v-for, v-if 等等
   • 自定义指令： v-xxx

   • 两种写法：

     1. 声明一个全局指令:
        Vue.directive('x',directiveOptions)

     2. 声明一个局部指令

        new Vue({
           ...
           directives:{
               "x":directiveOptions
           }
        })

   • directiveOptions里有哪些属性？

     1. bind(el,info,vnode,oldVnode) - 相似生命周期中created
     2. inserted(el,info,vnode,oldVnode) - mounted
     3. update(el,info,vnode,oldVnode) - updated
     4. componentUpdated(el,info,vnode,oldVnode) - 基本不用
     5. unbind(el,info,vnode,oldVnode) - destroyed
     • 详细用法

   • 指令的做用：

     1. 主要用于dom操做
     2. 若是某个dom操做常常使用，或者过于复杂，能够封装为指令，简化代码。

6. mixins - 混入

   • 写法

     //demo.js内
     const demo = {
       data(){ return { 
           a:0,
           ...//其余公共属性
           }
       }
       methods:{ 
           add(a){ return a+1 } 
           ...//其余公共方法
       }
     }
     
     //组件Demo1内
     <script>
     import demo from "./demo.js"
     export default{
       mixin:[demo]
     }
     </script>
     
     //组件Demo2内
     <script>
     import demo from "./demo.js"
     export default{
       mixin:[demo]
     }
     </script>

   • 做用：

     • 减小data，methods，钩子的代码重复
     • 实质上就是复制。
   • 智能合并

7. extends - 继承

   • 与mixin用处相似，直接看文档吧

8. provide/inject - 提供/注入

   • 普通程序中用不到，用的话 看文档吧

---

未完待续.