Vue基礎知識總結

2021-10-10 19:22:32 字數 1479 閱讀 9204

vue會管理el選項命中的元素

及其內部的後代元素

可以使用其他的選擇器,但是建議使用id選擇器

可以使用其他的雙標籤,不能使用html

和body

1.內容繫結、事件繫結:v-text、v-html、v-on基礎

v-text:設定標籤的文字值,預設寫法會替換全部內容,使用差值表示式}可以替換指定內容,v-text指令無論內容是什麼,只會解析為文字。

v-html:設定標籤的innerhtml,內容中有html結構會被解析為標籤。

v-on:為元素繫結事件,事件可以不需要寫on,指令可以簡寫成@。-

}+methods:

} });

var dome1 = new vue(,

methods: ,

sub: function ()

}});

2.顯示切換、屬性繫結:v-show、v-if、v-bind

v-show:根據表達值的真假,切換元素的顯示和隱藏,原理是修改元素的display,實現顯示隱藏,指令後邊的內容最終會解析為布林值。

v-if:根據表示式的真假,切換元素的顯示和隱藏,本質是通過操縱dom元素來切換顯示狀態,表示式的值為true,元素存在於dom樹中,為false,從樹中移除。

v-bind:設定元素的屬性(例如:src,title,class)完整寫法(v-bind:屬性名)可以簡寫為(:屬性名),需要動態的增刪class建議使用物件的方式。

上一張

下一張

var dome2 = new vue(,

methods: ,

next: function ()

}});

3.列表迴圈表、單元素繫結:v-for、v-on、v-modelv-for:根據資料生成列表結構,陣列經常和v-if結合使用;語法(item,index)in 資料;

item和index可以結合其他指令一起使用;陣列長度的更新會同步到頁面上,是響應式的。

v-on:事件繫結的方法寫成函式呼叫的形式,可以傳入自定義引數,定義方法時需要定義形參來接受傳入的實參;

事件的後面跟上 .修飾符 可以對事件進行限制,.enter可以限制觸發的按鍵為回車。

v-model:獲取和設定表單元素的值(雙向資料繫結),繫結的資料會和表單元素值相關聯,繫結的資料表單元素的值

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 ...

Vue基礎知識

vue.js的基本使用 1.引入vue.js 1 cdn 3 模組化安裝 npm i vue d s cnpm i vue yarn add vue 2.初始化vue 1 必須有乙個html容器,決定vue.js的作用範圍 2 初始化 new vue options data 資料 3 資料繫結 宣...