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. 其他：暂时不看。

基础属性

el - 挂载点
- 用法：new Vue({ el:'#app' })
  等价于：new Vue().$mount('#app')
data - 内部数据
- 用法：data:{...} / data(){ return{...} }
  支持函数和对象形式，推荐函数写法
methods - 方法
- 事件处理或普通函数

components - 组件

用法：

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

组件的其他引入方法：

页面内创建组件：

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

前两种的结合

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

命名规则：组件一般都以大写字母开头。

生命钩子：
- created(){...}实例出现在内存中时调用
- mounted(){...} //实例出现在页面中时调用
- updated(){...} //实例数据更新时调用
- destroyed(){...} //实例被销毁时调用
props：

定义：自定义组件的属性

使用方法：

    //Demo组件内：
export default{
    props:['counter']   //也可以传回调函数
}
    //main.js内:
template:`
    
`

注意：如果想给自定义组件的属性赋值变量，需要前边加冒号“:”。例如：
```
    //main.js内
...
data:{ n: 5 }
template:``
```

进阶属性

computed - 计算属性

语法：

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

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

优点：

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

何时使用：如果一个数据依赖于其他数据，使用computed

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变了。

computed V.S watch
1. computed：计算属性； watch：侦听。
2. computed：
  - 调用时不需要加括号()
  - 会自动缓存。在依赖不变的情况下不会重新计算。
3. watch:
  - 如果监听的属性变化时，执行一个回调
  - Vue框架会传给回调两个参数，依次是newValue，oldValue
  - immediate：第一次渲染时，是否监听
    - deep：监听一个对象时，是否监听对象里属性的变化
template
- 三种写法
  1. 写在HTML里（vue完整版）
```
 //index.html
{{n}}
 //main.js
const vm = new Vue({
     el:'#app',
     data(){ return{
         n:0
     }},
     methods:{
         add(){ this.n+=1 }
     }
})
```
  2. 写在options里（vue完整版）
```
 //index.html
+1
        
  `,
     data(){ return{ n:0 } },
     methods:{
         add(){ this.n+=1 }
     }
})
```
  3. 配合.vue文件（vue运行时版）
```
  //Demo.vue



 
  //index.html


  //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' }
 ...

  //或 
```
  3. 样式绑定 — :style
    - ```
    data:{
       fontsize: 16,
       top: 10
    }
```
- CSS 属性名可以用驼峰式或短横线分隔(记得用引号括起来)来命名
4. 绑定事件 — v-on:
  - 用法
  - 简写
5. 条件判断 — v-if
  - ```
   x大于0
   x等于0
   x小于0
```
    用法显而易见，很好理解
  6. 循环 — v-for
    - for(value,key) in 对象 / for (item,index) in 数组
```
 
   
      {{index}}:{{item}}
   
 
 
   
      {{key}}:{{value}}
   
 
```
    - :key="index"会有bug，最好不要用index当作key
  7. 显示/隐藏 — v-show
    - n是偶数
    - 近似于 n是偶数
  8. 修饰符
    - v-on：{.keyCode| .keyAlias} .prevent, .stop 等等
      - ：用户键盘输入回车时，调用fn
      - ：输入回车，调用fn
      - ：阻止默认事件
      - ：停止事件冒泡
    - v-bind: .sync 等等
      - .sync 详细用法（子组件改父组件值）
    - v-model: .lazy .number .trim
    - 更多修饰符 Vue文档
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操作经常使用，或者过于复杂，可以封装为指令，简化代码。

mixins - 混入

写法

//demo.js内
const demo = {
  data(){ return { 
      a:0,
      ...//其他公共属性
      }
  }
  methods:{ 
      add(a){ return a+1 } 
      ...//其他公共方法
  }
}

//组件Demo1内


//组件Demo2内

作用：
- 减少data，methods，钩子的代码重复
- 实质上就是复制。
智能合并

extends - 继承
- 与mixin用处类似，直接看文档吧
provide/inject - 提供/注入
- 普通程序中用不到，用的话看文档吧

未完待续.

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

Vue的实用主义全解

options里有什么

基础属性

进阶属性

你可能感兴趣的:(javascript,vue.js,前端)