碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（插值操作）
1、Mustache語法
Mustache語法 ，也就雙大括號 {{ }} ，包裹的數據是響應式的，也就是可以實時替換 ,當vue實例中對應數據改變，頁面渲染的值也會改變，它的作用範圍是在內容中，不是在標籤上，替換成的是vue實例對象中data屬性對應的數據對象中的相應的屬性值
Mustache語法支持：
----普通值替換
----簡單的表達式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
</head>
<body>
<div id="app">
<!-- ■【Mustache語法，也就雙大括號，包裹的數據數據是響應式的，也就是可以實時替換 ,它的作用範圍是在內容中，不是在標籤上】-->
<!-- mustache語法中普通值替換-->
<h2>{{message}}</h2>
<h2>{{message}} , 世界</h2>
<!-- mustache語法中，不僅僅可以直接寫變量，也可以寫簡單的表達式-->
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + "," + lastName}}</h2>
<h2>{{firstName}}{{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀",
firstName: "籃球",
lastName: "雞你太美",
counter: 100,
}
});
</script>
</body>
</html>
效果
2、v-once
v-once 會讓標籤裏的內容只加載一次，如代碼中的例子只在第一次加載該message的值，後續vue實例對象中message屬性值的改變不會刷新標籤裏的內容,意思是標籤中的message的值不會隨着js中vue實例對象data中message屬性值的變化而變化，也就是說，加了v-once的標籤只在第一次加載對應的數據值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
</head>
<body>
<div id="app">
<!-- ■v-once會讓標籤只在第一次加載該message的值，後續message改變不會隨着數據改變進行實時響應式改變,意思是message的值不會隨着vue實例對象data中message屬性值的變化而變化-->
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀"
}
});
</script>
</body>
</html>
效果
3、v-html
利用 v-html 標籤屬性，可以清晰的告訴vue標籤的內容替換成html式的標籤，並能夠被解析識別後渲染出效果，意思是加了v-html的標籤會把標籤裏的內容替換成能夠被識別的對應的html式的標籤，而不是普通文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
</head>
<body>
<div id="app">
<!-- 只是簡單的替換成文本值，並不會去識別到該標籤-->
<h2>{{url}}</h2>
<!-- ■利用v-html標籤屬性，可以清晰的告訴vue這裏標籤裏的內容替換成html式的標籤，並能夠被解析識別後渲染出效果-->
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
url: "<a href='http://www.baidu.com'>百度一下</a>"
}
});
</script>
</body>
</html>
效果
4、v-text
v-text 標籤屬性，會把標籤裏的內容替換成vue實例對象data屬性中對應的屬性值(名字相同的值)，比如下面代碼中的v-text標籤屬性會獲得message的值，並把標籤裏的內容替換成message的值，v-text會覆蓋原本存在標籤中的內容，v-text不夠靈活，一般不使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
</head>
<body>
<div id="app">
<!-- ■v-text標籤屬性會獲得message的值，並把標籤裏的內容替換成message的值,並且會覆蓋標籤裏的內容，v-text不夠靈活，一般不使用-->
<h2 v-text="message">世界</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀"
}
});
</script>
</body>
</html>
效果
5、v-pre
v-pre 標籤屬性會將原封不動顯示標籤裏的內容，也就是並不會去解析它，標籤裏怎麼寫的就怎麼顯示，就是把標籤裏的文本內容視作普通文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
</head>
<body>
<div id="app">
<!-- ■v-pre標籤屬性會將原封不動顯示標籤裏的內容，也就是並不會去解析它，標籤裏怎麼寫的就怎麼顯示，就是把標籤裏的文本內容視作普通文本-->
<h2 v-pre>{{message}},世界</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀"
}
});
</script>
</body>
</html>
效果
6、v-cloak
v-cloak 標籤的作用就是在程序執行過程中，執行到這裏的時候，不會去顯示標籤裏的內容，因爲在css已經指定了v-cloak標籤屬性所在的標籤下的內容不顯示，也就是display: none,表示不進行顯示，這麼做的好處是什麼呢，因爲程序是至上而下的執行，剛開始的時候，html標籤裏的內容最開始會按照傳統html的方式進行顯示，之後在到達js時,新建了vue對象，纔對之前的內容進行一個解析，也就是替換之前已經顯示的內容，說明這裏顯示了兩次，這個v-cloak標籤屬性的作用就是在第一次不去顯示，當vue開始真正開始解析時，就會去掉所有的v-cloak這個標籤屬性，之前針對這個標籤的css就不起作用了,然後顯示解析後的內容，也就不會顯示兩次，因爲顯示兩次之間時間比較快，所以我們可能沒感覺，但是這就是它的顯示過程，很明顯這種不符合要求，要是計算機或者什麼情況導致瀏覽器刷新變慢，你就會看到這種前後閃爍替換的刷新效果，影響體驗。
總結一句話：v-cloak標籤屬性會在vue實例解析替換標籤內容之前不渲染顯示標籤裏的內容，當vue實例解析的時候會移除v-cloak標籤渲染顯示標籤裏的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值操作</title>
<style>
/*隱藏*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--
■v-cloak標籤的作用就是在程序執行過程中，執行到這裏的時候，會不去顯示標籤裏的內容，因爲上面css已經指定了v-cloak標籤屬性所在的標籤下的內容不顯示，也就是
display: none,表示不進行顯示，這麼做的好處是什麼呢，因爲程序是至上而下的執行，剛開始的時候，html標籤裏的內容最開始會按照傳統html的方式進行顯示，之後在
到達js時,新建了vue對象，纔對之前的表親內容進行一個解析，也就是替換之前已經顯示的內容，說明這裏顯示了兩次，這個v-cloak標籤屬性的作用就是在第一次不去顯示，當
vue開始真正開始解析時，就會去掉所有的v-cloak這個標籤屬性，之前針對這個標籤的css就不起作用了,然後顯示解析後的內容，也就不會顯示兩次，因爲顯示兩次之間時間比較快，
所以我們可能沒感覺，但是這就是它的顯示過程，很明顯這種不符合要求，要是計算機或者什麼情況導致瀏覽器刷新變慢，你就會看到這種前後閃爍替換的刷新效果，影響體驗
-->
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好呀"
}
});
</script>
</body>
</html>