Vue 全家桶

vue实例上的属性

VueComponent{
    $attrs:(...)
    $children:[VueComponent] // 用来访问当前组件实例的直接子组件实例 【组件树】
    $createElement:f(a,b,c,d)
    $el:div#app //用来挂载当前组件实例的demo元素【dom访问】
    $els://用来访问$el元素中使用了v-el指令的DOM元素
    $listeners:(...)
    $options:{} //用来访问组件实例化时的初始化选项对象【数据访问】
    $parent:{} // 用来访问组件实例的父实例【组件树】
    $refs:{}  //用来访问ref指令的子组件【组件树】
    $root:{} // 用来访问当前组件树的根实例【组件树】
    $scopedSlots:{}
    $slots:{}
    $vnode:{}
    init
    msg
    sayHello
    title
    _c
    _data
    _directInactive:false
    _events:{}
    _hasHookEvent
    _inactive:null
    _isBeingDestroyed:false
    _isDestroyed:false
    _isMounted:true
    _isVue:true
    _props:{}
    _renderProxy:{}
    _renderRoot:{}
    _self:{}
    _staticTrees:null
    _uid:20
    _vnode
    _watcher
    _watchers
    $data //用来访问组件实例观察的数据对象【数据访问】
    $isServer
    $props
    $route
    $ssrContext
    get $attrs: f
    set $attrs: f
    get $listeners
    set $listeners
    get msg
    set msg
}

Dom 方法的使用

• $appendTo(elementOrSelector,callback) 将el所指的DOM元素插入目标元素
• $before(elementOrSelector,callback) 将el所指的DOM元素或片段插入目标元素之前
• $after(elementOrSelector,callback) 将el所指的DOM元素或片段插入目标元素之后
• $remove(callback) 将el所指的DOM元素或者片段从DOM中删除
• $nextTick(callback) 用来在下一次DOM更新循环后执行指定的回调函数

event 方法的适用

1. 监听

   • $on(event,callback) 监听实例的自定义事件
   • $once(event,callback) 同上，只触发一次。
   • $watch(property,callback(new,old))
     

         watch:{
             text(new,old){
                 console.log(`${new}:${old}`)
             }
         }
     
         或
     
         const unWatch = this.$watch('text',(new,old){
              console.log(`${new}:${old}`)
         })
         setTimeout(()=>{
             unWatch()
         },2000)
         //需要手动销毁的第二种

2. 出发
   
   • $dispatch(event,args)：派发事件，先在当前实例触发，在沿父链一层层向上，对应的监听函数返回false停止
   • broadcast(event,args):广播事件，遍历当前实例的 b r o a d c a s t ( e v e n t , a r g s ) : 广 播 事 件 ， 遍 历 当 前 实 例 的 children,如果对应的监听函数返回fasle停止
   • $emit(event,args):触发事件
3. 删除
   
   • $off(event,callback) 删除时间监听
4. 其他
   
   • $forceUpdate() 强制组件刷新
   • $set(ele,attr,value) 给对象设置属性
   • $delete(ele,attr,value) 删除对象属性

生命周期

• new Vue()
• init Events & Lifecycle
• beforeCreate
• init injections & reactivity
• created
• Has ‘el’ option?
• Has template option
• compile template into reder function || compile el’s outerHTML as template*
• beforeMount
• crate vm.$el and replace “el” with it
• mounted
• beforeUpdate
• Virtual DOM re-render and patch
• updated
• when vm.$destroy() is called
• beforeDestroy
• Teardown watchers , child components and event listeners
• Destroyed
• destroyed

数据绑定

<template>
  <div id="app">
    <p>{{isActive?'active':'notActive'}}p>
    <p>{{arr.join(' ')}}p>
    <p>{{Date.now()}}p>
    <p v-html="html">p> 
    <div
      :class="{ active: isActive }"
      :style="[styles, styles2]"
    >div>
    <div :class="[isActive? 'active':'']">div>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}li>
    ul>

    // 单个checkbox
    <input type="checkbox" v-model="a"> {{a}} <br/>
    // 多个checkbox
    爱好：<input type="checkbox" v-model="b" value="游泳"> 游泳
    <input type="checkbox" v-model="b" value="游泳"> 爬山
    <input type="checkbox" v-model="b" value="游泳"> 睡觉

    性别：<input type="radio" v-model="c" value="男"> 男
    <input type="radio" v-model="c" value="女"> 女

    // 只绑定一次
    <p v-once="a">p> 

  div>
