Vue 基礎
指令：
插值表達式：
語法：{{要插入的值}}，此時相當於佔位符，到時候{{關鍵字}}會被替換成
Model中的數據
bug點：
當網速較慢時，Vue初始化未完成時，插值表達式不能被解析，會直接顯示
出來，加載完畢之後又會被替換成真實結果，造成閃爍（Vue的加載代碼寫在
HTML元素之後時會出現該bug）
1.v-cloak指令：
語法：把它當作HTML元素的一個屬性使用
示例：
{{msg1}}
特點：
當Vue加載完畢後，v-cloak屬性會自動消失
使用：
添加如下CSS樣式：讓所有帶v-cloak屬性的元素隱藏，Vue加載完成後顯示
實現，解決插值表達式閃爍的問題
[v-cloak]{
display: none;
}
2.v-text：
語法：
作用：和插值表達式一樣，用於給HTML元素添加文本
區別：
1.v-text不會存在閃爍問題
2.v-text會將Model中的數據完全替換到HTML元素中（覆蓋）
3.插值表達式只會將Model中的數據替換到插值表達式中（佔位符內容的替換）
相同點：
1.插值表達式和v-text都可以給HTML元素顯示文本
2.插值表達式和v-text都不會解析要添加文本中的HTML標籤（原樣顯示）
3.v-html：
和v-text的唯一區別：給HTML添加內容時會解析內容中的HTML
代碼測試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基礎表達式</title>
</head>
<body>
<h1>v-cloak、v-text、v-html指令以及插值表達式的學習</h1>
<div id="aaa">
<p v-cloak>{{msg1}}</p>
<p>{{msg1}}</p>
<p v-text="msg1"></p>
<p v-text="msg2"></p>
<p>{{msg2}}</p>
<p v-html="msg2"></p>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#aaa",
data:{
msg1:"hello",
msg2:"<p style='color:red'>我是一個p標籤</p>"
}
})
</script>
</body>
</html>
運行結果：
4. v-bind：
語法：在HTML元素的屬性目前加上綁定標識，此時HTML的該屬性的值就會根據屬性值的名字從Model中獲取數據
示例：
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超強”
}
});
注意：
1.【v-bind:】用於綁定HTML元素屬性的值
2.【v-bind:】可以簡寫爲:
3.Vue框架會把使用了v-bind:標識的HTML的屬性的值當作一個Javascript表達式來使用
只要表達式合法，就能執行（當然，數據必須時字面量或來自於Model中）
如：
:value=“msg+‘你好’”
:value=“msg+name”
5. v-on：
語法：在HTML的事件屬性（不帶on）前加上綁定標識，此時HTML觸發此事件時，會執行事件中綁定的代碼
示例：
點擊下顯示你好
<button @click=“sayHello(name)”>點擊下顯示你好
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超強”
},
methods:{
sayHello:function (name) {
alert(“你好！”+name);
}
}
});
注意：
1.常見的web網頁的事件都支持綁定
2.事件名字不帶on
3.事件觸發的方法必須在methods中定義
4.v-on標識的屬性會被Vue解析爲特定JavaScript，只要內容符合JavaScript規範
都能正確執行（比如傳入參數）
4.【v-on:】等價於【@】
代碼測試：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind，v-on指令的學習</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<h1> </h1>
<div id="app">
<h2><label>用戶名：<input type="text" name="username" v-bind:value="msg" /></label></h2><br>
<h2> 用戶名： <input type="text" name="aa0" :value="msg+name" ></h2><br>
<button v-on:click=" sayHello(name)"> 點擊顯示你好</button><br>
<button @click="sayHello(name)"> 點我</button><br>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"吾名",
name:"超強"
},
methods:{
sayHello:function (name) {
alert("你好！"+name);
}
}
});
</script>
</body>
</html>
運行結果：
接下來我們做一個小練習
用Vue做一個跑馬燈效果
直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑馬燈</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<button @click="light()">開始</button>
<button @click="stop()">停止</button>
<h3 v-html="info" style="color: aqua" ></h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
info:" 嘿，姑娘，我想我是真的想你了，你是否也會想起我。",
lightIntervalID:null
},
methods: {
light() {
if (this.lightIntervalID !== null) {
return;
}
var _this = this;
this.lightIntervalID = setInterval(function () {
_this.info = _this.info.substring(1).concat(_this.info.charAt(0));
}, 200
)},
stop() {
clearInterval(this.lightIntervalID);
this.lightIntervalID = null;
}}
});
</script>
</body>
</html>
來看下運行效果：（這裏只展示靜態效果）
