一、指令

v-model

雙向綁定，監(jiān)聽用戶的輸入事件，更新數(shù)據(jù)

<input v-model="message">
<input class="ipt_travelTit" type="text" v-model.trim="title" @keyup.enter="login" @keydown.up="upclick" placeholder="請(qǐng)輸入您的游記標(biāo)題" /> // 去掉input內(nèi)容前后空格 監(jiān)聽回車事件

v-bind

能夠及時(shí)對(duì)頁(yè)面的數(shù)據(jù)進(jìn)行更改

必須是變量，不能是常量

縮寫 v-bind :html屬性

'{red:isred}'

'isred ? "red" : "blue"'

'[{red: "isred"}, {blue: "isblue"}]'

v-bind:class="activeNumber === n + 1 ? 'active' : ''"

<p v-bind:class="someclass"></p>

不加 v-bind 那么 someclass 就是個(gè)常量，沒有任何動(dòng)態(tài)數(shù)據(jù)參與。當(dāng)加上 v-bind 之后，它的值 someclass 不是字符串，而是vue實(shí)例對(duì)應(yīng)的 data.someclass 這個(gè)變量。

<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = 

三目運(yùn)算 動(dòng)態(tài)class名

<input type="button" class="sumbitBtn" :class="isChecked == true? 'checked' : ''" value="確認(rèn)">

<p class="tt_ft" v-bind:class="{'ckeck' : checkAllFlag}">全選</p> // checkAllFlag為true渲染出 ckeck class名

v-on

縮寫 v-on @方法

<input :value="name" v-model="body">

v-bind 產(chǎn)生的效果不含有雙向綁定，所以 :value 的效果就是讓 input的value屬性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立雙向綁定，因此首先 data.body 的值會(huì)給input的value屬性，其次，當(dāng)input中輸入的值發(fā)生變化的時(shí)候，data.body 還會(huì)跟著改變。

阻止冒泡

@click.stop=""

v-for

item in/of 數(shù)據(jù)json

<ul>
    <li v-for="item in arr">{{item.name}}</li>
</ul>

v-show

控制元素顯示與隱藏

show布爾值

<div v-show="show">
</div>

new Vue({
  el: '#box',
  data() {
    return {
      show: true
    }
  }
})

v-text

讀取文本內(nèi)容

<div>
    <p v-text="msg"></p>
</div>

new Vue({
  el: '',
  data() {
    return {
      msg: 'aaa'
    }
  }
})

v-html

<div>
    <p v-html="msg"></p>
</div>

new Vue({
  el: '',
  data() {
    return {
      html: '<p>123</p>'
    }
  }
})

v-if v-else v-else-if

只有一個(gè)會(huì)被渲染出來

v-once

只渲染一次

@click.once="show"

v-cloak 防閃爍

使用 v-cloak 防止頁(yè)面加載時(shí)出現(xiàn) vuejs 的變量名，使用方法如下：在做外層的div 里面添加v-cloak，css里面display：none

<div>
    <div v-cloak="">歡迎{{msg}}</div>
</div>

new Vue({
  el: '',
  data() {
    return {
      msg: '1111'
    }
  }
})

[v-cloak] {
  display: none;
}

v-pre

在模板中跳過vue的編譯，直接輸出原始值

如下面例子網(wǎng)網(wǎng)頁(yè)會(huì)渲染出 歡迎{{msg}}

<div>
    <div v-pre>歡迎{{msg}}</div>
</div>

new Vue({
  el: '',
  data() {
    return {
      msg: '1111'
    }
  }
})

{{}} 輸出

出來變量，也可以加方法

<li v-for="(item,index) in dateList" :class="item.isSign =='0' ? 'activeQ': ''" 
　　key="index"
>
     {{getDay(item.id)}}
</li>
getDay (day) {
    var arr = day.split('-');
    let dayN = arr[2];
    return dayN;
}

v-if v-else v-else-if

只能執(zhí)行一個(gè)

和v-for一起使用時(shí) v-for優(yōu)先級(jí)更高

二、選項(xiàng)/數(shù)據(jù)

data 相當(dāng)于react的state

methods 模板調(diào)用的函數(shù)，需寫在methods里面

