一、mvc 和 mvvm 的區別
mvc:
在該模型中最核心部分是controller,很大一部分是對dom進行操作。即mvc是面向dom進行開發
view通過dom事件監控來操作改變model,model通過動態資料繫結來改變檢視view
mvvm只需要關注m層的變化即可,資料改變後view會跟著改變。即mvvm是面向資料進行開發
二、什麼是元件化
把頁面中的某一部分單獨拿出來進行封裝,有兩個特點:元件的封裝,元件的復用
合理的拆分組建將大型專案拆分成乙個個元件,易於維護
三、vue中的元件化
//區域性元件
vartodoitem=}',
methods:
}}vue(,
data:,
methods:,
handleitemdelete:
function
(index)
}});
//全域性元件
vue.component('todoitem',}'});
<四、vue中父子元件相互傳值div
id>
<
input
type
="text"
v-model
='inputvalue'
/>
<
button
v-on:click
='handlebtnclick'
>提交
button
>
<
ul>
<
todo-item
v-bind:content
='item'
v-bind:index
='index'
v-for
='(item,index)
in list'
@delete
='handleitemdelete'
>
todo-item
>
ul>
div>
元件中使用v-bind:item="item"子元件中通過 props:["item"]接收引數
//五、用到的命令通過監聽事件
this.$emit('delete',this.index);
v-bind:item="item" ==> :item="item"v-on:click="handlebtnclick" ==> @click="handlebtnclick"v-for="item in list" v-for="(item,index) in list"jquery陣列方法:splice()splice() 方法向/從陣列中新增/刪除專案,然後返回被刪除的專案。
注釋:該方法會改變原始陣列。
引數描述
index
必需。整數,規定新增/刪除專案的位置,使用負數可從陣列結尾處規定位置。
howmany
必需。要刪除的專案數量。如果設定為 0,則不會刪除專案。
item1, ..., itemx
可選。向陣列新增的新專案。
Vue學習筆記 一
1 vue基本模型 一段html 配合json,再new 處理vue例項。html json格式的資料 vue.js var vm new vue new vue 2.2.2 v for value in json 2.2.3 v for k,v in json 如果有重複的資料 track by ...
vue學習筆記(一)
一.搭建環境 1.如果我們的電腦上有了node和npm,我們就只需要執行下面的命令全域性安裝vue cli腳手架 npm install g vue cli 或者 cnpm install g vue cli 2.構建完腳手架之後,隨便進入乙個我們事先準備好的目錄,比如demo目錄,然後在目錄中做初...
vue 學習筆記(一)
例項生命週期鉤子 1 在beforecreate和created之間,進行資料觀測 data observer 也就是在這個時候開始監控data中的資料變化了,同時初始化事件 2 首先系統會判斷物件中有沒有el選項 有el選項,則繼續編譯過程 沒有el選項,則停止編譯,也意味著暫時停止了生命週期 直...