Vue指令學習前(上)

2021-10-01 11:22:27 字數 956 閱讀 4101

1:vue資料響應:深入響應式原理,雙向資料繫結原理

資料響應2.0原理:

vue是通過資料劫持來對資料進行響應式的攔截,通過es5的object.defineproperty和setter,getter來

2:插值表示式

插值表示式的屬性用法就是vue的新概念:指令

注意:1:屬性用法是不加}

​ 2:但是屬性上要加上指令

2:當我們new vue之後得到乙個root()根目錄

指令:操作dom

1:v-html可以解析xml型別資料

​ v-text

2:v-bind:單項資料繫結

​ 類名:物件形式

​ 陣列

​ 樣式:物件的形式:style=「」

​ 陣列:style=「【{},{}】」

3:條件渲染-流程控制-條件表示式

​ 1:單路分支 v-if=" "

​ 2:雙路分支 v-if=" " v-else=""

​ 3:多路分支 v-if=「 」 v-else-if=" "

4:條件展示

​ 1:v-show

​ 頻繁使用:v-show 控制屬性

​ 不頻繁:v-if 控制建立是否存在

5:列表渲染

陣列v-for=」 (item,index) of num「 :key=「index」

key的作用是為了區別每乙個渲染的dom結構

物件列表渲染

v-for=」(item,key,index)of object「 :key=「index」

json資料渲染

v-for=」 item 「

6:事件處理器

事件新增

v-on:click------@click=」方法「

事件的書寫順序:先定義再繫結,

用methods:{//事件處理程式

方法vue中的事件為原生事件

VUE學習 指令

v if是條件渲染指令,它根據表示式的真假來刪除和插入元素,它的基本語法 v if expression 這裡的expression返回的是乙個boolean值,false或者true。往往v if指令與template標籤連用,比如下面這段 服務場景 活動場景當menuflag 1 為true時,...

Vue 基礎指令學習

學習vue的一些總結,第一次寫部落格,文筆實在是很差 不過我會不斷寫的。v text 是元素的innertext 只能在雙標籤中使用 v html 是元素的innerhtml,不能包含 v if 元素是否移除或者插入 v show 元素隱藏或者顯示 v model 雙向資料繫結 v text v i...

Vue 基礎指令學習

學習vue的一些總結,第一次寫部落格,文筆實在是很差 不過我會不斷寫的。v text 是元素的innertext 只能在雙標籤中使用 v html 是元素的innerhtml,不能包含 v if 元素是否移除或者插入 v show 元素隱藏或者顯示 v model 雙向資料繫結 v text v i...