Vue 2.0入門基礎知識之全局API
3.全局API
3-1. Vue.directive 自定義指令
Vue.directive用於自定義全局的指令
實例以下：php
1 <body>
2 <div id="app">
3 <p v-sq="color">{{message}}</p>
4 </div>
5 </body>
6 <script>
7 Vue.directive('sq', function (el, binding, vnode) {
8 el.style.color = binding.value;
9 });
10 var vm = new Vue({
11 el: "#app",
12 data: {
13 message: "前端工程師",
14 color: "red"
15 }
16 });
17 </script>
效果爲p標籤顯示爲紅色，directive指令中的參數1（實例中的‘sq’）能夠類比前篇文章內部指令的bind、on；參數2是一個回調函數，這個回調函數包含三個參數（el:即指令綁定的元素，實例中的el即爲p元素；binding:包含指令的相關信息，能夠經過console.log打印出來；vnode:即Vue編譯生成的虛擬節點。虛擬節點即vue2.0中引入的新功能，用js對象替代DOM節點，改進直接操做DOM代價大引起的性能問題）。
指令都是有生命週期的，一樣地，自定義指令有5個生命週期，分別是：bind、inserted、update、componentUpdated、unbind
3-2 Vue.extend 構造器的延伸
extend中文即延伸、擴展的意思。Vue.extend返回的便是一個「擴展實例構造器，並掛載到自定義元素上。
實例以下：前端
1 <body>
2 <div id="app">
3 <p class="gz"></p>
4 </div>
5 <p class="gz"></p>
6 </body>
7 <script>
8 var author=Vue.extend({
9 template:"<a>最終解釋權歸做者全部</a>"
10 })
11 new author().$mount('.gz');
12 </script>
p標籤會替換成template的值，但僅限於第一個p標籤，由於只掛載了一次，實例中用的是class，將其換成id或標籤一樣適用。
3-3 Vue.set全局操做
Vue.set的做用就是在構造器外部操做構造器內部的數據、屬性或者方法。Vue.set存在的意義是彌補js語言的缺陷，由於Vue不能自動檢測數組的兩種變更：1.利用索引設置一個元素；2.修改數組的長度。用Vue.set更新數據時，依次傳入三個參數①數組名稱②索引③元素
3-4 Vue的生命週期
Vue的生命週期即鉤子函數。包括10共，按照順序依次爲：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDastroy、destroyed。詳細的結構圖可參考vue官網的圖例介紹。
3-5 Template模板
Template模板大體有三種寫法：
1.相似前面講到Vue.extend掛載時的template寫法，但不是雙引號包括內容，而是``（英文tab鍵）
2.利用template模板：<template></template>。這個相似於Backbone中模板的寫法
3.在script標籤中寫入模板內容，不過此時type爲"x-tempate".。這種寫法能夠將模板從外部導入。
另外須要強調一點、vue2.0中規定模板內容必需要要有一個根元素，通常地用div包裹住整個模板內容。
3-6 component組件
component組件本質上就是自定義的標籤。component組件分爲全局化註冊組件和局部註冊組件，二者的不一樣之處在於使用的範圍（類比於全局變量和局部變量）。
3-6-1 component組件的註冊
1.全局化註冊組件
實例以下：vue
1 <body>
2 <div id="app">
3 <plp></plp>
4 </div>
5 </body>
6 <script>
7 Vue.component('plp', {
8 template: `<a>最終解釋權歸做者全部</a>`
9 })
10 var vm = new Vue({
11 el: "#app"
12 })
13 </script>
2.局部註冊組件
實例以下：node
1 <body>
2 <div id="app">
3 <plp></plp>
4 </div>
5 </body>
6 <script>
7 var vm = new Vue({
8 el: "#app",
9 components: {
10 'plp': {
11 template: `<p>最終解釋權歸做者全部</p>`
12 }
13 }
14 })
15 </script>
3-6-2 component組件的props屬性
component組件的props屬性就是用來設置和獲取標籤上的屬性值。
實例以下：數組
1 <body>
2 <div id="app">
3 <plp city="YiChang"></plp>
4 </div>
5 </body>
6 <script>
7 var vm = new Vue({
8 el: "#app",
9 components: {
10 'plp': {
11 props:['city'],
12 template: `<p>I like {{city}}</p>`
13 }
14 }
15 })
16 </script>
首先component組件的props選項經過['city']獲取自定義標籤該屬性的值，而後在tepmlate中經過{{city}}插值的方法設置屬性值。須要注意的一點是自定義標籤的屬性取值儘可能避免使用'-',若有必要使用小駝峯命名，能夠聯想到經過原生JS設置元素的顏色;elements.style.backgroundColor,而不是element.style.background-color
component組件傳值，使用:bind綁定便可。
3-6-3 component父子組件
component父子組件就是在一個component組件裏再寫一個component組件。
實例以下：前端工程師
1 <body>
2 <div id="app">
3 <plp :city="like"></plp>
4 </div>
5 </body>
6 <script>
7 var vm = new Vue({
8 el: "#app",
9 data: {
10 like: 'YiChang'
11 },
12 components: {
13 'plp': {
14 props: ['city'],
15 template: `<p>I like {{city}} <ppl></ppl></p>`,
16 components: {
17 'ppl': {
18 template: `<span style="color:red">very much!</span>`
19 }
20 }
21 }
22 }
23 })
24 </script>
實例中涉及到component組件嵌套，在plp組件中嵌套組件ppl。固然實際開發中組件的嵌套遠比這個複雜，必要的時候能夠在構造器外部定義聲明局部component組件。
3-6-4 component標籤
<component></component>標籤是Vue框架自定義的標籤，它的用途就是能夠動態綁定咱們的組件，根據數據的不一樣更換不一樣的組件。
好啦，關於Vue的全局API就介紹到這裏，下一篇關於Vue的基礎知識，咱們聊聊Vue2.0的選項以及實例內置組件~
轉載於猿2048:→《Vue 2.0入門基礎知識之全局API》app
- 1. Vue入門基礎知識
- 2. Vue入門基礎（全局組件）
- 3. vue總結----vue知識體系之基礎入門篇
- 4. Vue 基礎知識之 Vue.extend
- 5. NLP入門之基礎知識學習
- 6. STM32入門之基礎知識
- 7. MySql入門基礎知識
- 8. JSON入門基礎知識
- 9. Lucene入門——基礎知識
- 10. MySQL入門基礎知識
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • PHP 超級全局變量 - PHP教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue入門基礎知識
- 2. Vue入門基礎（全局組件）
- 3. vue總結----vue知識體系之基礎入門篇
- 4. Vue 基礎知識之 Vue.extend
- 5. NLP入門之基礎知識學習
- 6. STM32入門之基礎知識
- 7. MySql入門基礎知識
- 8. JSON入門基礎知識
- 9. Lucene入門——基礎知識
- 10. MySQL入門基礎知識