目錄
Vue是一種漸進式JS框架，對於熟悉HTML，CSS，JS知識的學生很容易上手，並且它可以在一個庫和一個完整框架之間自如伸縮。
Vue的使用步驟：
1）提供標籤用於填充數據
2）引入vue.js庫文件
3）使用Vue語法做功能
4）將Vue提供的數據填充到標籤裏面
<body>
<div id="app" v-cloak>
<!-- {{}}插值表達式，作用就是將數據填充到標籤中。 -->
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg1"></div>
<div>
<div v-text="num">num</div>
<button @click="num++">點擊1</button>
<button @click="handle">點擊2</button>
<button @click="handle($event)">點擊3</button>
</div>
</div>
<!-- //引入VUE文件 -->
<script type="text/javascript" src="./JS/vue.js"></script>
<script text="text/javascript">
var vm = new Vue({
el: "#app", //數據要填衝的位置（此處用ID進行標記）
//data用於提供數據
data: {
msg: "Hello Vue",
msg1: "<h1>Hello</h1>",
num: 0,
},
methods: {
handle: function (event) {
//此處的this代表的是vm;
console.log(event.target.innerHTML);
this.num++;
},
},
});
</script>
</body>
Vue.js的模本語法
1.插值表達式
1）最常見最基本的形式是使用{{……}}的文本插值
<div id="app">
<div>{{ message }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>Hello vue</h1>'
}
})
</script>
2)、v-text
v-text指令填充純文本，他會替代顯示對應的數據對象上的值，當綁定的數據對象的值發生變化的時候，插值處的內容也會隨之更新。
注：此處爲單向綁定，數據對象的值改變，插值會發生變化，但是當差值發生變化不會影響數據對象的值。其中：v-text可以簡寫爲{{}},並且支持邏輯運算。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
注：vue中有個指令叫做 v-once 可以通過v-once與v-text結合，實現僅執行一次性的插值
<span v-once>這個將不會隨msg屬性的改變而改變: {{ msg }}</span>
3)、v-html
v-html用於輸出html，它與v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
<div id="app">
<p v-html="html"></p>
</div>
var app = new Vue({
el : '#app',
data : {
html: "<b style='color:red'>v-html</b>"
}
})
4)、v-model
v-model通常用於表單組件的綁定，例如input，select等。它與v-text的區別在於它實現的表單組件的雙向綁定，如果用於表單控件以外標籤是沒有用的。
<div id="app">
<input v-model="message " />
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
2.事件綁定
1、監聽事件
可以使用v-on來進行DOM事件的監聽，並在觸發時運行一些JS代碼。
2、事件處理方法
對於邏輯比較複雜的事件，直接在JS代碼中邪v-on不太可行，因此v-on還可接收一個需要調用的方法名稱。
<div id="app">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<script type='text/javascript'>
var vm= new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法裏指向當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
<script>
注：v-on:click的另一種寫法就是@click
1）如果事件直接綁定函數名稱，那麼默認會傳遞事件對象作爲事件函數的第一個參數
2）如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，並且事件對象的名稱必須是“$event”
<body>
<div id="app" v-cloak>
<div>
<button @click="handle('123',$event)">點擊3</button>
</div>
</div>
<!-- //引入VUE文件 -->
<script type="text/javascript" src="./JS/vue.js"></script>
<script text="text/javascript">
var vm = new Vue({
el: "#app", //數據要填衝的位置（此處用ID進行標記）
//data用於提供數據
data: {
},
methods: {
handle: function (message, event) {
//此處的this代表的是vm;
console.log(event.target.innerHTML);
alert(message);
},
},
});
</script>
</body>
3、事件修飾符
1）.stop:阻止單擊事件繼續傳播（阻止冒泡，）
語法：
//阻止鏈接的跳轉
<a v-on:click.stop="doThis"></a>
2）.prevent:阻止默認事件發生
語法：
<!-- 提交事件不再重載頁面，submit提交控件-->
<form v-on:submit.prevent="onSubmit"></form>
3).capture:捕獲冒泡，即有冒泡發生時，有該修飾符的dom元素會先執行，如果有多個，從外到內依次執行，然後再按自 然順序執行觸發的事件。
語法：
//如果沒有使用.capture, 點擊按鈕的時候, 就會先觸發函數2, 然後觸發函數1,
//添加了.capture, 點擊按鈕的時候, 就只會先觸發函數1, 然後觸發函數2
<div @click.capture='函數1' style='width:200px;height:200px;background:#000'>
<input type='button' value='按鈕' @click='函數2'>
</div>
4).self:只有點擊自身時纔會觸發事件
語法：
//如果沒有使用.self, 點擊按鈕的時候, 就會先觸發函數2, 然後觸發函數1,
// 添加了.self, 點擊按鈕的時候, 就只會先觸發函數2,只有點擊div盒子本身,纔會觸發函數1
<div @click.self='函數1' style='width:200px;height:200px;background:#000'>
<input type='button' value='按鈕' @click='函數2'>
</div>
注意：使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
5).once:事件觸發一次
語法：
<a href='https://www.baidu.com' @click.prevent.once='函數'></a>
4.按鍵修飾符
1). .enter：enter鍵
2).tab：tab鍵
3).delete：刪除（退格）鍵
4).esc:ESC鍵
5).space:空格鍵
6).up:上鍵
7).down:下
8).left:左
9).right:右
如下：enter和delete的實例，當按下delete鍵是，會清空用戶名，當按下enter鍵是會進行提交操作。當然了，如果想執行其他的操作，只需要將enter和delete後面的方法名換掉，方法內容更換即可。
<body>
<div id="app">
<form action="">
用戶名：<input
type="text"
v-on:keyup.delete="handle"
v-model="uname"
/><br />
密碼：<input
type="text"
v-on:keyup.enter="handleSubmit"
v-model="pwd"
/><br />
<input type="button" v-on:click="handleSubmit" value="提交" />
</form>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
/*
事件綁定：按鍵修飾符
*/
var vm = new Vue({
el: "#app",
data: {
uname: "",
pwd: "",
},
methods: {
handleSubmit: function () {
console.log(this.uname, this.pwd);
},
handle: function () {
this.uname = "";
},
},
});
</script>
</body>
3.屬性綁定
屬性綁定樣式的語法：
//v-bind指令用法
<a v-bind:href='url'>跳轉</a>
//縮寫語法
<a :href='url'>跳轉</a>
4、分支循環結構
1)分支結構：
v-if
v-else
v-else-if
v-show
根據學生的程序判斷學生登記的判斷實例：
<body>
<form action="">
<input type="text" v-model="score" />
<button @click="show">顯示</button>
</form>
<div id="app">
<div v-if="score>=90">優秀</div>
<div v-else-if="score<90&&score>=80">良好</div>
<div v-else-if="score<80&&score>60">一般</div>
<div v-else>比較差</div>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
score: 80,
},
methods: {
show: function () {
this.score = score;
},
},
});
</script>
</body>
2)循環結構
v-for遍歷數組
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for="item in list">{{item}}</li>
<li v-for="fruit in fruits">
{{fruit.id+'-----'+fruit.cname+'------'+fruit.ename}}
</li>
<li v-if="id==1" v-for="{id,cname,ename} in fruits">
{{id+'-----'+cname+'------'+ename}}
</li>
</ul>
</div>
<script type="text/javascript" src="./JS/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
list: ["apple", "banana", "orange"],
fruits: [
{ id: 1, cname: "蘋果", ename: "apple" },
{ id: 2, cname: "蘋果", ename: "apple" },
{ id: 3, cname: "蘋果", ename: "apple" },
],
},
});
</script>
</body>
顯示結果：