vue2 0基礎知識點(一)

2021-08-21 06:55:42 字數 1756 閱讀 4256

v-on:click=''@click='':click=''三種寫法;

注意函式呼叫:直接使用雙花括號呼叫函式是要使用函式名+括號,其他直接使用函式名即可,或使用函式名+括號(click事件中)注意傳參的函式必須帶括號,可以不帶引數,不然會報錯物件空值;

v-if=''條件渲染與v-show=''的區別:v-if 條件:不存在不會佔位空間不會被渲染掛載;v-show為真時,去掉display:none,為假時顯示display:none。缺省會占用空間,會被渲染掛載。

v-for=''可以通過兩組方式遍歷陣列(也可以遍歷物件):一種是通過陣列下標;另一種是迴圈遍歷;

v-for='user in users' 或 v-for='(user,index) in users'第二個引數是陣列索引值;

v-for還可以渲染divp>

v-for='(user,index) in users'>

}h3>

}---

}span>

div>

v-for使用template標籤,這個標籤不像div一樣會被渲染出來,只渲染template裡面的標籤p>

v-for='(user,index) in users'>

}h3>

}---

}span>

template>

遍歷陣列裡面的物件,遍歷兩次p>

v-for='(user,index) in users'>

v-for="(item,key) in user" >

}---

}h5>

div>

template>

資料雙向繫結的兩種方法:

雙向資料繫結ref/$refs示例:input/select/textareap>

for="">姓名label>

type="text"

v-on:keyup="logname"

ref='refname'>

您輸入的名字為:

}span>

for="age">年齡label>

type="text"

v-on:keyup='logage'

id="age"

ref="refage">

您輸入的年齡為:

}span>

雙向資料繫結v-model示例:input/select/textareap>

for="">姓名label>

type="text"

v-model='name'>

您輸入的名字為:

}span>

for="age">年齡label>

type="text"

v-model="age">

您輸入的年齡為:

}span>

js部分:

new vue(,

methods:,

logage:function()}

})

computedmethods方法:只要methods方法之一被呼叫,其他所有方法都會被渲染執行,很耗費效能;計算屬性,只會呼叫相應的方法體,是應用於搜尋,呼叫比較多的方法體。

vue2 0知識點彙總

vue簡介 資料流vue例項物件 vue常用指令 class結合v bind使用 methods 和 v on的使用 v on高階用法 v for的使用 簡單學生新增刪除案例 父子元件使用父傳子 父元件向自元件傳遞資料 子元件向父元件通訊vuebus vue高階 vue過濾器 獲取dom元素 vue...

vue 基礎知識點

建立例項 new vue 資料 methods 函式方法 computed 計算屬性 生命週期 鉤子函式 beforecreate 建立前 created 建立後 beforemount 渲染前 mounted 渲染後 beforeupdate 更新前 updated 更新後 beforedestr...

vue 基礎知識點

1.指令 v html 會覆蓋內部內容 會有xss攻擊 不要用在使用者提交的時候 aaaa aaaa被覆蓋掉 v if v else 進行邏輯判斷 使用者不頻繁更改 v show 渲染成 display none 使用者頻繁更改 v if 和v for 不同時使用 v for 比v if 優先順序高...