props 接收父組件的數(shù)據(jù)

propsData 只存在new的示例中

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

偵聽屬性watch

響應(yīng)數(shù)據(jù)的變化，

<div id="watch-example">
  <p>{{ answer }}</p>
  <input v-model="question">
</div>

var watchVM = new Vue({
  el: '#watch-example',
  data：{
    answer: 'answer',
    question: '',
  },
  watch: {
    question: function() {
      // question發(fā)生改變執(zhí)行此函數(shù)
    }
  }
})

計(jì)算屬性computed

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello',
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

三、生命周期

beforeCreate 實(shí)例初始化之前

created 實(shí)例創(chuàng)建完成，還沒開始掛載

beforeMount 掛載之前被調(diào)用

mounted el已掛載到實(shí)例上 可調(diào)用nextTick

buforeUpdate 數(shù)據(jù)更新時(shí)調(diào)用

updated dom已更新

activated keep-alive組件激活時(shí)調(diào)用

deactivated 組件停用時(shí)調(diào)用

beforeDestroy 實(shí)例銷毀之前調(diào)用

destroyed 實(shí)例銷毀后調(diào)用

errorCaptured 子孫組件錯(cuò)誤調(diào)用

四、選項(xiàng)/組合

parent

在子組件
console.log(this.$parent)

root

console.log(this.$root) // 當(dāng)前組件樹的根vue實(shí)例

mixins

定義一部分屬性或者公共的方法，在每個(gè)組件之中使用，方法參數(shù)在各函數(shù)之間不共享，沒有任何通信

在調(diào)用自身鉤子之前調(diào)用

注：當(dāng)父組件也有相同屬性時(shí)以父組件/實(shí)例為準(zhǔn)

import minxin from 'xxxx.js'

new Vue({
  mixins: [minxin]
})

extends

與minxins類似，但優(yōu)先級(jí)次于父組件，對(duì)父組件擴(kuò)充

var CompA = { 
    updated : function(){
        console.log('我是擴(kuò)展的updated');
    },
    methods:{
         //下面這個(gè)并沒有被執(zhí)行，如果方法名一樣，只執(zhí)行構(gòu)造器里面的原生方法，混入跟擴(kuò)展類似
         add:function(){
            console.log('我是擴(kuò)展出來的方法');
            this.num++;
          }
    }
}

// 在沒有調(diào)用 `Vue.extend` 時(shí)候繼承 CompA
var CompB = {
  extends: CompA,
  ...
}

name

只有作為組件選項(xiàng)時(shí)起作用

delimiters

改變純文本插入分隔符

function

render () {
  <div>
    {()=> this.func()}
  </div>
}

vue mvvm module模型 view視圖 controller控制器 vm視圖數(shù)據(jù)之間的傳遞

    import Header from '@/components/public/header/header'
    export default {
        props: ['shopId']
        name: 'mall',
        components: {
            Header
        },
        data () {
            return {
                msg: '商城首頁(yè)'
            }
        },
        mounted(){//  數(shù)據(jù)請(qǐng)求
            this._timeOut = setInterval(() => {
                do something
            },2000)
        },
        mounted(){
            this.init();
            beforeDestroy() { // 清除計(jì)時(shí)器
                clearInterval(this._timeOut);
            }
        },
        created () {

        },
        updated() { 
             window.scroll(0, 0); 
        },
        methods: {
            init(){
                
            }
        },
　　　　　watch: {
            shopId(newValue, oldValue) {
                console.log(newValue)
                this.init();
            }
        },
        mixins: [http]
    }

<div id="app">
    <say-hello></say-hello>
    <my-name :name="username"></my-name>
</div>

<script>
    // 子組件sayHello
    Vue.component("sayHello", {
      template: "<h1>${this.$parent.username}</h1>",
      delimiters: "${}", // 改變純文本插值語(yǔ)法 ${xxx}
    })
    
    var app = new Vue({
      el: "#app",
      data: {
        username: 'xxxx',
      },
      components: {
        "myName": {
          template: `<div>
            <p>{{name}}</p>
            <P>{{this.$parent.month}}</P>
          </div>`,
          props: ["name"],
        }
      }
    }) 
    
</script>