一、回顧
在vue的Hello World程序的學習中，頁面獲取值的表達式爲“{{}}”， 但這個插值表達式會存在一定的問題，當我們網速很慢的情況下，頁面會優先渲染"{{ 數據所對應的key }}"，怎麼看到這個效果呢，F12打開谷歌瀏覽器的開發者工具，按照下圖把網絡設置爲3G
然後把如下代碼放入到html文件中，在瀏覽器打開
<body>
<div id="app-1">{{ msg }}</div>
<script src="../js/vue2.6.10.js"></script>
<script>
//創建vue實例
var vm1 = new Vue({
el:"#app-1",
data:{
msg: "Hello Vue!"
}
});
</script>
</body>
這樣就可以看到，當頁面在加載的時候，先渲染的是{{msg}}，一直等到頁面數據加載完畢，頁面上纔會把msg替換爲對應的data數據，我們設想一下，假如我們自己作爲用戶，看到這樣的情況，是不是會吐槽這網站怎麼這麼垃圾！
二、Vue基本指令學習
1、v-cloak指令可以解決上述問題，代碼如下：
<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>Vue基本指令</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<p v-cloak>{{ msg }}</p>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈"
}
})
</script>
</body>
</html>
2、v-text指令也可以用來渲染數據，同樣也可以解決回顧中的問題
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<p v-cloak>{{ msg }}</p>
<!-- 使用v-text指令渲染數據 -->
<span v-text="msg"></span>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈"
}
})
</script>
</body>
還有一種情況，如下
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<!-- 插值表達式會把數據渲染在標籤內容的中間，相當於佔位符的性質 -->
<p v-cloak>aaaaaa{{ msg }}aaaaa</p>
<!-- v-text會覆蓋標籤中的數據 -->
<!-- 使用v-text指令渲染數據 -->
<span v-text="msg">aaaaaaa</span>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈"
}
})
</script>
</body>
3、v-html指令可以用於渲染文本，html代碼（插值表達式和v-text會將html代碼作爲普通文本渲染）
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<!-- 插值表達式會把數據渲染在標籤內容的中間，相當於佔位符的性質 -->
<p v-cloak>aaaaaa{{ msg }}aaaaa</p>
<!-- v-text會覆蓋標籤中的數據 -->
<!-- 使用v-text指令渲染數據 -->
<span v-text="msg">aaaaaaa</span>
<br>
<!-- v-html渲染代碼 -->
<span v-html="htmlData"></span>
<br>
<!-- v-html渲染普通文本，同樣也會覆蓋標籤中的內容 -->
<span v-html="msg"></span>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈",
htmlData:"<h3>我是html代碼！</h3>"
}
})
</script>
</body>
4、v-bind指令，可以把標籤中的屬性與vue實例屬性進行綁定，並且與vue屬性綁定後，其值可以是一個合法的JS表達式
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<!-- 插值表達式會把數據渲染在標籤內容的中間，相當於佔位符的性質 -->
<p v-cloak>aaaaaa{{ msg }}aaaaa</p>
<!-- v-text會覆蓋標籤中的數據 -->
<!-- 使用v-text指令渲染數據 -->
<span v-text="msg">aaaaaaa</span>
<br>
<!-- v-html渲染代碼 -->
<span v-html="htmlData"></span>
<br>
<!-- v-html渲染普通文本，同樣也會覆蓋標籤中的內容 -->
<span v-html="msg">啊啊啊</span>
<br>
<!-- v--bind將alt屬性與vue實例屬性進行綁定 -->
<img src="" v-bind:alt="imageName" />
<br>
<!-- v--bind將alt與vue屬性綁定後，其值可以是一個合法的JS表達式 -->
<img src="" v-bind:alt="imageName + '拼接字符串'" />
<br>
<!-- v--bind簡寫,只需要在想要綁定的屬性前加一個冒號 -->
<img src="" :alt="imageName + '簡寫方式綁定'" />
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈",
htmlData:"<h3>我是html代碼！</h3>",
imageName:"我是圖片"
}
})
</script>
</body>
5、v-on指令，綁定事件
<body>
<div id = "app">
<!-- 給p標籤添加v-cloak並且添加css樣式 -->
<!-- 插值表達式會把數據渲染在標籤內容的中間，相當於佔位符的性質 -->
<p v-cloak>aaaaaa{{ msg }}aaaaa</p>
<!-- v-text會覆蓋標籤中的數據 -->
<!-- 使用v-text指令渲染數據 -->
<span v-text="msg">aaaaaaa</span>
<br>
<!-- v-html渲染代碼 -->
<span v-html="htmlData"></span>
<br>
<!-- v-html渲染普通文本，同樣也會覆蓋標籤中的內容 -->
<span v-html="msg">啊啊啊</span>
<br>
<!-- v--bind將alt屬性與vue實例屬性進行綁定 -->
<img src="" v-bind:alt="imageName" />
<br>
<!-- v--bind將alt與vue屬性綁定後，其值可以是一個合法的JS表達式 -->
<img src="" v-bind:alt="imageName + '拼接字符串'" />
<br>
<!-- v--bind簡寫,只需要在想要綁定的屬性前加一個冒號 -->
<img src="" :alt="imageName + '簡寫方式綁定'" />
<br>
<!-- 使用v-on綁定點擊事件 -->
<!-- alert爲vue實例中方法的名稱 -->
<input type="button" value="點我彈框" v-on:click="alert"/>
<br>
<!-- v-on簡寫方式,在事件名稱前加“@” 符號 -->
<input type="button" value="點我彈框" @click="alert"/>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "哈哈哈",
htmlData:"<h3>我是html代碼！</h3>",
imageName:"我是圖片"
},
methods: { //定義vue實例中的方法
// alert: function(){
// alert("哈哈哈");
// },
alert(){
alert("哈哈哈");
}
},
})
</script>
</body>