一、認識vue
vue.js(讀音 /vjuː/, 類似於 view) 是一套構建使用者介面的漸進式框架。vue 只關注檢視層, 採用自底向上增量開發的設計。
vue 的目標是通過盡可能簡單的 api實現響應的資料繫結和組合的檢視元件。
二、vue的設計思想-基於mvvm框架
m:model(模型,表示資料);
v:view(檢視,表示介面);
vm:view model(檢視模型,用於模型和資料之間的轉換);
它的基本思想是資料驅動檢視,也就是檢視的改變是通過資料的改變實現的,要改變介面僅需改變資料,無需dom操作。
-------面試題:jquery和mvvm的區別?
jquery是基於dom操作的,易理解,是符合習慣的傳統框架,無需dom操作。mvvm是資料驅動的,利用記憶體虛擬dom技術,在記憶體生成結構後,一次性生成介面。
三、主流的mvvm框架有哪些?
1.angular
2.react
3.vue(中國尤雨溪主導開發)
五、vue常用的語法
1.每個 vue 應用都需要通過例項化 vue 來實現。
2.}:文字插值,資料繫結最常見的形式。單向繫結:資料-->檢視,用於在空白處顯示vue資料,可寫js**(不能用於屬性);
3.:屬性=" ",單向繫結:資料->檢視,用於顯示屬性值,雙引號中應當寫js**,可訪問vue資料;
}
4.v-model=" ":,一般用於表單元素與vue的雙向繫結(資料檢視),單一的checkbox使用v-model應該繫結boolean資料,多個checkbox使用v-model應繫結陣列。
5.v-for,迴圈生成元素。
演示:生成十個多選框
}
6.,虛擬輔助元素,執行後不生成任何元素。
7.v-if,依照條件生成元素,如不符合條件不會生成元素。
8.v-show,依照條件顯示元素,若不符合條件不會顯示元素,無論是否顯示元素始終存在。
9.@eventname,用於事件與處理函式的繫結,如@click,@mouseover,@mouseout
注意:有三種形式
@click="myfun" 或v-on:mouseover="onover($event)" 或@mouseout="onout($event)"
}
六、在vue物件中可以定義
data:定義文字內容,屬性內容,布林值,陣列;
methods:定義普通方法;
mounted:定義vue檢視渲染完成之後執行的動作;
watch:定義對data中定義的資料變化的偵聽;
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 資料繫結 宣...
VUE基礎知識
1 全域性定義 每個元件的命名不可重複 2 字串模板 缺乏語法高亮,可讀性較差 1 屬性 屬性書寫方式 props type name list 屬性時單向資料流,不可在子元件更改父元件傳遞的值,可通過onchange方法修改。2 事件 3 插槽 插槽是元件的一塊html模板,其顯示與否由父元件決定...
Vue基礎知識
資料雙向繫結 指令帶有v 的,表示vue特有的屬性,他們會在渲染的dom上,應用特殊的響應式行為 或者 click me v model 會忽略所有表單元素的 value checked selected attribute 的初始值 而總是將 vue 例項的資料作為資料 你應該通過 j ascri...