vue1 0學習總結

使用vue已經有

三、四個月了，但是只是學著使用了一些基本方法。因為現在的前端框架越來越多（angular，react...），但是我相信萬變不離其宗，很多用法框架之間還是想通的，所以借總結的vue的機會深入了解vue到每個細節，以後能更加熟練地使用vue，有機會也能在別的框架中體會相通的思想。

指令

// ...

computed: ,
// setter
set: function (newvalue) 
}}// ...

style的繫結

data: 
}

注意：v-show直接用在元件上時，v-else會出現問題，可以用v-show代替v-else

這可能也是乙個元件

v-for

基本寫法一：

基本寫法二：
} }

new vue(

}})基本寫法一：
基本寫法二：
} }

陣列變動檢測

eg. .push()、.pop()、.shift()、.unshift()、.splice()、.sort()、.reverse()　

1.不能之間用索引設定元素,eg.vm.items[0] = {}；    解決辦法：使用$set方法，如 example.items.$set(0,)，這樣就可以觸發新檢視了

2.不能直接設定陣列的長短, eg.   vm.items.length = 0;    解決辦法：直接賦給乙個空陣列

1. $set(陣列索引，要修改的值)

使用方法：如上第一點的使用方法

2.$remove(下標) 

submit

// ...
methods: 
}

表單控制項的繫結，主要由v-model進行雙向繫結表單

引數特性　

動畫類處理方法，跳過

前面提到vue的專案就是乙個元件樹，乙個頁面的所有可見的模組都可以細化成乙個元件。

想要實現乙個元件主要先從初始化根例項，定義元件和註冊元件

// 定義

var mycomponent = vue.extend()
// 註冊
vue.component('my-component', mycomponent)
// 建立根例項
new vue()

props

可以從父元件傳給子元件的一些資料

父子元件通訊

dispatch event
messages: }
// 註冊子元件
// 將當前訊息派發出去
vue.component('child', 
},methods: 
}}})
// 初始化父元件
// 將收到訊息時將事件推入乙個陣列
var parent = new vue(,
// 在建立例項時 `events` 選項簡單地呼叫 `$on`
events: 
}})

子元件的button元素繫結了click事件，該事件指向notify方法

子元件的notify方法在處理時，呼叫了$dispatch，將事件派發到父元件的child-msg事件，並給該該事件提供了乙個msg引數

父元件的events選項中定義了child-msg事件，父元件接收到子元件的派發後，呼叫child-msg事件。

當子元件觸發了"child-msg"事件，父元件的handleit方法將被呼叫。所有影響父元件狀態的**放到父元件的handleit方法中；子元件只關注觸發事件。

Vue1 0學習筆記

vue生命週期 鉤子函式 created 例項已經建立 beforecompile 編譯之前 compiled 編譯之後 ready 插入到文件中 beforedestroy 銷毀之前 destroyed 銷毀之後 new vue methods created function created f...

vue 1 0基本了解

一 基本結構 基本結構 js 1.路由需要準備乙個跟元件 2.定義元件 var home vue.extend varlist vue.extend var item vue.extend 3.建立路由例項 var router new vuerouter 4.關聯 定義路由規則 router.ma...

VUE專案效能優化（VUE10）

1.不要講所有的資料都放在data中，data中的資料都會增加getter和setter，會收集對應的watcher 2.v if和v for不能連用 3.vue在使用v for給每項元素繫結事件時使用事件 4.spa 頁面採用keep alive快取元件 5.v if當值為false時內部指令不再...