Vue基礎知識總結下篇

2021-10-21 22:53:09 字數 1516 閱讀 2778

一、基本語法:

1、例項化:new vue({})

2、el:一定是根容器元素(vue的作用域就是這個根元素內),就是寫選擇器

data:用於儲存資料

methods:定義方法(方法裡this指向當前vue例項化的物件,但是獲取屬性和方法不需要this.data.name,直接this.name即可,獲取方法也是如此)

二、資料繫結:給屬性繫結對應的值

(1)v-bind的使用:v-bind:href="website",v-bind:value="value"(注意此處就不需加雙大括號了)

(2)v-html用於繫結輸出html元素:

三、事件:

(1)v-on:click="事件名"(有引數的話就是事件名(引數)),簡寫:@click="事件"

(2)事件修飾符:v-on:click.事件修飾符

v-on:click.once="add(1)",v-on:mousemove.stop,v-on:click.prevent="add"(阻止預設事件)

(3)鍵盤事件keyup、keydown,

鍵盤修飾符:keyup.enter、keyup.alt.enter(鏈式:alt+enter鍵)

四、雙向資料繫結:input/select/textarea

(1)v-model指令

(2)ref機制:給input標籤標記

方法裡面利用this.$refs.name.value去獲取值

五、動態繫結css樣式:

(1)v-bind:class=""

六、條件與迴圈

(1)v-if/v-else-if/v-else、v-show,兩者的區別(有無實際dom元素的區別)

(2)v-for、列表渲染template

(3)v-for裡面對陣列預設的有}索引,對json物件預設有}、}鍵值,或:v-for="(k,v,index) in json"

注意:在陣列裡面,小括號裡面的引數第一位是value值,第二位是索引值;而在json裡面,第一位是value值,第二位是key值,第三位是索引值

七、事件深入:

(1)事件物件$event:@click="show($event)"

(2)事件冒泡:

阻止冒泡:

1、原生的:$event拿到事件物件,然後方法裡面ev.cancelbubble=true

2、@click.stop="show()"

阻止預設行為:

1、原生的:$event拿到事件物件,然後方法裡面ev.preventdefault()

2、@contextmenu.prevent(阻止右鍵預設行為)

(3)鍵盤事件:@keydown、@keyup、$event、ev.keycode(獲取鍵值)

常用鍵:@keydown.13或@keydown.enter/@keydown.up(上下左右均可)

八、屬性

v-bind繫結屬性:v-bind:src="url"

Vue基礎知識總結

vue會管理el選項命中的元素 及其內部的後代元素 可以使用其他的選擇器,但是建議使用id選擇器 可以使用其他的雙標籤,不能使用html 和body 1.內容繫結 事件繫結 v text v html v on基礎 v text 設定標籤的文字值,預設寫法會替換全部內容,使用差值表示式 可以替換指定...

vue 基礎知識 總結

jquery主要時操作dom vue 主要是運算元據 是乙個漸進式前端框架,vue中渲染dom用到了diff演算法,渲染dom要比原生js快 vue是乙個建構函式,需要傳入options el掛載根元素 template 模板字串,有template直接渲染這裡的內容,如果沒有就找el元素中的內容進...

vue基礎知識總結(1)

beforecreat created beforemount mounted beforedestroy destroyed beforeupdate updated var vm new vue watch lastname function methods 計算屬性 有快取 computed ...