---

前言

模板的理解: 動態的html頁面，包含了一些JS語法程式碼，大括號表示式，指令(以v-開頭的自定義標籤屬性)
學習了強制資料繫結和繫結事件監聽，

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、強制資料繫結

強制資料繫結：
功能: 指定變化的屬性值
完整寫法 :
v-bind:xxx=‘yyy’ //yyy會作為表示式解析執行
簡潔寫法:
:xxx=‘yyy’
程式碼如下（示例）：

//
<div id="abox">
    <img :src="imgurl"><br><!--強制繫結-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#abox',
        data:{
            imgurl: 'http://www.gulixueyuan.com/files/course/2019/10-21/090122218720208704.jpg'
        }
    })
</script>

程式碼執行出來是一張圖片，這張圖片為上面imgurl連結的圖片

二、繫結事件監聽

繫結事件監聽
功能: 繫結指定事件名的回撥函式
完整寫法:
v-on:click=‘xxx’
簡潔寫法:
@click=‘xxx’
程式碼如下（示例）：

// 
<div id="abox">
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>
    <button v-on:click="test">test1</button><br><!--繫結事件監聽-->
    <button @click="test2(msg)">test2</button><!--繫結事件監聽-->

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#abox',
        data:{
            msg:'I Love You',
        },
        methods:{
            test(){
                alert('hahhah')
            },
            test2(content){
                alert(content)
            }
        }
    })
</script>

上述還涉及雙大括號表示式
語法: {{exp}} 或 {{{exp}}}
功能: 向頁面輸出資料
可以呼叫物件的方法
.toUpperCase()是講字母（不管大小寫）都轉化為大寫字母

總結

1. 模板的理解:
動態的html頁面
包含了一些JS語法程式碼
大括號表示式
指令(以v-開頭的自定義標籤屬性)
2. 雙大括號表示式
語法: {{exp}} 或 {{{exp}}}
功能: 向頁面輸出資料
可以呼叫物件的方法
3. 指令一: 強制資料繫結
功能: 指定變化的屬性值
完整寫法:
v-bind:xxx=‘yyy’ //yyy會作為表示式解析執行
簡潔寫法:
:xxx=‘yyy’
4. 指令二: 繫結事件監聽
功能: 繫結指定事件名的回撥函式
完整寫法:
v-on:click=‘xxx’
簡潔寫法:
@click=‘xxx’