下面記錄一些vue中的skill.
1、如何獲取vuejs powered plain data?
有時候我們可能需要一個未經vuejs define propery(get/set)處理過的原始js數據，一個workaround方案:
JSON.parse(JSON.stringify($vm.action.roles))
2、所有Vue實例本身暴露的屬性和方法，都以$爲頭來區別，對應Vue.set global API
例如:vm.$data,vm.$elvm.$watch，這個有利於和data屬性對象的數據來區分；
3、v-for列表數據渲染（注意在v-for子塊內可以訪問父組件作用域內的屬性，還有一個$index）
4、v-on內聯語句訪問event參數:如果是一個函數作爲v-on綁定的表達式的話，該函數自動帶有(event參數），這個和普通的js事件處理函數是一樣的。
<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
say: function (msg, event) {
// 現在我們可以訪問原生事件對象
event.preventDefault()
}
}
5、在vuejs2.0中初次mount的組件並不會調用watch,而只有數據變化後纔會調用
6、chrome下vue dev-tool無法顯示問題
Vue.config.devtools = true; //在new Vue()之前執行
//Vue.config.debug = true;
//window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：
|
Vue.set(vm.someObject, 'b', 2) |
您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：
|
this.$set(this.someObject,'b',2) |
有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：
|
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) |
7、Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：
|
Vue.set(vm.someObject, 'b', 2) |
您還可以使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：
|
this.$set(this.someObject,'b',2) |
有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發更新。在這種情況下可以創建一個新的對象，讓它包含原對象的屬性和新的屬性：
|
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) |
8、vm.$nextTick() vs Vue.nextTick(callback)
到底nextTick是幹什麼的：
看一個牛人的回答： it's a way to execute a callback function after the data is set.
To add an example to that, lets say you have a jQuery plugin that creates a pie chart. The data on those charts are fetched and set by vuejs. You can't initialize the charts until after the data is set / until the "next tick". Here's a quick example...
https://jsfiddle.net/kr9b4o8f/
If you try to initialize the charts without nextTick(), it won't work because the data has not been changed yet.
<div id="example">{{msg}}</div>
var vm = new Vue({
el: '#example',
data: {
msg: '123'
}
})
vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
// 對於component下面的調用方法
Vue.component('example', {
template: '<span>{{msg}}</span>',
data: function () {
return {
msg: 'not updated'
}
},
methods: {
updateMessage: function () {
this.msg = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})
9、什麼是抽象組件以(transition組件爲例)？
抽象組件具有以下特點：
1. 它是以引入功能而不是構建視圖爲目的而存在的
2. 它不會在DOM中有任何節點
3. 它也不會在inspect component hierarchy中顯示出來
抽象組件和無template的組件有什麼區別？？
非常典型的例子是vuejs2.0中引入的transition組件:
<transition>
<div v-if="ok">toggled content</div>
</transition>
10、路由嵌套
路由嵌套會將其他組件渲染到該組件內，而不是進行整個頁面跳轉router-view本身就是將組件渲染到該位置，想要進行頁面跳轉，就要將頁面渲染到根組件，在起始配置路由時候寫到：
var App = Vue.extend({ root });
router.start(App,'#app');
這裏首先將根組件註冊進來，用於將路由中配置好的各個頁面渲染出來，然後將根組件掛載到與#app匹配的元素上。