Vue
一砰盐、認(rèn)識(shí)Vue
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是坑律，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用岩梳。Vue 的核心庫只關(guān)注視圖層，不僅易于上手脾歇，還便于與第三方庫或既有項(xiàng)目整合蒋腮。另一方面淘捡，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)藕各，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
創(chuàng)建一個(gè) .html 文件焦除，然后通過如下方式引入 Vue：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：
HTML
<div id="app">
{{ message }}
</div>
JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
二激况、修飾符
1、事件修飾符
<body>
<div id = 'app'>
<button v-on:click = "showsome(21, $event)">click me!!!</button>
</div>
<script>
new Vue({
el : '#app',
methods : {
showsome : function(msg, event){
alert('show somthing!')
console.log(msg)
}
}
})
</script>
</body>
說明：showsome(21, $event) 中21是函數(shù)傳遞的數(shù)字變量，$event是Vue提供的當(dāng)前事件的事件對象乌逐。
兩個(gè)標(biāo)簽都有相同的函數(shù)竭讳，則會(huì)有事件冒泡。
<div id = 'app'>
<div v-on:click = 'showsome("div中的click", $event)'>
<button v-on:click = "showsome('button中的click', $event)">click me!!!</button>
</div>
</div>
<!-- 打印順序： button中的click浙踢，div中的click -->
阻止事件冒泡绢慢，使用事件修飾符。
<!-- 使用stop 阻止默認(rèn)事件 -->
<button v-on:click.stop = "showsome('button中的click', $event)">click me!!!</button>
<!-- 使用prevent 阻止默認(rèn)事件 -->
<a v-on:click.prevent = 'showsome'>link me</a>
2.按鍵修飾符
下面例子洛波，用事件的event去判斷是否按的是enter（對應(yīng)which編碼是13）鍵豌研。
<body>
<div id = 'app'>
<input type="text" v-on:keyup = 'keyup'>
</div>
<script>
new Vue({
el : '#app',
methods :{
keyup : function(event){
if(event.which == 13){
alert('you press enter!')
}
}
}
})
</script>
</body>
可以使用按鍵修飾符回怜，按enter鍵才響應(yīng)函數(shù)。
<body>
<div id = 'app'>
<input type="text" v-on:keyup.enter = 'keyup'>
</div>
<script>
new Vue({
el : '#app',
methods :{
keyup : function(event){
alert('you press enter!')
}
}
})
</script>
</body>
按鍵修飾符有：enter,space,esc, 也可以寫按鍵which對應(yīng)的數(shù)字
<input type="text" v-on:keyup.enter = 'keyup'>
等同于<input type="text" v-on:keyup.13= 'keyup'>
事件修飾符可以鏈?zhǔn)秸{(diào)用<input type="text" v-on:keyup.enter.enter.esc= 'keyup'>意思是按下enter鍵或者space鍵或者esc鍵都可以響應(yīng)函數(shù)。
全部的按鍵別名：
.enter.tab-
.delete(捕獲 "刪除" 和 "退格" 鍵) .esc.space.up.down.left.right.ctrl.alt.shift.meta
3晌纫、系統(tǒng)修飾鍵
可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl.alt.shift.meta
注意：在 Mac 系統(tǒng)鍵盤上禽捆，meta 對應(yīng) command 鍵 (?)藐石。在 Windows 系統(tǒng)鍵盤 meta 對應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上吨悍，meta 對應(yīng)實(shí)心寶石鍵 (◆)扫茅。在其他特定鍵盤上诞帐，尤其在 MIT 和 Lisp 機(jī)器的鍵盤爆雹、以及其后繼產(chǎn)品停蕉，比如 Knight 鍵盤钙态、space-cadet 鍵盤，meta 被標(biāo)記為“META”册倒。在 Symbolics 鍵盤上蚓挤，meta 被標(biāo)記為“META”或者“Meta”驻子。
注意：系統(tǒng)修飾鍵與常規(guī)按鍵不同，單獨(dú)按沒有效果需組合按鍵缤剧。
三域慷、練習(xí)
1、一個(gè)輸入框抵窒，輸入什么就實(shí)時(shí)輸出什么李皇；
2掉房、一個(gè)輸入框，輸入內(nèi)容按下回車或者空格才輸出輸入框中的內(nèi)容厌衔；
3富寿、一個(gè)表單的submit按鍵不跳轉(zhuǎn)锣夹。
<body>
<div id = 'app'>
<!-- 一個(gè)輸入框银萍，輸入什么就實(shí)時(shí)輸出什么 -->
<input type="text" v-on:keyup = "changeName">
output: {{ name }}
<!-- 一個(gè)輸入框贴唇，輸入內(nèi)容按下回車或者空格才輸出輸入框中的內(nèi)容 -->
<input type="text" v-on:keyup.enter.space = 'name = $event.target.value'>
output: {{ name }}
<!-- 一個(gè)表單的submit按鍵不跳轉(zhuǎn) -->
<form action="" v-on:click.prevent>
<input type="submit">
</form>
</div>
<script>
new Vue({
el : '#app',
data : {
name : 'hello'
},
methods :{
changeName : function(event){
this.name = event.target.value;
}
}
})
</script>
</body>
