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

September發表於2019-08-14
Vue筆記
  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 協議》，轉載必須註明作者和本文連結

日照香爐生紫煙

相關文章