vue入门教程（二）
8. 事件處理
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。
?<button @click="test1">test1</button><button @click="test2('abc')">test2</button> ? <script>new Vue({el: '#example',methods: {// 默認(rèn)事件形參: event test1(event) {alert(event.target.innerHTML)},test2 (msg) {alert(msg)}}}) </script>有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：
?<button @click="test3('abcd', $event)">test3</button> ? <script>// ...methods:{ ?test3 (msg, event) {alert(msg+'---'+event.target.textContent)},} </script>事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通過由點(diǎn) . 表示的指令后綴來調(diào)用修飾符。
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽器時(shí)使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) --> <div v-on:click.self="doThat">...</div> ? <!-- click 事件只能點(diǎn)擊一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
下面演示一下stop和prevent和once
?<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a><div style="width: 200px;height: 200px;background: red" @click="test5"><div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div></div> ? ? <script>// ...methods:{ ?test4 () {alert('點(diǎn)擊了鏈接')},test5 () {alert('out')},test6 () {alert('inner')},test7 () {alert('once')}} </script>?
按鍵修飾符
在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名： --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">9. 表單輸入綁定
9.1 基礎(chǔ)用法
你可以用 v-model 指令在表單 input、textarea 及 select 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。
v-model 會(huì)忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項(xiàng)中聲明初始值。
v-model 在內(nèi)部為不同的輸入元素使用不同的 property 并拋出不同的事件：
-
text 和 textarea 元素使用 value property 和 input 事件；
-
checkbox 和 radio 使用 checked property 和 change 事件；
-
select 字段將 value 作為 prop 并將 change 作為事件。
頁面效果如下：
?
9.2 修飾符
.lazy
在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > {{msg}}.number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">這通常很有用，因?yàn)樵?type="number" 時(shí) HTML 中輸入的值也總是會(huì)返回字符串類型。
.trim
如果要自動(dòng)過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">10. 生命周期
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
比如 created 鉤子可以用來在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：
new Vue({data: {a: 1},created: function () {// `this` 指向 vm 實(shí)例console.log('a is: ' + this.a)} }) // => "a is: 1"也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實(shí)例。
下圖展示了實(shí)例的生命周期：
?
11. 過渡
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果。
Vue 提供了內(nèi)置的過渡封裝組件，該組件用于包裹要實(shí)現(xiàn)過渡效果的組件。
語法：
<transition name = "nameoftransition"><div></div> </transition>過渡其實(shí)就是一個(gè)淡入淡出的效果。Vue在元素顯示與隱藏的過渡中，提供了 6 個(gè) class 來切換：
-
v-enter：定義進(jìn)入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
-
v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。
-
v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過渡/動(dòng)畫完成之后移除。
-
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
-
v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。
-
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過渡/動(dòng)畫完成之后移除。
?
對(duì)于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 ，則 `v-` 是這些類名的默認(rèn)前綴。如果你使用了，那么 v-enter 會(huì)替換為 my-transition-enter。
我們用一個(gè)實(shí)例演示一下：
?<style>/*指定過渡樣式*/.xxx-enter-active, .xxx-leave-active {transition: opacity 1s}/*指定隱藏時(shí)的樣式*/.xxx-enter, .xxx-leave-to {opacity: 0;} ? ?.move-enter-active {transition: all 1s} ?.move-leave-active {transition: all 3s} ?.move-enter, .move-leave-to {opacity: 0;transform: translateX(20px)}</style> </head> <body> <div id="demo"><button @click="show = !show">Toggle</button><transition name="xxx"><p v-show="show">hello</p></transition> </div> ? <hr> <div id="demo2"><button @click="show = !show">Toggle2</button><transition name="move"><p v-show="show">hello</p></transition> </div> ? ? <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">new Vue({el: '#demo',data: {show: true}}) ?new Vue({el: '#demo2',data: {show: true}}) ? </script>效果如下：
?
12. 過濾器
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示：
<!-- 在雙花括號(hào)中 --> {{ message | capitalize }} ? <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>你可以在一個(gè)組件的選項(xiàng)中定義本地的過濾器：
filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)} }或者在創(chuàng)建 Vue 實(shí)例之前全局定義過濾器：
Vue.filter('capitalize', function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1) }) ? new Vue({// ... })下面我們做一個(gè)時(shí)間格式化的過濾器：
<!--功能: 對(duì)要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示注意: 并沒有改變?cè)镜臄?shù)據(jù), 可是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù) --> <!--需求: 對(duì)當(dāng)前時(shí)間進(jìn)行指定格式顯示--> <div id="test"><h2>顯示格式化的日期時(shí)間</h2><p>{{time}}</p><p>最完整的: {{time | dateString}}</p><p>年月日: {{time | dateString('YYYY-MM-DD')}}</p> </div> ? <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script> <script>// 定義過濾器Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {// moment.js庫可以看文檔： https://momentjs.bootcss.com/return moment(value).format(format);}) ? ?new Vue({el: '#test',data: {time: new Date()},mounted () {setInterval(() => {this.time = new Date()}, 1000)}}) </script>13. 指令
13.1 內(nèi)置指令
常用的內(nèi)置指令：
| v:text | 更新元素的 textContent |
| v-html | 更新元素的 innerHTML |
| v-if | 如果為 true, 當(dāng)前標(biāo)簽才會(huì)輸出到頁面 |
| v-else | 如果為 false, 當(dāng)前標(biāo)簽才會(huì)輸出到頁面 |
| v-show | 通過控制 display 樣式來控制顯示/隱藏 |
| v-for | 遍歷數(shù)組/對(duì)象 |
| v-on | 綁定事件監(jiān)聽, 一般簡(jiǎn)寫為@ |
| v-bind | 強(qiáng)制綁定解析表達(dá)式, 可以省略 v-bind |
| v-model | 雙向數(shù)據(jù)綁定 |
| ref | 指定唯一標(biāo)識(shí), vue 對(duì)象通過$refs 屬性訪問這個(gè)元素對(duì)象 |
| v-cloak | 防止閃現(xiàn), 與 css 配合: [v-cloak] { display: none } |
大部分指令之前的案例中已經(jīng)使用過了，下面寫一下剛才沒有用到的指令。
?<style>[v-cloak] { display: none }</style> ? <div id="example"><p v-cloak>{{msg}}</p><p v-text="content"></p> ? <!--p.textContent = content--><p v-html="content"></p> ?<!--p.innerHTML = content--><p ref="msg">vue可以通過$refs.msg訪問我</p><button @click="hint">提示</button> </div> ? <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">new Vue({el: '#example',data: {msg: "hello vue",content: '<a href="http://www.baidu.com">百度一下</a>'},methods: {hint () {alert(this.$refs.msg.innerHTML)}}}) </script>13.2 自定義指令
除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令。注意，在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。
注冊(cè)全局指令：
Vue.directive('self_defined_name',{bind:function(el,binding){//do someting},inserted: function(el,binding){//do something}, }注冊(cè)局部指令：
new Vue({el:'#app',directives:{self_defined_name1:{bind:function(el,binding){//do something}inserted:function(el,binding){//do something},} ?self_defined_name2:{bind:function(el,binding){//do something}inserted:function(el,binding){//do something},}} ? })下面我們注冊(cè)一個(gè)全局指令 v-focus, 該指令的功能是在頁面加載時(shí)，元素獲得焦點(diǎn)：
<div id="app"><p>頁面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p><input v-focus> </div><script> // 注冊(cè)一個(gè)全局自定義指令 v-focus Vue.directive('focus', {// 當(dāng)綁定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus()} }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app' }) </script>鉤子函數(shù)
指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：
-
bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
-
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
-
update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。
-
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
-
unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
鉤子函數(shù)的參數(shù)有：
-
el: 指令所綁定的元素，可以用來直接操作 DOM 。
-
binding
: 一個(gè)對(duì)象，包含以下屬性：
-
name: 指令名，不包括 v- 前綴。
-
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
-
oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
-
expression: 綁定值的表達(dá)式或變量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
-
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。
-
modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }。
-
-
vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)。
-
oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
有時(shí)候我們不需要其他鉤子函數(shù)，我們可以簡(jiǎn)寫函數(shù)，如下格式：
Vue.directive('runoob', function (el, binding) {// 設(shè)置指令的背景顏色el.style.backgroundColor = binding.value.color })14. 插件
插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴(yán)格的限制——一般有下面幾種：
添加全局方法或者 property。如：vue-custom-element
添加全局資源：指令/過濾器/過渡等。如 vue-touch
通過全局混入來添加一些組件選項(xiàng)。如 vue-router
添加 Vue 實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn)。
一個(gè)庫，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能。如 vue-router
14.1 開發(fā)插件
Vue.js 的插件應(yīng)該暴露一個(gè) install 方法。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象：
(function (window) {const MyPlugin = {}//插件對(duì)象必須有一個(gè)install方法MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或?qū)傩訴ue.myGlobalMethod = function () {console.log('Vue函數(shù)對(duì)象的myGlobalMethod()')} ?// 2. 添加全局資源Vue.directive('my-directive',function (el, binding) {el.textContent = 'my-directive----'+binding.value}) ?// 4. 添加實(shí)例方法Vue.prototype.$myMethod = function () {console.log('vm $myMethod()')}}//向外暴露window.MyPlugin = MyPlugin })(window) ?14.2 使用插件
通過全局方法 Vue.use() 使用插件。它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成：
// 調(diào)用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) ? new Vue({// ...組件選項(xiàng) })也可以傳入一個(gè)可選的選項(xiàng)對(duì)象：
Vue.use(MyPlugin, { someOption: true })Vue.use 會(huì)自動(dòng)阻止多次注冊(cè)相同插件，屆時(shí)即使多次調(diào)用也只會(huì)注冊(cè)一次該插件。
我們把剛才自己寫的插件引入進(jìn)來：
<div id="test"><p v-my-directive="msg"></p> </div> ? <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="vue-myPlugin.js"></script> <script type="text/javascript">// 聲明使用插件(安裝插件: 調(diào)用插件的install())Vue.use(MyPlugin) ?const vm = new Vue({el: '#test',data: {msg: 'HaHa'}})Vue.myGlobalMethod()vm.$myMethod() ?new Object() </script>?
總結(jié)
以上是生活随笔為你收集整理的vue入门教程（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webpack从入门到精通（四）优化打包
- 下一篇： html5倒计时秒杀怎么做,vue 设