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

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

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

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

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

5、，采用數(shù)組表達式、三元表達式混合使用v-bind 對象語法綁定行內樣式綁定行內樣式，采用對象語法v-bind 數(shù)組語法綁定行內樣式綁定行內樣式，采用數(shù)組語法 Vue 表單輸入綁定指令 v-model v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)控件類型它能夠自動選取正確的方法來更新元素。文本框文本域復選框v-bindv-bind 在控件上綁定 value復選框單選按鈕選擇列表設置選擇列表 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(); , )代碼運行后，按照順序顯示的編號列表 30170101,30170105,30170107,3017