template>
<script>
export default {
  data() {
    return {
      isActive: false,
      arr: [1, 2, 3],
      html: '123',
      styles: {
        color: 'red',
        appearance: 'none'
      },
      styles2: {
        color: 'black'
      },
      a: false,
      b:[], // 可以拿到checkbox 的 value
      c:'' // 性别
    };
  }
}
script>

v-model 修饰符

1. .number
   


2. .trim 去掉空白符
3. .lazy 值数据同步

computed 计算属性

<template>
  <div id="app">
    <p>{{name}}p>
  div>
template>
<script>
export default {
  data() {
    return {
      firstName: 'Fin',
      lastName: 'Get',
    };
  },
  computed: {
    name() {
      return `${this.firstName}${this.lastName}`
    }
  }
}
script>

双向绑定的计算属性与vuex

// vuex state是无法直接修改的，官方给出了 v-model 的解决方案
"message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
如果在方法或者生命周期中使用了计算属性，则必须设置一个set

watch 监听器

"demo">{{ fullName }}

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: { // watch 方法最初绑定的时候，它是不会执行的，只有变化了才会执行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

升级

"demo">{{ obj.a }}
"obj.a" />

var vm = new Vue({
  el: '#demo',
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler() {
        console.log('obj.a changed');
      },
      immediate: true,
      deep: true // 如果不加这一句，在输入框中输入值，并不会打印 obj.a changed
    }
  }
})

组件

vue组件中的data 为什么必须是函数

Vue.component('myComponent',{
    templace:'
hello component
',
    data(){
        return {}//返回一个唯一的对象，不要和其他组件共用一个对象返回
    }
})

可以理解构造函数，对构造函数的引用，实例化一个组件对象。
差不多就是这样：

let MyComponent = function(){} //定义一个构造函数
MyComponent.prototype.data = {
    name:'component',
    age:0
}
// 实例化组件对象
let componentA = new MyComponent()
let componentB = new MyComponent()
componentA.data.name === componmentB.data.name //true

改一下
MyComponent.prototype.data = function(){
    return:'component'
    ,age:0
}

用Vue.use()定义全局组件

//定义一个button组件
//button.vue


//button.js
import buttonComponent from './button.vue'
const Button = {
    install(Vue){
        Vue.component('Button',ButtonComponent)
    }
}
export default Button

//main.js
import Button from './component/button.js';
Vue.use(Button);

props

<template>
    <div class='button'>按钮div>
template>
<script>
export default{
    props:['msg'], //并无限制
    props:{
        propA:Number, //基础的类型检查
        propB:[String,Number],//多个可能的类型
        propC:{  //必填的字符串
            type:String,
            required:true
        },
        propD:{  //带有默认值的数字
            type:Number,
            default:100
        }，
        propE:{  //带有默认值的对象
            type:Object,
            default:fuction(){
                return {mssage:'hello'}
            }
        },
        propF:{  //自定义验证函数
            validator(value){
                // 这个值必须匹配下列字符串中的一个

                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }
}
script>

vue组件 extend

Vue.extend 包含组件选项的对象，其中data 选项必须是函数。

import Vue from 'vue'
// 一个包含组件选项的对象
const component = {
    props：{
        active:Boolean,
        propOne:string
    },
    template:`
"text" v-model="text">
      "active">see me if active
`,
    data(){
        return{
            text:0
        }
    },
    mounted(){
        console.log('coml mounted')
    },
}
//创建一个 子类
const CompVue = Vue.extend(compoent）        
//实例化一个
new CompVue({
    el:'#root',
    propsData:{
        propOne:'xxx'
    },
    data:{
        text:123
    },
    mounted () {                    
       console.log('instance mounted');
    }
})