Vue的學習之路二:指令學習

<body>
    <div id="app">
      <!-- 使用 v-cloak 能夠解決,插值表達式閃爍的問題 -->
      <p v-cloak>++++++++++++++++{{msg}}-------------------------</p>
      <h4 v-text="msg">==========================</h4>
      <!-- 默認 v-text 是沒有閃爍問題的 -->
      <!-- v-text會覆蓋元素中原本的內容,但是插值表達式只會替換自己的佔位符,不會把整個元素的內容清空 -->
      <div>{{msg2}}</div>
      <div v-text="msg2"></div>
      <div v-html="msg2"></div>

      <!-- v-bind:是 Vue中,提供的用於綁定屬性的指令 -->
      <input type="button" value="按鈕" v-bind:title="mytitle + '123'" />
      <!-- 注意:v-bind: 指令可以被簡寫爲 :要綁定的屬性 -->
      <!-- v-bind中,可以寫合法的JS表達式  -->
      <!-- Vue中提供了v-on: 事件綁定機制 -->
      <!-- <input type="button" value="按鈕" :title="mytitle + '123'" v-on:clock="alert("Hello")"/> -->

      <input
        type="button"
        value="按鈕"
        :title="mytitle + '123'"
        v-on:click="show"
      />
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '歡迎學習Vue',
          msg2: '<h1>我是一個大大的H1</h1>',
          mytitle: '這是一個自己定義的title',
        },
        methods: {
          // 這個 methods屬性中定義了當前Vue實例所有可用的方法
          show: function () {
            alert('Hello')
          },
        },
      })
    </script>
  </body>

主要學習 v-cloakv-textv-htmlv-bindv-on和插值表達式

  1. v-cloak:解決插值表達式的閃爍問題
  2. v-text:會覆蓋元素中原本的內容,默認 v-text 是沒有閃爍問題的
  3. v-html:將佔位內容渲染成html文本,會覆蓋元素中原本的內容
  4. v-bind:Vue提供的屬性綁定機制 縮寫是 :
  5. v-on:Vue提供的事件綁定機制 縮寫是 @
  6. v-text和插值表達式的區別:v-text 是沒有閃爍問題的,會覆蓋元素中原本的內容
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章