vue 基礎入門筆記 01:Vue 基本程式碼、插值表示式、v-on、v-bind

September發表於2019-08-14
  1. Vue和MVVM 區別
  2. Vue基本程式碼
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    <div id="app">
            <p>{{msg}}</p>
    </div>
    <script>
        var vm =  new Vue({
            el :'#app',
            data:{
                msg :'hello wold'
            }
        })
    </script>
    </body>
    </html>
  3. 插值表示式

    • v-cloak 解決插值表示式閃爍問題
    • v-text 沒有插值閃爍問題 會覆蓋元素內原有的內容 插值表示式只會替代自己的佔位符
    • v-html 重新解析html到該元素
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
      </head>
      <style>
          [v-cloak]{
              display: none;
          }
      </style>
      <body>
          <!-- v-cloak   解決插值閃爍問題 -->
          <div v-cloak id="app">
              {{msg}}
              <!-- v-text 覆蓋原元素的內容 解決閃爍問題 -->
              <div v-text="text">原有text</div>
              <!-- 解析html -->
              <div v-html="html">原有text</div>
          </div>
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
          <script>
              let vm  = new Vue({
                  el:'#app',
                  data:{
                      msg:'hello',
                      text:'新的text',
                      html:'<h1>hello</h1>'
                  }
              })
          </script>
      </body>
      </html>
    • v-bind 用於繫結屬性的指令 縮寫 可以寫合法的js表示式
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      </head>
      <body>
          <div id="app">
              <!-- v-bind  用於繫結屬性的指令 -->
              <input type="button" :value="msg">
              <!-- 縮寫 -->
              <input type="button" v-bind:value="msg">
              <!-- 可以寫合法的js表示式 -->
              <input type="button" :value="msg+'測試'">
          </div>
          <script>
              let vm = new Vue({
                  el:'#app',
                  data:{
                      msg:"自定義按鈕"
                  }
              })
          </script>
      </body>
      </html>       
    • v-on 事件繫結指令 縮寫 @

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      </head>
      <body>
          <div id="app">
              <input type="button"    v-on:click='show' value="按鈕">
          </div>
          <script>
              let vm = new Vue({
                  el:'#app',
                  data:{
                      msg:"自定義按鈕"
                  },
      
                  methods:{
                      show:function(){
                          alert('abc')
                      }
                  },
              })
          </script>
      </body>
      </html>
    • 跑馬燈小案例
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      </head>
      <body>
          <div id="app">
              <button type="button" @click="run" value="run">run</button>
              <button type="button" @click="stop" value="stop">stop</button>
              <h1>{{msg}}</h1>
          </div>
          <script>
              let vm = new Vue({
                  el:'#app',
                  data:{
                      msg:'動起來1,2,3,4,5,6',
                      timer:null
                  },
                  methods: {
                      run:function(){
                          if(this.timer!=null)
                          return false
                          let that = this
                          that.timer =  setInterval(function(){
                              let start = that.msg.substring(0,1)
                          let end = that.msg.substring(1)
                          that.msg = end+start
                          },400)
                      },
                      stop:function(){
                          clearInterval(this.timer)
                          this.timer = null
                      }
                  },
              })
          </script>
      </body>
      </html>
本作品採用《CC 協議》,轉載必須註明作者和本文連結

日照香爐生紫煙

相關文章