v-model

雙向綁定有巧，監(jiān)聽(tīng)用戶的輸入事件癣蟋，更新數(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)聽(tīng)回車事件

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è)常量露该，沒(méi)有任何動(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ì)被渲染出來(lái)

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

在模板中跳過(guò)vue的編譯坝撑，直接輸出原始值

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

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

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

{{}} 輸出

出來(lái)變量静秆，也可以加方法

<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;
}

計(jì)算屬性computed

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

v-if v-else v-else-if

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

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

偵聽(tīng)屬性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ù)
    }
  }
})

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]
    }