Vue.js前端開(kāi)發(fā)技術(shù)第3章-Vue指令課件

1、 第3章 Vue指令 課程目標(biāo)vue 指令的定義v-if與v-show的區(qū)別使用數(shù)組表達(dá)式綁定 class 屬性使用 v-model 綁定表單元素vue 示例實(shí)現(xiàn)的任務(wù)展示2課程內(nèi)容vue指令v-if、v-for、v-showvue指令v-bindvue指令v-model綜合案例3 Vue指令定義 指令是帶有 v- 前綴的特殊屬性。作用 當(dāng)表達(dá)式的值改變時(shí) ，將其產(chǎn)生的連帶影響 ，響應(yīng)式的作用于DOM。指令修飾符定義表示特殊后綴，表示指令應(yīng)該以特殊的方式綁定常見(jiàn)修飾符.prevent 修飾符會(huì)阻止當(dāng)前事件的默認(rèn)行為.stop 修飾符將阻止事件向上冒泡指令詳解v-if指令v-if 指令可以完全根

2、據(jù)表達(dá)式的值在 DOM 中生成或移除一個(gè)元素。公告new Vue(el: #app,data:notice:true) 指令詳解通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代 value v-for指令提供第二個(gè)的參數(shù)為鍵名提供第三個(gè)參數(shù)為索引 key : value index . key : value v-for指令整數(shù)迭代v-for Template如同 v-if 模板,渲染一個(gè)包含多個(gè)元素的塊，使用 v-for 遍歷多個(gè)標(biāo)簽，就需要用 。 n hello,world! todo.text 演示迭代數(shù)組點(diǎn)擊新增var app = new Vue(el: #app-2,data: todos: text: 學(xué)

3、習(xí) JavaScript, text: 學(xué)習(xí) Vue , text: 整個(gè)牛項(xiàng)目 ) 演示迭代數(shù)組v-on指令v-on 指令綁定一個(gè)事件監(jiān)聽(tīng)器，v-on 指令用于綁定 HTML的單擊事件用 v-on:click 縮寫(xiě)為 click。12 Greetvar app = new Vue(el: #app,data: name: Vue.jsv-on 指令13/ 在 methods 對(duì)象中定義方法methods: greet: function () / this 在方法里指當(dāng)前 Vue 實(shí)例alert( + 的方法被調(diào)用了！ ) v-on 指令v-show指令v-show 的用法

4、與前面的 v-if 類(lèi)似，通過(guò)此指令控制元素的顯示隱藏，即控制元素的 display。14v-show 控制 display 屬性Toggleok： okvar vm=new Vue( el:#app, data: ok:true methods:toggle() this.ok=!this.ok; )v-show指令 Vue動(dòng)態(tài)樣式綁定 v-bind 指令屬性 Vue 指令以 v-前綴開(kāi)始，數(shù)據(jù)綁定的指令 v-bind:屬性名 v-bind 綁定 class綁定 class 屬性，采用對(duì)象表達(dá)式計(jì)算屬性方式Vue動(dòng)態(tài)樣式綁定v-bind 數(shù)組表達(dá)式綁定 class 屬性綁定 class 屬性

5、，采用數(shù)組表達(dá)式、三元表達(dá)式混合使用v-bind 對(duì)象語(yǔ)法綁定行內(nèi)樣式綁定行內(nèi)樣式，采用對(duì)象語(yǔ)法v-bind 數(shù)組語(yǔ)法綁定行內(nèi)樣式綁定行內(nèi)樣式，采用數(shù)組語(yǔ)法 Vue 表單輸入綁定指令 v-model v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)控件類(lèi)型它能夠自動(dòng)選取正確的方法來(lái)更新元素。文本框文本域復(fù)選框v-bindv-bind 在控件上綁定 value復(fù)選框單選按鈕選擇列表設(shè)置選擇列表 v-bind 綁定 value參數(shù)特性表單中參數(shù)的特性lazynumber.trim綜合案例演示數(shù)據(jù)排序 item new Vue(el:#app,data: a:30170105,30170101,30170107,30170108綜合案例演示數(shù)據(jù)排序 computed: arraySort: function () return this.a.sort(); , )代碼運(yùn)行后，按照順序顯示的編號(hào)列表 30170101,30170105,30170107,3017