Vue筆記

• v-cloak可以解決插值表達式得閃爍問題

• v-text沒有閃爍問題蕴纳，但是會覆蓋

• v-text 與 插值表達式

• v-text和 插值表達式 都會把data的值解析成 文本格式

• v-html則會解析調(diào)用值得 html 格式

  <div v-text='data'></div>
  <div v-html='data'></div>
  

• v-bind是 Vue 中提供用于綁定屬性的指令

  <input type="button" value="button" v-bind:title='txt'>
  

• 由于v-bind把后面的屬性當(dāng)作是一個變量岂座，所以可以進行變量的JS變量操作

  <input type="button" value="button" v-bind:title="txt + '123'">
  <input type="button" value="button" :title="txt + '123'"> <!-- v-on 的縮寫：:(冒號) -->
  

• v-on 是Vue中提供用于綁定事件的指令

  • 需要在 Vue 實例中新建一個 methods，是與 el 還有 data 同級的一個對象（字典）

  • 會在 methods 中定義當(dāng)前 Vue 實例中所有可用的方法魂贬；

    methods: {
        show:function(){
            alert('Hello Vue');
        }
    }
    

• v-on 的使用方法

  <input type="button" value="點擊按鈕" v-on:click='show'>
  <input type="button" value="點擊按鈕" @click='show'> <!-- v-on 的縮寫：@ -->
  

• 在實例中使用 data內(nèi)的數(shù)據(jù)初狰，需要使用 this ＋ 數(shù)據(jù)變量名

• 解決嵌套函數(shù)的 this 的指向問題

  var _this = this
  mm = function(){
      _this........
  }
  // 替換方法
  mm = () => {
      this.......
  }
  

• v-on 的事件修飾符

  • .stop 阻止冒泡----冒泡事件是由內(nèi)而外榔至，阻止的話需要在子元素阻止
  • .prevent 阻止默認事件----e.g. 阻止 a 標(biāo)簽的跳轉(zhuǎn)（默認）事件
  • .capture 添加事件偵聽器時使用事件捕獲模式----從外向里觸發(fā)事件
  • .self 只在事件在該元素本身（比如不是子元素）觸發(fā)時觸發(fā)回調(diào)

• v-model

  • v-bind 只能實現(xiàn)數(shù)據(jù)的單向綁定

  • v-model 可實現(xiàn)數(shù)據(jù)的雙向綁定

    <div id="app">
        <p>{{ msg }}</p>
        <input type="text" v-model='msg'>
    </div>
    

  • v-model 只能運用在 表單 元素中

    • input、select金赦、checkbox音瓷、textarea

• 在 Vue 中使用樣式

  • 使用 class樣式

    1. 數(shù)組
    2. 數(shù)組中使用三元表達式
    3. 數(shù)組中嵌套對象
    4. 直接使用對象

  • 使用內(nèi)聯(lián)樣式

    1. 直接在元素上通過 :style 的形式，書寫樣式對象
    2. 將樣式對象夹抗，定義到 data 中绳慎，并直接引用到 :style中
       • 在 data 上定義樣式
       • 在元素中，通過屬性綁定的形式漠烧，將樣式對象應(yīng)用到元素中
    3. 在:style中通過數(shù)組杏愤，引用多個data上的樣式對象
       • 在data上定義樣式
       • 在元素中，通過屬性綁定的形式已脓，將樣式對象應(yīng)用到元素中

• v-for

  <p v-for='word in words'>{{ word }}</p>
  <p v-for='(word, i) in words'>{{ i }} : {{ word }}</p>
  <p v-for='user in users'>{{ user.id }}---{{ user.name }}</p>
  <p v-for='(val, key, i) in user'>{{ val }}{{ key }}{{ i }}</p>
  <!--迭代數(shù)字-->
  <p v-for='count in 10'>{{ count }}</p>  <!--從1開始一直到10-->
  

2.2.0+ 的版本中珊楼，當(dāng)在組件中使用 v-for 時，key 是必須的
需要用 v-bind:key 的方式去綁定 id 值 即 key 值

• v-bind 綁定 key 值

  <p v-for='word in words' :key="word.id">{{ word }}</p>
  

• v-if與v-show

• v-if 是添加和刪除元素----較高的性能消耗

  • v-show 是設(shè)置元素的 display 的屬性是否為 none----較高的初始渲染消耗

• 如果頻繁切換元素顯示狀態(tài)度液，推薦使用v-show

  • 如果元素永遠不會被顯示出來厕宗，推薦使用v-if