vue學習筆記 一

2022-07-24 07:03:08 字數 2075 閱讀 1105

一、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',}'});

<

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>

四、vue中父子元件相互傳值

元件中使用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選項,則停止編譯,也意味著暫時停止了生命週期 直...