vue中的插值表達式和指令

官網上對於vue的描述是一套用於構建用戶界面的漸進式框架，wo的理解就是vue不會強制要求項目中完全都由vue來實現

// 引入了vue.js文件，vue.js文件會暴漏一個全局的Vue構造函數
// 初始化一個vue實例， 需要指定 視圖  數據
const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      }
    })
// el不能指定為body或者html, 應該是一個div
// 如果想要修改頁面中的內容，data中所有的數據都添加給了vm對象,可以通過vm.xxx 進行修改

1.vue中的插值表達式

{{}}在vue中就叫插值表達式，可以在視圖中顯示data中的數據

注意：

{{}}中使用的數據必須在data中存在;

{{}} 雖然能夠使用表達式， 不能出現js的語句，不能在{{}}中寫if for;

{{}} 不能在屬性中使用

 

2.修飾符由事件修飾符和鍵盤修飾符

.prevent 阻止瀏覽器默認行為

.stop 阻止冒泡

.capture 捕獲階段執行

.self 只有點擊自己執行，點擊子元素不執行

.once 只執行一次

.enter

.esc

.tab

 

3.指令

vue總共提供了14個指令 自定義指令，vue提供了每一個指令都有特殊的作用，具體作用

vue指令實質上就是html標簽特殊的屬性，vue給html標簽增加了一些自定義的屬性， 這些屬性都是以 v-開頭 都叫vue的指令

 

3.1v-bind指令

  <!-- 
      v-bind用於訪問data中的數據，在標簽的屬性中使用
      v-bind:屬性名="屬性的值"

      v-bind使用的場景非常非常多。v-bind能夠簡寫
      v-bind:title 簡寫為  :title
      v-bind:src 簡寫  :src
      注意: v-bind訪問的值必須在data中存在的
   -->
   <div id="app">
     <img v-bind:src="imgUrl" v-bind:title="msg" alt="alt">
     <img :src="imgUrl" :title="msg" alt="">
   </div>