vue 入坑指南一 vue 基礎語法

1.模板語法

1.1 mustache語法

}		//在html獲取data中msg變數的值

1.2 html賦值

v-html="" 	//將內容當成html標籤輸出    .html()類似

1.3繫結屬性

v-bind:id="" //新增繫結乙個標籤的屬性   .attr()類似

1.4 表示式

}		//三目運算表示式

1.5 文字賦值

v-text = ""		// 和 vue的 } 功能類似 做文字展示

1.6 指令

v-if=""		//條件判斷

1.7 過濾器

//字元過濾數值過濾字段值過濾金額格式化字母大小寫 } //方法一 v-bind:id="rawld | foprmatld" //方法二

2.1 判斷class名是否顯示該class名是否生效

2.1.1 內部是乙個物件的語法

//active 是style的class名 //isactive 是data中的變數 isactive為true,顯示class;為false，不顯示class名 v-bind:class=""

2.1.2 內部是乙個陣列的語法

//將之前寫在物件中的資料直接寫在data之中效果相同 data:

2.2 寫標籤內嵌的style

//activecolor與fontsize 均為data中的變數名 v-bind:style=""

2.3條件渲染

v-if v-else v-else-if v-show v-cloak

條件結果為 true

v-if v-else v-else-if //渲染對應的dom節點

v-show //渲染對應的dom節點並設定css display:block

條件結果為false

v-if v-else v-else-if //不渲染對應的dom節點

v-show //渲染對應的dom節點並設定css display:none

v-cloak //實際上不是條件渲染,在網速太慢或請求太快，dom資源載入緩慢，可以使用 v-cloak隱藏html**

2.4 事件處理器

2.4.1事件繫結

v-on:click="greet" 
@click="greet"		//greet 是methods 的方法名

2.4.2 事件修飾符

v-on:click.stop //stop 阻止事件冒泡 v-on:click.prevent //prevent 阻止按鈕預設事件 submit阻止了就不會重新整理頁面 v-on:click.self //self 只給當前的按鈕繫結事件，如果當前按鈕有子元素，單擊子元素不觸發事件 v-on:click.once //once 只能讓該按鈕的事件觸發一次

v-on:keyup.enter //按鍵盤『enter』觸發 v-on:keyup.tab //按鍵盤『tab』 v-on:keyup.delete v-on:keyup.esc v-on:keyup.space v-on:keyup.up v-on:keyup.down v-on:keyup.left v-on:keyup.right

2.5 vue元件

1.全域性元件和區域性元件 2.父子元件通訊-資料傳遞父元件->子元件 pops 3.slot

2.5.2 父子元件通訊-資料傳遞動態傳值

父子元件同時更新資料同時完成事件動作資料雙向同步 vuex也可以實現

vue 入坑指南一 vue 基礎語法

Vue模版基礎語法 Vue筆記一

Vue基礎語法

Vue 基礎語法

vue 入坑指南 一 vue 基礎語法

Vue模版基礎語法 Vue筆記 一

Vue基礎語法

Vue 基礎語法

相關推薦

vue 入坑指南一 vue 基礎語法

Vue模版基礎語法 Vue筆記一