Vue筆記系列
1工碾、Vue.js入門
3括饶、Vue.js進階
API
以下會隨用隨記一些API顷链，可能會不定期更新。
-
Vue.component( id, [definition] )
注冊或獲取全局組件靴迫。注冊還會自動使用給定的id設置組件的名稱。
// 注冊組件楼誓，傳入一個擴展過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件矢劲，傳入一個選項對象（自動調用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件（始終返回構造器）
var MyComponent = Vue.component('my-component')
-
Vue.extend(options)
使用基礎 Vue 構造器，創(chuàng)建一個“子類”慌随。參數(shù)是一個包含組件選項的對象芬沉。注意：data 選項是特例，在 Vue.extend() 中它必須是函數(shù)阁猜。
<!-- HTML -->
<div id="mount-point"></div>
// 創(chuàng)建構造器
var Profile = Vue.extend({
template: '<p v-text="name"></p>',
data: function () {
return {
name: '第一個構造器丸逸！'
}
}
})
// 創(chuàng)建 Profile 實例，并掛載到一個元素上(會替換#mount-pointer)剃袍。掛載的組件會把被掛載的元素替換掉黄刚。
new Profile().$mount('#mount-pointer');
結果如下：
<p>第一個構造器！</p>
如果掛載元素不想被替換掉民效，可以用以下方法：
var component = new Profile().$mount()
document.getElementById('mount-pointer').appendChild(component.$el)
-
Vue.set( object, key, value ) 設置對象的屬性憔维。
Vue 不能檢測到對象屬性的添加或刪除涛救。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它业扒，這樣才能讓它是響應的检吆。Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應式屬性(所以，set方法的object參數(shù)也不能是 Vue 實例程储，或者 Vue 實例的根數(shù)據(jù)對象)蹭沛。可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象
之前說過的v-for指令章鲤，當你利用索引直接設置一個項時摊灭，例如上面的example1.words[0] = {text: 'A'}，如果想讓視圖更新败徊，其中一種方法就是用set帚呼。
Vue.set(example1.items, 0, {text: 'A'})
-
Vue.nextTick( [callback, context] ) 涉及到Vue的異步更新隊列
在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據(jù)之后立即使用這個方法皱蹦，獲取更新后的 DOM萝挤。
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
為毛第一次DOM里面的內容沒有變，拿不到改變的內容根欧，經(jīng)過nextTick方法后才才能拿到改變的內容怜珍。
這是因為，當你設置 vm.someData = 'new value' 凤粗，該組件不會立即重新渲染酥泛。當刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個“tick”更新嫌拣。
全局配置
全局配置——Vue.config 是一個對象柔袁，包含 Vue 的全局配置。有以下屬性：
- silent
Vue.config.silent = true;取消 Vue 所有的日志與警告,false時開啟异逐。 - devtools
Vue.config.devtools = true;配置是否允許 vue-devtools 檢查代碼捶索。開發(fā)版本默認為 true，生產(chǎn)版本默認為 false灰瞻。vue-devtools指的是一個瀏覽器插件腥例，在谷歌應用里面有。
vue.devtools.png
安裝之后酝润，是在google 開發(fā)者工具的這里找到燎竖。
2.png
組件
一、使用組件
- 注冊
1要销、全局注冊
注冊一個全局組件构回，可以使用Vue.component(tagName, options)。
注意：對于自定義標簽名，Vue.js 不強制要求遵循 W3C規(guī)則 （小寫纤掸，并且包含一個短杠）脐供，但是建議這樣寫。
組件在注冊之后借跪，便可以在父實例的模塊中以自定義元素的形式使用政己。謹記要確保在初始化根實例之前注冊了組件。并且垦梆，** el 和 data 選項必須是函數(shù)**匹颤。
<!-- HTML -->
<div id="example">
<my-component></my-component>
</div>
// 注冊仅孩，這就是所謂的語法糖托猩，因為下面的方法有點麻煩。
Vue.component('my-component', {
template: '<div>我的第一個組件!</div>'
})
// 創(chuàng)建父實例
new Vue({
el: '#example'
})
渲染為：
<div id="example">
<div>我的第一個組件!</div>
</div>
2辽慕、構造器用作組件
可以使用 Vue.extend({...})創(chuàng)建一個組件構造器京腥，extend 方法創(chuàng)建基礎Vue構造器的子類，參數(shù)是一個對象溅蛉，包含組件選項公浪，這里要注意的特例是 el 和 data 選項，在 Vue.extend() 中船侧，它們必須是函數(shù)欠气。注冊組件的component方法也一樣。這是因為镜撩，如果使用一個數(shù)據(jù)對象(是一個引用)预柒，那么所有的組件實例都共享這一個對象，這樣就會牽一發(fā)而動全身袁梗。
有了這個構造器宜鸯，我們既可以用全局注冊的方式用 Vue.component(tag, constructor)注冊，也可以利用該構造器構建一個實例遮怜，然后用 **Vue.$mount() **將該組件實例添加到DOM樹上淋袖。
<!-- HTML -->
<div id="example">
<my-component></my-component>
</div>
// 創(chuàng)建構造器
var Profile = Vue.extend({
template: '<p v-text="name"></p>',
data: function () {
return {
name: '第一個構造器組件！'
}
}
})
// 注冊
Vue.component('my-component',Profile)
// 創(chuàng)建父實例
new Vue({
el: '#example'
})
渲染為：
<div id="example">
<p>第一個構造器組件!</p>
</div>
3锯梁、局部注冊
通過使用組件實例選項注冊即碗，可以使組件僅在另一個實例/組件的作用域中可用。即在注冊的對象參數(shù)中添加 components 成員陌凳，components成員的標簽就只在改組建內使用拜姿，不在全局DOM樹中使用局部注冊的組件。
//實例作用域
var Child = {
template: '<div>一個局部組件!</div>'
}
new Vue({
// ...
components: {
// <my-component> 將只在父模板可用
'my-component': Child
}
})
//組件作用域
<div id="comp-ex">
<contact></contact>
</div>
<script>
var Person = Vue.extend({ // constructor
template: "<div><span>name:</span> {{name}} <span>Age: </span> {{age}}</div>",
data: function() {
return {
name: ' li ming',
age: 22
}
}
});
var Contact = Vue.extend({
template: "<div><span>Tel: </span> {{tel}}, <span>E-mail: </span> {{email}}<person></person></div>",
data: function() {
return {
tel: '152-0101-1010',
email: 'admin#163.com'
}
},
components: {
'person': Person // 局部注冊 person 標簽
}
})
Vue.component('contact', Contact)
var you = new Vue({ // init component, render template
el: '#comp-ex'
})
</script>
子組件只能在父組件的template中使用冯遂。注意下面兩種子組件的使用方式是錯誤的：
- 以子標簽的形式在父組件中使用
<div id="app">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
因為當子組件注冊到父組件時蕊肥，Vue.js會編譯好父組件的模板，模板的內容已經(jīng)決定了父組件將要渲染的HTML。
<parent-component>…</parent-component>相當于運行時壁却，它的一些子標簽只會被當作普通的HTML來執(zhí)行批狱，<child-component></child-component>不是標準的HTML標簽，會被瀏覽器直接忽視掉展东。
- 在父組件標簽外使用子組件
<div id="app">
<parent-component>
</parent-component>
<child-component>
</child-component>
</div>
運行這段代碼赔硫，瀏覽器會提示以下錯誤:
在父組件標簽外使用子組件報錯
4、is特性
一些 HTML 元素盐肃，如<ul> <ol> <table> <select>爪膊，限制什么元素可以放在它里面。自定義元素不在白名單上砸王，將被放在元素的外面推盛，因而渲染不正確。這時應當使用 is 特性谦铃，指示它是一個自定義元素耘成。
<table>
<my-row>...</my-row>
</table>
<!-- 自定義組件 <my-row> 被認為是無效的內容，因此在渲染的時候會導致錯誤驹闰。需要使用特殊的 is 屬性 -->
<table>
<tr is="my-row"></tr>
</table>
二瘪菌、組件通信
良好的流程： Vue.js 中，父子組件的關系可以總結為 props down, events up 嘹朗。父組件通過 props 向下傳遞數(shù)據(jù)給子組件师妙，子組件通過 events 給父組件發(fā)送消息。
父子組件通信圖示
1屹培、Prop顯式聲明
-
(1)默穴、使用prop傳遞數(shù)據(jù)
組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數(shù)據(jù)惫谤”诙ィ可以使用 props 把數(shù)據(jù)傳給子組件。prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性溜歪。子組件需要顯式地用 props選項聲明 “prop”：
讀到這里若专，我們掌握的組件的構造選項對象的屬性包括了：
- template，要渲染的內容
- data蝴猪，數(shù)據(jù)调衰，必須是一個函數(shù)，函數(shù)返回一個對象
- props自阱，從父組件傳遞數(shù)據(jù)到子組件嚎莉。
<div id="comp-ex">
<!-- 注意在HTML中屬性要寫kebab-case(短橫線隔開) -->
<child my-message='qiqihaobenben'></child>
<child my-message='qiqihaobenben'></child>
</div>
<script>
Vue.component('child', {
// 就像 data 一樣，prop 可以用在模板內
template: '<span>{{message}}</span>',
//聲明 props
// HTML特性不區(qū)分大小寫沛豌，名字形式為 camelCase 的prop用作特性時,寫在HTML中要用短橫線隔開趋箩，否則不起作用赃额，如上。
props: ['myMessage'],
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
data: function (){
return {
message: this.myMessage
}
}
})
var me = new Vue({
el: '#comp-ex'
})
<script>
輸出結果為：
<div id="comp-ex">
<span>qiqihaobenben qiqihaobenben</span>
</div>
(2)叫确、命名風格
HTML特性不區(qū)分大小寫跳芳，但是名字形式為 camelCase 的prop用作特性時，需要轉為 kebab-case(短橫線隔開)竹勉。在html中的屬性使用短橫線隔開飞盆，而在js的template中的標識使用的駝峰命名，可以參考上面的例子次乓。(3)吓歇、props的動態(tài)
上面的例子使用節(jié)點屬性方式向子組件傳遞數(shù)據(jù)，如果父組件的數(shù)據(jù)變化票腰，子組件并不會隨之變化城看，這就是其動態(tài)性，如果要綁定動態(tài)的值丧慈，應該使用 v-bind 指令析命，這樣每當父組件的數(shù)據(jù)變化時主卫，也會傳遞給子組件
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
動態(tài)和非動態(tài)這兩種傳遞方式在傳遞數(shù)字時是不同的逃默，如下：
<!-- 傳遞了一個字符串"1" -->
<comp some-prop="1"></comp>
<!-- 傳遞實際的數(shù)字1 -->
<comp v-bind:some-prop="1"></comp>
雖然html渲染的時候并不太區(qū)分字符串和數(shù)字，但是注意有這種區(qū)別簇搅。
(4)完域、單項數(shù)據(jù)流
prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件瘩将，但是不會反過來吟税。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應用的數(shù)據(jù)流難以理解。
注意：在 JavaScript 中對象和數(shù)組是引用類型姿现，指向同一個內存空間肠仪，如果 prop 是一個對象或數(shù)組，在子組件內部改變它會影響父組件的狀態(tài)备典。(5)异旧、prop驗證
本來不想說的，可是看文檔時怎么用怎么不對提佣，后來想通了吮蛹，所以就拿出來說一下。
看官方文檔可以知道拌屏，type 可以是下面原生構造器：String
Number
Boolean
Function
Object
Array
其中的除了String,其他的類型都需要動態(tài)綁定才能驗證正確潮针，否則得到的就是一水的String類型。
//js屬性驗證
props: {
myAge: {
type: [Number,Boolean,Object,Array,Function]
}
}
<!--以下都會報錯倚喂，Expected XXX, got String.-->
<my-component my-age="12"></my-component>
<my-component my-age="true"></my-component>
<my-component my-age="{}"></my-component>
<my-component my-age="[]"></my-component>
<my-component my-age="consoleOne"></my-component>
<!--正確的做法是用v-bind來綁定屬性-->
<my-component v-bind:my-age="12"></my-component>
...
...
另外每篷，default和required這兩個驗證規(guī)則，需要組件的屬性完全不存在時才會生效
//設置默認值
props: {
myName: {
default: 2
}
}
//設置必傳項
props: {
myName: {
required: true
}
}
<!--以下，不管是必傳項或者默認值都不會有效果-->
<my-component my-name="" ></my-component>
<!--只有這個屬性在組件上真的沒有焦读，才會觸發(fā)驗證效果-->
<my-component ></my-component>
以上带兜，當 prop 驗證失敗了，如果使用的是開發(fā)版本會拋出一條警告吨灭。
2刚照、自定義事件
- 首先：子組件可以用 this.$parent 訪問它的父組件，根實例的后代可以用 this.$root 訪問它喧兄，父組件有一個數(shù)組 this.$children 包含它所有的子元素无畔。
盡管可以訪問父鏈上任意的實例，不過子組件應當避免直接依賴父組件的數(shù)據(jù)吠冤。另外子組件中修改父組件的狀態(tài)是非常糟糕的浑彰，因為：
- 這讓父組件與子組件緊密地耦合
- 這樣的話，只看父組件很難理解父組件的狀態(tài)拯辙，因為它可能被任意子組件修改郭变！理想情況下，只有組件自己能修改它的狀態(tài)
父組件是使用 props 傳遞數(shù)據(jù)給子組件涯保，如果子組件要把數(shù)據(jù)傳遞回去诉濒，那就是自定義事件！ -
(1)使用v-on綁定自定義事件
每個 Vue 實例都實現(xiàn)了事件接口(Events interface)夕春，即：
父組件——使用 $on(eventName) 監(jiān)聽事件
子組件——使用 $emit(eventName) 觸發(fā)事件
下面的列子跟官網(wǎng)的幾乎一樣未荒，但是區(qū)別在于，是通過傳參來改變父組件的狀態(tài)的賦值及志。
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
var allTotal = {number: 0} //這個是統(tǒng)計兩個按鈕的點擊的次數(shù)片排，這樣就能直接賦給父組件
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0,
allCounter: allTotal
}
},
methods: {
increment: function () {
this.counter += 1;
this.allCounter.number += 1; // 準備給父組件的自定義事件方法傳參
this.$emit('increment',this.allCounter.number);
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function (value) {
this.total = value;
}
}
})
(2)給組件綁定原生事件
在某個組件的根元素上監(jiān)聽一個原生事件∷俪蓿可以使用 .native 修飾 v-on 率寡。這就是說所有的原生事件如果在組件的根元素上不加.native，vue會自動認為它是自定義事件(3)使用自定義事件的表單輸入組件
使用 v-model 來進行數(shù)據(jù)雙向綁定倚搬。牢記：這個指令僅僅是一個語法糖冶共。
<input v-model="something">
<!--上下兩種方式是等價的-->
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以在組件中使用時，它相當于下面的簡寫：
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
<!--改寫成語法糖如下-->
<custom-input v-model="something"></custom-input>
尤其注意潭枣，這個地方有點繞：如果是自定義的表單組件比默，并且父組件在加載這個表單組件時使用了v-model指令，那么作為子組件盆犁，接收到的prop應該是value而不是something命咐。
- (4)子組件的索引
<div id="parent">
<user-profile ref:profile></user-profile>
</div>
<script>
var parent = new Vue({el: '#parent'});
var child = parent.$refs.profile; // 可以得到子組件
</script>
3、內容分發(fā)
-
(1)編譯作用域
父組件模板的內容在父組件作用域內編譯谐岁；子組件模板的內容在子組件作用域內編譯醋奠。說白了榛臼，就是一眼看上去，在誰里面就是誰的窜司。
<div id="app">
<my-component v-show="display"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">{{msg}}</td>
</tr>
</table>
</template>
<script>
var my = Vue.extend({
template: '#myComponent',
data : function (){
return {
msg : '這是子組件',
display: false
}
}
})
var vm = new Vue({
el: '#app',
data: {
display: true
},
components: {
'myComponent': my
}
})
</script>
在my-component標簽上使用指令v-show="display"沛善，這個display數(shù)據(jù)是來源于Vue實例vm ，還是my-component組件呢塞祈？
答案是Vue實例
Vue實例vm設置的display是true金刁，所以展示出來
-
(2)單個Slot
下面的代碼在定義my-component組件的模板時，指定了一個<slot></slot>元素议薪。
<div id="app">
<my-component>
<h1>這是父組件的內容!</h1>
</my-component>
<my-component>
</my-component>
</div>
<template id="myComponent">
<div class="content">
<h2>這是一個子組件!</h2>
<slot>如果沒有分發(fā)內容尤蛮，則顯示slot中的內容</slot>
<p>Hello,Vue.js</p>
</div>
</template>
<script>
Vue.component('my-component', {
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
第一個<my-component>標簽有一段分發(fā)內容 <h1>這是父組件的內容!</h1>，渲染組件時顯示了這段內容斯议。
第二個<my-component>標簽則沒有产捞，渲染組件時則顯示了slot標簽中的內容。
單個slot
-
(3)具名slot
<slot> 元素可以用一個特殊的屬性 name 來配置如何分發(fā)內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素研儒。
<div id="app">
<my-component>
<div slot="header">
這是一個頭部
</div>
<p>neirong</p>
<p>neirong</p>
<div slot="footer">
這是一個底部
</div>
</my-component>
</div>
<template id="myComponent">
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
Vue.component('my-component', {
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
可以看出仍然可以**有一個匿名 slot **，它是默認 slot 看靠，作為找不到匹配的內容片段的備用插槽。如果沒有默認的 slot 焰雕，這些找不到匹配的內容片段將被拋棄衷笋。
-
(4)作用域插槽
作用域插槽是一種特殊類型的插槽芳杏，用作使用一個（能夠傳遞數(shù)據(jù)到）可重用模板替換已渲染元素矩屁。
數(shù)據(jù)傳遞，可重用爵赵，自然而然的想到循環(huán) - 基于官網(wǎng)給出一個完整的例子
<div id="app">
<my-awesome-list :items="items">
<template slot="item" scope="props">
<li>{{ props.text }}</li>
</template>
</my-awesome-list>
</div>
<script>
Vue.component('my-awesome-list',{
template: `<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
</slot>
</ul>`,
props: ['items']
})
var demo = new Vue({
el: '#app',
data: {
items: [
{text: 'aaaaa'},
{text: 'bbbbb'},
{text: 'ccccc'},
{text: 'ddddd'},
{text: 'eeeee'}
]
}
})
</script>
三吝秕、組件小貼士
-
(1)組件的命名
當注冊組件（或者 props）時，可以使用 kebab-case 空幻，camelCase 烁峭，或 TitleCase。但是秕铛，在 HTML 模版中约郁，請使用 kebab-case 形式：
// 在組件定義中
components: {
// 使用 kebab-case 形式注冊
'kebab-cased-component': { /* ... */ },
// register using camelCase
'camelCasedComponent': { /* ... */ },
// register using TitleCase
'TitleCasedComponent': { /* ... */ }
}
<!-- 在HTML模版中始終使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<title-cased-component></title-cased-component>
注意:當使用字符串模式時，可以不受 HTML 的 case-insensitive 限制但两。
待續(xù)……
生命周期
生命周期圖示
1鬓梅、生命周期的各階段
-
(1)beforeCreate
在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調用谨湘。 -
(2)created
實例已經(jīng)創(chuàng)建完成之后被調用绽快。在這一步芥丧，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算坊罢， watch/event 事件回調续担。然而，掛載階段還沒開始活孩，$el 屬性目前不可見物遇。 -
(3)beforeMount
在掛載開始之前被調用：相關的 render 函數(shù)首次被調用。該鉤子在服務器端渲染期間不被調用憾儒。 -
(3)mounted
el 被新創(chuàng)建的 vm.$el 替換挎挖，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素航夺，當 mounted 被調用時 vm.$el 也在文檔內蕉朵。該鉤子在服務器端渲染期間不被調用。 -
(4)beforeUpdate
數(shù)據(jù)更新時調用阳掐，發(fā)生在虛擬 DOM 重新渲染和打補丁之前始衅。
你可以在這個鉤子中進一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程缭保。
該鉤子在服務器端渲染期間不被調用汛闸。 -
(5)updated
由于數(shù)據(jù)更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子艺骂。
當這個鉤子被調用時诸老，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作钳恕。然而在大多數(shù)情況下别伏，你應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)忧额。
該鉤子在服務器端渲染期間不被調用厘肮。 -
(6)activated
keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用睦番。 -
(7)deactivated
keep-alive 組件停用時調用类茂。該鉤子在服務器端渲染期間不被調用。 -
(8)beforeDestroy
實例銷毀之前調用托嚣。在這一步巩检，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用示启。 -
(8)destroyed
Vue 實例銷毀后調用兢哭。調用后，Vue 實例指示的所有東西都會解綁定丑搔，所有的事件監(jiān)聽器會被移除厦瓢，所有的子實例也會被銷毀提揍。該鉤子在服務器端渲染期間不被調用。
2煮仇、實例方法
-
(1) vm.$mount( [elementOrSelector] )
手動地掛載一個未掛載的實例劳跃，返回值是實例自身。因而可以鏈式調用其它實例方法浙垫。
如果沒有提供 elementOrSelector 參數(shù)刨仑，模板將被渲染為文檔之外的的元素，并且你必須使用原生DOM API把它插入文檔中夹姥。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 創(chuàng)建并掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者杉武，在文檔之外渲染并且隨后掛載,這種方式不會替換#app
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
-
(2) vm-destroy()
完全銷毀一個實例。清理它與其它實例的連接辙售，解綁它的全部指令及事件監(jiān)聽器轻抱。觸發(fā) beforeDestroy 和 destroyed 的鉤子。
注意：在大多數(shù)場景中你不應該調用這個方法旦部。最好使用 v-if 和 v-for 指令以數(shù)據(jù)驅動的方式控制子組件的生命周期祈搜。 -
(3)vm.$nextTick( [callback] ) 涉及到Vue的異步更新隊列
將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它士八，然后等待 DOM 更新容燕。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上婚度。
應用上蘸秘，在組件內使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue 蝗茁，并且回調函數(shù)中的 this 將自動綁定到當前的 Vue 實例上：
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: 'not updated'
}
},
methods: {
updateMessage: function () {
this.message = 'updated'
console.log(this.$el.textContent) // => '沒有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
