Vue基礎（環境配置、內部指令、全局API、選項、內置組件）

時間 2019-11-06

標籤 vue 基礎環境配置內部指令全局 api 選項內置組件简体版

原文原文鏈接

一、環境配置

安裝VsCode
安裝包管理工具：直接下載 NodeJS 進行安裝便可，NodeJS自帶 Npm 包管理工具，下載地址：https://nodejs.org/en/download/
安裝完成後在命令行執行如下命令查看npm包管理器版本
```
npm -v
```
npm中文文檔：https://www.npmjs.cn/

配置淘寶鏡像

npm install cnpm -g --registry=https://registry.npm.taobao.org

而後執行 cnpm -v 查看版本信息javascript

E:\視頻\VUE>cnpm -v
cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.5.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.15.0 (D:\Program Files\nodejs\node.exe)
npminstall@3.20.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 6.1.7601
registry=https://registry.npm.taobao.org

下載vue.js(包含完整的警告和調試模式)與vue.min.js(刪除了警告，30.96KB min+gzip)
安裝 live-server 做爲服務器
用npm進行全局安裝（-g參數）
```
cnpm install -g live-server
```
而後在任何一個Html頁面文件路徑下執行 live-server 就會打開
css

而後執行 cnpm init 進行初始化

E:\視頻\VUE>cnpm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue) vue
version: (1.0.0) 1.0.0
description: Vue Demo
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\視頻\VUE\package.json:

{
  "name": "vue",
  "version": "1.0.0",
  "description": "Vue Demo",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

View Code

會在主文件夾下生成 package.json 文件來存儲初始化信息配置
package.json：html

{
  "name": "vue",
  "version": "1.0.0",
  "description": "Vue Demo",
  "main": "index.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

View Code

二、Vue內部指令

2.一、hello world

編寫第一個HelloWorld代碼：前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Helloworld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello Vue!!!!"
            }
        })
    </script>
</body>

</html>

View Code

2.二、v-if v-else v-show 指令

v-if的使用vue

v-if:是vue 的一個內部指令，指令用在咱們的html中。
v-if用來判斷是否加載html的DOM，好比咱們模擬一個用戶登陸狀態，在用戶登陸後現實用戶名稱。
關鍵代碼：java
```
<div v-if="isLogin">你好</div>
```
v-show的使用
調整css中display屬性，DOM已經加載，只是CSS控制沒有顯示出來。node
```
<div v-show="isLogin">你好</div>
```

完整html代碼：jquery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if&v-else&v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好v-if</div>
        <div v-else>你好v-else</div>
        <div v-show="isLogin">你好v-show</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isLogin:false
            }
        })
    </script>
</body>

</html>

View Code

v-if 和v-show的區別：git
- v-if：判斷是否加載，能夠減輕服務器的壓力，在須要時加載。
- v-show：調整css dispaly屬性，可使客戶端操做更加流暢。

2.三、v-for指令：解決模板循環問題

模板寫法

 <li v-for="item in items">
        {{item}}
</li>

js寫法

var app=new Vue({
     el:'#app',
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

View Code

完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-for</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-for 實例</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(student,index) in srotStudents">
                {{index+1}}:{{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                items: [20, 23, 18, 7, 32, 19, 54, 56, 41],
                students: [{
                        name: "JS",
                        age: 33
                    },
                    {
                        name: "Panda",
                        age: 28
                    },
                    {
                        name: "Panpan",
                        age: 23
                    },
                    {
                        name: "King",
                        age: 14
                    },
                ]
            },
            computed: {
                sortItems: function () {
                    return this.items.sort(SortNumber);
                },
                srotStudents: function () {
                    return sortByKey(this.students,'age')
                }
            },
        })

        function SortNumber(a, b) {
            return a - b;
        }

        //數組對象方法排序:
        function sortByKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        }
    </script>
</body>

</html>

View Code

2.四、v-text & v-html

咱們已經會在html中輸出data中的值了，咱們已經用的是{{xxx}},這種狀況是有弊端的，就是當咱們網速很慢或者javascript出錯時，會暴露咱們的{{xxx}}。Vue給咱們提供的 v-text ,就是解決這個問題的。咱們來看代碼：web

<span>{{ message }}</span>=<span v-text="message"></span><br/>

若是在javascript中寫有html標籤，用v-text是輸出不出來的，這時候咱們就須要用 v-html 標籤了。

<span v-html="msgHtml"></span>

雙大括號會將數據解釋爲純文本，而非HTML。爲了輸出真正的HTML，你就須要使用v-html 指令。須要注意的是：在生產環境中動態渲染HTML是很是危險的，由於容易致使XSS攻擊。因此只能在可信的內容上使用v-html，永遠不要在用戶提交和可操做的網頁上使用。完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-text & v-html 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-text & v-html 實例</h1>
    <hr>
    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
        <br>
        <span>{{dodo}}</span>
        <span v-html="dodo"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello Vue!",
                dodo:"<h2>hello Vue!</h2>" 
            }
        })
    </script>
</body>

</html>

View Code

2.五、v-on：綁定事件監聽器

使用綁定事件監聽器，編寫一個加分減分的程序。

程序代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on 實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-on 實例</h1>
    <hr>
    <div id="app">
        本廠比賽得分:{{score}}
        <p>
            <button v-on:click="scoreIncrease">加分</button>
            <button @click="scoreDecrease">減分</button>
            <br />
            <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                score: 0,
                score2: 1
            },
            methods: {
                scoreIncrease: function () {
                    this.score++;
                },
                scoreDecrease: function () {
                    if (this.score > 0) {
                        this.score--;
                    }
                },
                onEnter: function () {
                    this.score +=parseInt(this.score2);
                }
            }

        })
    </script>
</body>

</html>

View Code

咱們的v-on 還有一種簡單的寫法，就是用@代替。

<button @click="jianfen">減分</button>

咱們除了綁定click以外，咱們還能夠綁定其它事件，好比鍵盤迴車事件v-on:keyup.enter,如今咱們增長一個輸入框，而後綁定回車事件，回車後把文本框裏的值加到咱們的count上。綁定事件寫法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代碼：

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

由於文本框的數字會默認轉變成字符串，因此咱們須要用 parseInt() 函數進行整數轉換。

你也能夠根據鍵值表來定義鍵盤事件：

2.六、v-model指令

v-model指令，我理解爲綁定數據源。就是把數據綁定在特定的表單元素上，能夠很容易的實現雙向數據綁定。

咱們來看一個最簡單的雙向數據綁定代碼
html文件：

<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

javascript代碼：

var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

修飾符
- .lazy：取代 imput 監聽 change 事件。
- .number：輸入字符串轉爲數字。
- .trim：輸入去掉首尾空格。

文本區域加入數據綁定

<textarea cols="30" rows="10" v-model="message"></textarea>

多選按鈕綁定一個值

<h3>多選按鈕綁定一個值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

多選綁定一個數組

<h3>多選綁定一個數組</h3>
<p>
    <input type="checkbox" id="JS" value="JS" v-model="web_Names">
    <label for="JS">JS</label><br />
    <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
    <label for="Panda">Panda</label><br />
    <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
    <label for="PanPan">PanPan</label>
    <p>{{web_Names}}</p>
</p>

單選按鈕綁定

<h3>單選按鈕綁定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>{{sex}}</p>

完整代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>v-model 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-model 實例</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model：<input type="text" v-model="message"></p>
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
        <p>v-model.number：<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多選按鈕綁定一個值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>
        <hr>
        <h3>多選綁定一個數組</h3>
        <p>
            <input type="checkbox" id="JS" value="JS" v-model="web_Names">
            <label for="JS">JS</label><br />
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="Panda">Panda</label><br />
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="PanPan">PanPan</label>
            <p>{{web_Names}}</p>
        </p>
        <hr>
        <h3>單選按鈕綁定</h3>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="two">女</label>
        <p>{{sex}}</p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello Vue!!!!",
                isTrue: true,
                web_Names: [],
                sex:"男"
            }
        })
    </script>
</body>

</html>

View Code

2.七、v-bind 指令

v-bind是處理HTML中的標籤屬性的，例如

就是一個標籤，也是一個標籤，咱們綁定上的src進行動態賦值。

html文件：

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

在html中咱們用v-bind:src=」imgSrc」的動態綁定了src的值，這個值是在vue構造器裏的data屬性中找到的。

js文件：

var app = new Vue({
    el: '#app',
    data: {
        imgSrc: "https://www.baidu.com/img/baidu_jgylogo3.gif",
    }
})

咱們在data對象在中增長了imgSrc屬性來供html調用。

v-bind 縮寫

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

綁定CSS樣式

在工做中咱們常用v-bind來綁定css樣式：

在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。

直接綁定class樣式

<div :class="className">一、綁定classA</div>

綁定classA並進行判斷，在isOK爲true時顯示樣式，在isOk爲false時不顯示樣式。
```
<div :class="{classA:isOk}">二、綁定class中的判斷</div>
```

綁定class中的數組

<div :class="[classA,classB]">三、綁定class中的數組</div>

綁定class中使用三元表達式判斷

<div :class="isOk?classA:classB">四、綁定class中的三元表達式判斷</div>

綁定style

<div :style="{color:red,fontSize:font}">五、綁定style</div>

用對象綁定style樣式

<div :style="styleObject">六、用對象綁定style樣式</div>

var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

2.八、其餘內部指令(v-pre & v-cloak & v-once)

v-pre指令
在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。
```
<div v-pre>{{message}}</div>
```
這時並不會輸出咱們的message值，而是直接在網頁中顯示{{message}}
v-cloak指令
在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一塊兒使用，
```
[v-cloak] {
  display: none;
}
```
```
<div v-cloak>
  {{ message }}
</div>
```
v-once指令
在第一次DOM時進行渲染，渲染完成後視爲靜態內容，跳出之後的渲染過程。
```
<div v-once>第一次綁定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>
```

三、全局API

什麼是全局API？

全局API並不在構造器裏，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，好比咱們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給咱們的API函數來定義新的功能。

3.一、Vue.directive自定義指令

在自定義指令前咱們寫一個小功能，在頁面上有一個數字爲10，數字的下面有一個按鈕，咱們每點擊一次按鈕後，數字加1.

咱們這裏使用 Vue.directive( ) 本身定義一個全局的指令

Vue.directive('jsdirective',function(el,binding,vnode){
        el.style='color:'+binding.value;
});

自定義指令中傳遞的三個參數
- el: 指令所綁定的元素，能夠用來直接操做DOM。
- binding: 一個對象，包含指令的不少信息。
- vnode: Vue編譯生成的虛擬節點。
自定義指令的生命週期
自定義指令有五個生命週期（也叫鉤子函數），分別是 bind,inserted,update,componentUpdated,unbind
- bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。
- inserted:被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）
- update:被綁定於元素所在的模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。
- componentUpdated:被綁定元素所在模板完成一次更新週期時調用。
- unbind:只調用一次，指令與元素解綁時調用。
```
bind:function(){//被綁定
     console.log('1 - bind');
},
inserted:function(){//綁定到節點
      console.log('2 - inserted');
},
update:function(){//組件更新
      console.log('3 - update');
},
componentUpdated:function(){//組件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解綁
      console.log('5 - unbind');
}
```

3.二、Vue.extend構造器的延伸

Vue.extend 返回的是一個「擴展實例構造器」,也就是預設了部分選項的Vue實例構造器。常常服務於Vue.component用來生成組件，能夠簡單理解爲當在模板中遇到該組件名稱做爲標籤的自定義元素時，會自動調用「擴展實例構造器」來生產組件實例，並掛載到自定義元素上。

因爲咱們尚未學習Vue的自定義組件，因此咱們先看跟組件無關的用途。

自定義無參數標籤

咱們想象一個需求，需求是這樣的，要在博客頁面多處顯示做者的網名，並在網名上直接有連接地址。咱們但願在html中只須要寫，這和自定義組件很像，可是他沒有傳遞任何參數，只是個靜態標籤。

咱們的Vue.extend該登場了，咱們先用它來編寫一個擴展實例構造器。代碼以下：
html:

<author></author>

javascript:

var authorExtend=Vue.extend({
    template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
    data() {
        //data()=data:function(){}
        return {
            authorName:"進擊的辣條",
            authorUrl:"https://www.cnblogs.com/wyt007"
        }
    },
})

這時html中的標籤仍是不起做用的，由於擴展實例構造器是須要掛載的，咱們再進行一次掛載。
還能夠經過HTML標籤上的id或者class來生成擴展實例構造器，Vue.extend裏的代碼是同樣的，只是在掛載的時候，咱們用相似jquery的選擇器的方法，來進行掛載就能夠了。

new authorExtend().$mount('author');

所有代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue.extend 擴展實例構造器</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue.extend 擴展實例構造器</h1>
    <hr>
    <author></author>

    <script type="text/javascript">
        var authorExtend=Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data() {
                //data()=data:function(){}
                return {
                    authorName:"進擊的辣條",
                    authorUrl:"https://www.cnblogs.com/wyt007"
                }
            },
        })

        new authorExtend().$mount('author');
    </script>
</body>

</html>

View Code

效果演示：

3.三、Vue.set全局操做

Vue.set 的做用就是在構造器外部操做構造器內部的數據、屬性或者方法。好比在vue構造器內部定義了一個count爲1的數據，咱們在構造器外部定義了一個方法，要每次點擊按鈕給值加1.就須要用到 Vue.set

引用構造器外部數據
什麼是外部數據，就是不在Vue構造器裏裏的data處聲明，而是在構造器外部聲明，而後在data處引用就能夠了。外部數據的加入讓程序更加靈活，咱們能夠在外部獲取任何想要的數據形式，而後讓data引用。看一個簡單的代碼：
```
//在構造器外部聲明數據
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部數據
    data:outData
})
```
在外部改變數據的三種方法
- 用Vue.set改變
```
function add(){
       Vue.set(outData,'count',4);
}
```
- 用Vue對象的方法添加
```
app.count++;
```
- 直接操做外部數據
```
outData.count++;
```
  其實這三種方式均可以操做外部的數據，Vue也給咱們增長了一種操做外部數據的方法。
爲何要有Vue.set的存在?

因爲Javascript的限制，Vue不能自動檢測如下變更的數組。
- 當你利用索引直接設置一個項時，vue不會爲咱們自動更新。
- 當你修改數組的長度時，vue不會爲咱們自動更新。

所有代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue.set 全局操做</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue.set 全局操做</h1>
    <hr>
    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
    <p><button onclick="add()">add</button></p>

    <script type="text/javascript">
        function add(params) {
            //Vue.set(outData, "count",++outData.count);
            //app.count++;
            //outData.count++;

            //outData.arr[1]="ddd";//不行，js天生的弱點
            Vue.set(outData.arr, 1,"dd");
        }


        var outData = {
            count: 1,
            goods: "car",
            arr:["aaa","bbb","ccc"]
        }

        var app = new Vue({
            el: '#app',
            data: outData
        })
    </script>
</body>

</html>

View Code

效果展現：

3.四、Vue的生命週期（鉤子函數）

Vue一共有10個生命週期函數，咱們能夠利用這些函數在vue的每一個階段都進行操做數據或者改變內容。

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue生命週期</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue生命週期</h1>
    <hr>
    <div id="app">
        {{count}}
        <p><button @click="add">Add</button></p>
    </div>

    <button onclick="app.$destroy()">銷燬</button>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                count: 1
            },
            methods: {
                add() {
                    this.count++;
                }
            },

            beforeCreate: function () {
                console.log('1-beforeCreate 初始化以前');
            },
            created: function () {
                console.log('2-created 建立完成');
            },
            beforeMount: function () {
                console.log('3-beforeMount 掛載以前');
            },
            mounted: function () {
                console.log('4-mounted 掛載以後');
            },
            beforeUpdate: function () {
                console.log('5-beforeUpdate 數據更新前');
            },
            updated: function () {
                console.log('6-updated 被更新後');
            },
            activated: function () {
                console.log('7-activated');
            },
            deactivated: function () {
                console.log('8-deactivated');
            },
            beforeDestroy: function () {
                console.log('9-beforeDestroy 銷燬以前');
            },
            destroyed: function () {
                console.log('10-destroyed 銷燬以後')
            }
        })
    </script>
</body>

</html>

View Code

效果演示：

3.五、Template 製做模版

直接寫在選項裏的模板
直接在構造器裏的template選項後邊編寫。這種寫法比較直觀，可是若是模板html代碼太多，不建議這麼寫。
```
var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是選項模板</h1>
     `
})
```
這裏須要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。

寫在template標籤裏的模板
這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也能夠製做頁面

<template id="dd2">
    <h2 style="color:red">我是Template標籤模板</h2>
</template>


<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "hello world!"
        },
        template:"#dd2"
    })
</script>

寫在script標籤裏的模板
這種寫模板的方法，可讓模板文件從外部引入。

<script type="x-template" id="dd3">
    <h2 style="color:red">我是script標籤模板</h2>
</script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "hello world!"
        },
        template: "#dd3"
    })
</script>

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Template 三種寫法</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Template 三種寫法</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <template id="dd2">
        <h2 style="color:red">我是Template標籤模板</h2>
    </template>

    <script type="x-template" id="dd3">
        <h2 style="color:red">我是script標籤模板</h2>
    </script>


    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello world!"
            },
            //template: `<h2 style="color:red">我是選項模板</h2>`
            //template:"#dd2"
            template: "#dd3"
        })
    </script>
</body>

</html>

View Code

運行效果：

3.六、Component 初識組件

全局化註冊組件
全局化就是在構造器的外部用Vue.component來註冊，咱們註冊如今就註冊一個的組件來體驗一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component-1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>component-1</h1>
    <hr>
    <div id="app">
        <jscomponent></jsComponent>
        <panda></panda>
    </div>

    <script type="text/javascript">
        Vue.component('jscomponent', { //組件名稱必須所有小寫 我是豬，調試了半天
            template: `<div style="color:red">我是全局的自定義jscomponent組件</div>`
        })

        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

View Code

咱們在javascript裏註冊了一個組件，在HTML中調用了他。這就是最簡單的一個組件的編寫方法，而且它能夠放到多個構造器的做用域裏。

局部註冊組件局部
局部註冊組件局部註冊組件和全局註冊組件是向對應的，局部註冊的組件只能在組件註冊的做用域裏進行使用，其餘做用域使用無效。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component-1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>component-1</h1>
    <hr>
    <div id="app">
        <jscomponent></jsComponent>
        <panda></panda>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            components: { //局部組件能夠定義多個，因此使用components,全局組件只能一個一個定義，因此使用component
                "panda": {
                    template: `<div style="color:green">我是局部的自定義panda組件</div>`
                }
            }
        })
    </script>
</body>

</html>

View Code

從代碼中你能夠看出局部註冊其實就是寫在構造器裏，可是你須要注意的是，構造器裏的components 是加s的，而全局註冊是不加s的。

組件和指令的區別
組件註冊的是一個標籤，而指令註冊的是已有標籤裏的一個屬性。在實際開發中咱們仍是用組件比較多，指令用的比較少。由於指令看起來封裝的沒那麼好，這只是我的觀點。

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component-1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>component-1</h1>
    <hr>
    <div id="app">
        <jscomponent></jsComponent>
        <panda></panda>
    </div>

    <script type="text/javascript">
        Vue.component('jscomponent', { //組件名稱必須所有小寫 我是豬，調試了半天
            template: `<div style="color:red">我是全局的自定義jscomponent組件</div>`
        })

        var app = new Vue({
            el: '#app',
            components: { //局部組件能夠定義多個，因此使用components,全局組件只能一個一個定義，因此使用component
                "panda": {
                    template: `<div style="color:green">我是局部的自定義panda組件</div>`
                }
            }
        })
    </script>
</body>

</html>

View Code

效果演示：

3.七、Component 組件props 屬性設置

props選項就是設置和獲取標籤上的屬性值的，例如咱們有一個自定義的組件,這時咱們想給他加個標籤屬性寫成意思就是熊貓來自中國，固然這裏的China能夠換成任何值。定義屬性的選項是props。

定義屬性並獲取屬性值
定義屬性咱們須要用props選項，加上數組形式的屬性名稱，例如：props:[‘here’]。在組件的模板裏讀出屬性值只須要用插值的形式，例如{{ here }}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-2</title>
</head>
<body>
    <h1>component-2</h1>
    <hr>
    <div id="app">
      <panda here="China"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            components:{
                "panda":{
                    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
                    props:['here']
                }
            }
        })
    </script>
</body>
</html>

View Code

上面的代碼定義了panda的組件，並用props設置了here的屬性值，在here屬性值裏傳遞了China給組件。最後輸出的結果是紅色字體的Panda from China.

屬性中帶’-‘的處理方式

咱們在寫屬性時常常會加入’-‘來進行分詞，好比：，那這時咱們在props裏若是寫成props:[‘form-here’]是錯誤的，咱們必須用小駝峯式寫法props:[‘formHere’]。

html文件：
```
<panda from-here="China"></panda>
```
javascript文件：
```
var app=new Vue({
    el:'#app',
    components:{
        "panda":{
            template:`<div style="color:red;">Panda from {{ here }}.</div>`,
            props:['fromHere']
        }
    }
})
```
PS：由於這裏有坑，因此仍是少用-爲好

在構造器裏向組件中傳值

把構造器中data的值傳遞給組件，咱們只要進行綁定就能夠了。就是咱們第一季學的v-bind:xxx.

咱們直接看代碼:

Html文件：

<panda :from-here="message"></panda>

javascript文件：

var app = new Vue({
    el: '#app',
    data:{
        message:"China"
    },
    components: { //局部組件能夠定義多個，因此使用components,全局組件只能一個一個定義，因此使
        "panda": {
            template: `<div style="color:green">Panda from {{fromHere}}</div>`,
            props:["fromHere"]
        }
    }
})

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component props 屬性設置</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>component props 屬性設置</h1>
    <hr>
    <div id="app">
        <panda :from-here="message"></panda>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data:{
                message:"China"
            },
            components: { //局部組件能夠定義多個，因此使用components,全局組件只能一個一個定義，因此使用component
                "panda": {
                    template: `<div style="color:green">Panda from {{fromHere}}</div>`,
                    props:["fromHere"]
                }
            }
        })
    </script>
</body>

</html>

View Code

效果演示：

3.八、Component 父子組件關係

在實際開發中咱們常常會遇到在一個自定義組件中要使用其餘自定義組件，這就須要一個父子組件關係。

構造器外部寫局部註冊組件

上面咱們都把局部組件的編寫放到了構造器內部，若是組件代碼量很大，會影響構造器的可讀性，形成拖拉和錯誤。

咱們把組件編寫的代碼放到構造器外部或者說單獨文件。

咱們須要先聲明一個對象,對象裏就是組件的內容。
```
var pandaComponent = {
    template: `<div style="color:red">Panda from China</p></div>`
};
```
聲明好對象後在構造器裏引用就能夠了。
```
var app = new Vue({
    el: '#app',
    components: { "panda": pandaComponent, }
})
```
html中引用
```
<div id="app">
    <panda></panda>
</div>
```

父子組件的嵌套
咱們先聲明一個父組件，好比叫jspang，而後裏邊咱們加入一個city組件，咱們來看這樣的代碼如何寫。
示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component-3 父子組件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>component-3 父子組件</h1>
    <hr>
    <div id="app">
        <panda></panda>
        <city></city>
    </div>

    <script type="text/javascript">
        var cityComponent = {//根據加載順序，要先寫子組件，否則會報Unknown custom element: <city> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
            template: `<div style="color:green">SiChuan of China</div>`,
        };

        var pandaComponent = {
            template: `
            <div style="color:red">
            <p>Panda from China</p>
            <city></city>
            </div>
            `,
            components: {
                "city": cityComponent
            }
        };

        var app = new Vue({
            el: '#app',
            components: {
                "panda": pandaComponent,
                "city": cityComponent,
            }
        })
    </script>
</body>

</html>

View Code

效果演示：

3.九、Component 標籤

標籤是Vue框架自定義的標籤，它的用途就是能夠動態綁定咱們的組件，根據數據的不一樣更換不一樣的組件。

咱們先在構造器外部定義三個不一樣的組件，分別是componentA,componentB和componentC.

var componentA = {
    template: `<div style="color:red">I'm componentA.</div>`
}
var componentB = {
    template: `<div style="color:green">I'm componentB.</div>`
}
var componentC = {
    template: `<div style="color:pink">I'm componentC.</div>`
}

咱們在構造器的components選項里加入這三個組件。

var app = new Vue({
    el: '#app',
    data: {
        who: "componentA"
    },
    components: { "componentA": componentA,
        "componentB": componentB,
        "componentC": componentC, },
    methods: {
        changeComponent: function () {
            if (this.who == "componentA")
                this.who = "componentB";
            else if (this.who == "componentB")
                this.who = "componentC";
            else
                this.who = "componentA";
        }
    },
})

咱們在html裏插入component標籤，並綁定who數據，根據who的值不一樣，調用不一樣的組件。
```
<component :is="who"></component>
```

這就是咱們的組件標籤的基本用法。咱們提升如下，給頁面加個按鈕，每點如下更換一個組件。

<div id="app">
    <component :is="who"></component>
    <button @click="changeComponent">changeComponent</button>
</div>

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>component-4 標籤</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>component-4 標籤</h1>
    <hr>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>

    <script type="text/javascript">
        var componentA = {
            template: `<div style="color:red">I'm componentA.</div>`
        }

        var componentB = {
            template: `<div style="color:green">I'm componentB.</div>`
        }

        var componentC = {
            template: `<div style="color:pink">I'm componentC.</div>`
        }
        var app = new Vue({
            el: '#app',
            data: {
                who: "componentA"
            },
            components: {
                "componentA": componentA,
                "componentB": componentB,
                "componentC": componentC,
            },
            methods: {
                changeComponent: function () {
                    if (this.who == "componentA")
                        this.who = "componentB";
                    else if (this.who == "componentB")
                        this.who = "componentC";
                    else
                        this.who = "componentA";
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現：

四、選項

選項就是在Vue構造器裏的配置功能的前綴（Vue已經給咱們定義好了），Vue有不少選項，咱們將在這一級教程中一一介紹。

4.一、propsData Option 全局擴展的數據傳遞

propsData 不是和屬性有關，他用在全局擴展時進行傳遞數據。實際咱們並不推薦用全局擴展的方式做自定義標籤，咱們學了組件，徹底可使用組件來作，這裏只是爲了演示propsData的用法。

擴展代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>PropsData Option Demo</title>
</head>
<body>
    <h1>PropsData Option Demo</h1>
    <hr>
    <header></header>
    <script type="text/javascript">
       var  header_a = Vue.extend({
           template:`<p>{{message}}</p>`,
           data:function(){
               return {
                   message:'Hello,I am Header'
               }
           }
       }); 
       new header_a().$mount('header');
    </script>
</body>
</html>

View Code

propsData傳遞數據
擴展標籤已經作好了，這時咱們要在掛載時傳遞一個數字過去，咱們就用到了propsData。咱們用propsData三步解決傳值：
1. 在全局擴展里加入props進行接收。propsData:{a:1}
2. 傳遞時用propsData進行傳遞。props:[‘a’]
3. 用插值的形式寫入模板。{{ a }}

propsData代碼：

var  header_a = Vue.extend({
    template:`<p>{{message}}-{{a}}</p>`,
    data:function(){
        return {
            message:'Hello,I am Header'
        }
    },
    props:['a']
}); 
new header_a({propsData:{a:1}}).$mount('header');

View Code

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>propsData Option</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>propsData Option</h1>
    <hr>
    <header></header>

    <script type="text/javascript">
        var header_a = Vue.extend({
            template: `<p>{{message}}-{{a}}</p>`,
            data() {
                return {
                    message: "Hello , I am header!"
                }
            },
            props:['a']
        })

        new header_a({propsData:{a:1}}).$mount("header");
    </script>
</body>

</html>

View Code

效果展現：

總結：propsData在實際開發中咱們使用的並很少，咱們在後邊會學到Vuex的應用，他的做用就是在單頁應用中保持狀態和數據的。

4.二、computed Option 計算選項

computed 的做用主要是對原數據進行改造輸出。改造輸出：包括格式的編輯，大小寫轉換，順序重排，添加符號……。

4.2.一、格式化輸出結果

咱們先來作個讀出價格的例子：咱們讀書的原始數據是price:100 可是咱們輸出給用戶的樣子是（￥100元）。

主要的javascript代碼：

computed: {
    newPrice:function(){
        return "￥"+this.price+"元";
    }
},

所有代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed option</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        {{newPrice}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                price:100
            },
            computed: {
                newPrice:function(){
                    return "￥"+this.price+"元";
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現：

如今輸出的結果就是：￥100元。

4.2.二、用計算屬性反轉數組

例如：咱們獲得了一個新聞列表的數組，它的順序是安裝新聞時間的順序正序排列的，也就是早反生的新聞排在前面。這是反人類的，咱們須要給他反轉。這時咱們就能夠用到咱們的計算屬性了。沒有排序的新聞列表，是安裝日期正序排列的。

var newsList=[
    {title:'香港或就「裝甲車被扣」事件追責 起訴涉事運輸公司',date:'2017/3/10'},
    {title:'日本第二大準航母服役 外媒：針對中國潛艇',date:'2017/3/12'},
    {title:'中國北方將有明顯雨雪降溫天氣 南方陰雨持續',date:'2017/3/13'},
    {title:'起底「最短命副市長」：不到40天落馬，全家被查',date:'2017/3/23'},
];

咱們但願輸出的結果：

起底「最短命副市長」：不到40天落馬，全家被查-2017/3/23
中國北方將有明顯雨雪降溫天氣南方陰雨持續-2017/3/13
日本第二大準航母服役外媒：針對中國潛艇-2017/3/12
香港或就「裝甲車被扣」事件追責起訴涉事運輸公司-2017/3/10 咱們的在computed裏的javascript代碼：咱們用js原生方法給數組做了反轉。

computed:{
    reverseNews:function(){
        return this.newsList.reverse();
    }
}

所有代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>computed option</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ol>
            <li v-for="item in reverseNews">{{item.title}}-{{item.date}}</li>
        </ol>
    </div>

    <script type="text/javascript">
        var newsList = [{
                title: '香港或就「裝甲車被扣」事件追責 起訴涉事運輸公司',
                date: '2017/3/10'
            },
            {
                title: '日本第二大準航母服役 外媒：針對中國潛艇',
                date: '2017/3/12'
            },
            {
                title: '中國北方將有明顯雨雪降溫天氣 南方陰雨持續',
                date: '2017/3/13'
            },
            {
                title: '起底「最短命副市長」：不到40天落馬，全家被查',
                date: '2017/3/23'
            },
        ];

        var app = new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList: newsList
            },
            computed: {
                newPrice: function () {
                    return "￥" + this.price + "元";
                },
                reverseNews: function () {
                    return this.newsList.reverse();
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現：

4.三、Methods Option 方法選項

咱們仍是複習一下最簡單的使用方法，一個數字，每點擊一下按鈕加1.（作過不少次了，大家能夠先不看代碼和視頻本身試着寫一下）

<!DOCTYPE html>
<html lang="en">

<head>
    <title>methods options</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods options</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add">add</button></p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            methods: {
                add:function(){
                    this.a++;
                }
            },
        })
    </script>
</body>

</html>

View Code

4.3.一、methods中參數的傳遞

使用方法和正常的javascript傳遞參數的方法同樣，分爲兩部：

在methods的方法中進行聲明，好比咱們給add方法加上一個num參數，就要寫出 add:function(num){}.
調用方法時直接傳遞，好比咱們要傳遞2這個參數，咱們在button上就直接能夠寫。 <button @click=」add(2)」></button>.

如今知道了加參數的方法，看一段完整的代碼，代碼中給add添加了num參數，並在按鈕上調用傳遞了。

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>methods options</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods options</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add(2)">add</button></p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            methods: {
                add:function(num){
                    if (num!=null) {
                        this.a+=num
                    } else {
                        this.a++;
                    }
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現：

這時，再點擊按鈕是每次加2個數字。

4.3.二、methods中的$event參數

傳遞的$event參數都是關於你點擊鼠標的一些事件和屬性。咱們先看看傳遞的方法。

傳遞：

<p><button @click="add(2,$event)">add</button></p>

咱們這時候能夠打印一下，看看event究竟是個怎樣的對象。你會發現，它包含了大部分鼠標事件的屬性。

4.3.三、native 給組件綁定構造器裏的原生事件

在實際開發中常常須要把某個按鈕封裝成組件，而後反覆使用，如何讓組件調用構造器裏的方法，而不是組件裏的方法。就須要用到咱們的.native修飾器了。

如今咱們把咱們的add按鈕封裝成組件：

聲明btn對象

var btn={
    template:`<button>組件Add</button>`     
}

在構造器裏聲明
```
components:{
    "btn":btn
 }
```
用.native修飾器來調用構造器裏的add方法
```
<p><btn @click.native="add(3)"></btn></p>
```

示例代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <title>methods options</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>methods options</h1>
    <hr>
    <div id="app">
        {{a}}
        <p><button @click="add(2,$event)">add</button></p>
        <p><btn @click.native="add(2,$event)"></btn></p>
    </div>

    <script type="text/javascript">
var btn={
    template:`<button>組件ADD</button>`
}

        var app = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            components:{
                "btn":btn
            },
            methods: {
                add:function(num,event){
                    if (num!=null) {
                        this.a+=num
                    } else {
                        this.a++;
                    }

                    console.log(event);
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現

4.3.四、做用域外部調用構造器裏的方法

這種不常用，若是你出現了這種狀況，說明你的代碼組織不夠好。

<button onclick="app.add(4)" >外部調用構造器裏的方法</button>

4.四、Watch 選項監控數據

數據變化的監控常用，咱們能夠先來看一個簡單的數據變化監控的例子。例如天氣預報的穿衣指數，它主要是根據溫度來進行提示的，固然還有其它的，我們就不考慮了。

4.4.一、看一個監控變化的案例

溫度大於26度時，咱們建議穿T恤短袖，溫度小於26度大於0度時，咱們建議穿夾克長裙，溫度小於0度時咱們建議穿棉衣羽絨服。

先來模擬一個溫度變化的狀況：咱們使用按鈕來加減溫度。

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>watch Option 監控數據</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>watch Option 監控數據</h1>
    <hr>
    <div id="app">
        <p>溫度顯示：{{wendu}}°</p>
        <p>穿衣建議：{{chuanyi}}</p>
        <p><button @click="shenggao">升高溫度</button><button @click="jiangdi">下降溫度</button></p>
    </div>

    <script type="text/javascript">
        var chuanyiarray = ["T恤短袖", "夾克長裙", "棉衣羽絨服"];

        var app = new Vue({
            el: '#app',
            data: {
                wendu: 14,
                chuanyi: "夾克長裙"
            },
            methods: {
                shenggao: function () {
                    this.wendu += 5;
                },
                jiangdi: function () {
                    this.wendu -= 5;
                }
            },
            watch: {
                wendu: function (newVal, oldVal) { //這裏的溫度是監控的對象的名稱
                    if (newVal > 26) {
                        this.chuanyi = chuanyiarray[0];
                    } else if (newVal >= 0 && newVal <= 26) {
                        this.chuanyi = chuanyiarray[1];
                    } else {
                        this.chuanyi = chuanyiarray[2]
                    }
                }
            },
        })
    </script>
</body>

</html>

View Code

效果展現：

4.4.二、用實例屬性寫watch監控

有些時候咱們會用實例屬性的形式來寫watch監控。也就是把咱們watch卸載構造器的外部，這樣的好處就是下降咱們程序的耦合度，使程序變的靈活。

app.$watch('xxx',function(){})

仍是上邊的案例咱們改爲實例方法的模式。

//在外部進行watch監控
app.$watch("wendu",function(newVal, oldVal){
    if (newVal > 26) {
                this.chuanyi = chuanyiarray[0];
            } else if (newVal >= 0 && newVal <= 26) {
                this.chuanyi = chuanyiarray[1];
            } else {
                this.chuanyi = chuanyiarray[2]
            }
})

所有代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>watch Option 監控數據</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>watch Option 監控數據</h1>
    <hr>
    <div id="app">
        <p>溫度顯示：{{wendu}}°</p>
        <p>穿衣建議：{{chuanyi}}</p>
        <p><button @click="shenggao">升高溫度</button><button @click="jiangdi">下降溫度</button></p>
    </div>

    <script type="text/javascript">
        var chuanyiarray = ["T恤短袖", "夾克長裙", "棉衣羽絨服"];

        

        var app = new Vue({
            el: '#app',
            data: {
                wendu: 14,
                chuanyi: "夾克長裙"
            },
            methods: {
                shenggao: function () {
                    this.wendu += 5;
                },
                jiangdi: function () {
                    this.wendu -= 5;
                }
            }
        })


        //在外部進行watch監控
        app.$watch("wendu",function(newVal, oldVal){
            if (newVal > 26) {
                        this.chuanyi = chuanyiarray[0];
                    } else if (newVal >= 0 && newVal <= 26) {
                        this.chuanyi = chuanyiarray[1];
                    } else {
                        this.chuanyi = chuanyiarray[2]
                    }
        })
    </script>
</body>

</html>

View Code

效果展現：

4.五、Mixins 混入選項操做

Mixins通常有兩種用途：

在你已經寫好了構造器後，須要增長方法或者臨時的活動時使用的方法，這時用混入會減小源代碼的污染。
不少地方都會用到的公用方法，用混入的方法能夠減小代碼量，實現代碼重用。

4.5.一、Mixins的基本用法

咱們如今有個數字點擊遞增的程序，假設已經完成了，這時咱們但願每次數據變化時都可以提示：「數據發生變化」.

示例代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mixins Option 混入</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Mixins Option 混入</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P><button @click="add">增長數量</button></P>
    </div>

    <script type="text/javascript">
        //額外臨時加入時，用於顯示日誌
        var addConsole = {
            updated: function () {
                alert("數據放生變化,變化成" + this.num + ".");
            }
        }

        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            mixins: [addConsole] //混入
        })
    </script>
</body>

</html>

View Code

4.5.二、mixins的調用順序

從執行的前後順序來講，都是混入的先執行，而後構造器裏的再執行，須要注意的是，這並非方法的覆蓋，而是被執行了兩邊。

在上邊的代碼的構造器裏咱們也加入了updated的鉤子函數：

updated: function () {
    alert("我是原生的Update");
},

這時控制檯輸出的順序是：

數據放生變化,變化成2.
我是原生的Update

PS：當混入方法和構造器的方法重名時，混入的方法沒法展示，也就是不起做用。

4.5.三、全局API混入方式

咱們也能夠定義全局的混入，這樣在須要這段代碼的地方直接引入js，就能夠擁有這個功能了。咱們來看一下全局混入的方法：

Vue.mixin({
    updated() {
        alert("我是全局的混入的Update");
    },
})

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Mixins Option 混入</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Mixins Option 混入</h1>
    <hr>
    <div id="app">
        <p>num:{{ num }}</p>
        <P><button @click="add">增長數量</button></P>
    </div>

    <script type="text/javascript">
        //額外臨時加入時，用於顯示日誌
        var addConsole = {
            updated: function () {
                alert("數據放生變化,變化成" + this.num + ".");
            }
        }

        Vue.mixin({
            updated() {
                alert("我是全局的混入的Update");
            },
        })

        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            },
            updated: function () {
                alert("我是原生的Update");
            },
            mixins: [addConsole] //混入
        })
    </script>
</body>

</html>

View Code

效果展現：

PS：全局混入的執行順序要前於混入和構造器裏的方法。

4.六、Extends Option 擴展選項

經過外部增長對象的形式，對構造器進行擴展。它和咱們上節課講的混入很是的相似。

4.6.一、extends咱們來看一個擴展的實例

<!DOCTYPE html>
<html lang="en">

<head>
    <title>extends Option 擴展選項</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>extends Option 擴展選項</h1>
    <hr>
    <div id="app">
        <p>num:${ num }</p>
        <P><button @click="add">增長數量</button></P>
    </div>

    <script type="text/javascript">
        var extendsObj = {
            updated: function () {
                alert("我是擴展的update");
            },
            methods:{
                add: function () {//擴展的方法重名的話不執行
                    alert("我是擴展的方法");
                    this.num++;
                }
            }
        }

        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    alert("我是原生的方法");
                    this.num++;
                }
            },
            updated: function () {
                alert("我是原生的Update");
            },
            extends:extendsObj,
            delimiters:["${","}"],
        })
    </script>
</body>

</html>

View Code

4.6.二、delimiters 選項

delimiters的做用是改變咱們插值的符號。Vue默認的插值是雙大括號{{}}。但有時咱們會有需求更改這個插值的形式。

delimiters:['${','}']

如今咱們的插值形式就變成了${}。

效果展現：

五、實例和內置組件

5.一、Vue和Jquery.js一塊兒使用

5.1.一、下載並引入jquery框架

下載能夠去官網進行下載，我這裏使用的版本是3.3.1，下載好後在須要的頁面引入就能夠了。固然你還有不少其它的方法引入jquery，只要能夠順利引入就能夠了。

<script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>

試着做一個案例，在DOM被掛載後修改裏邊的內容。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>example methods 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <h1>example methods 實例</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello world!"
            },
            mounted() {
                $("#app").html("我是Jquery~!")
            },
            methods: {
                add: function () {
                    alert("調用了構造器內部的Add方法");
                }
            }
        })
    </script>
</body>

</html>

View Code

如今頁面顯示是：我是jQuery，而不是hello Vue了。

5.1.二、實例調用自定義方法

在Vue的構造器裏咱們寫一個add方法，而後咱們用實例的方法調用它。

構造器裏的add方法：

methods: {
    add: function () {
        alert("調用了構造器內部的Add方法");
    }
}

實例調用：

app.add();

PS：咱們有可能把app.add()的括號忘記或省略，這時候咱們獲得的就是方法的字符串，可是並無執行，因此必需要加上括號。

效果展現：

5.二、實例方法

$mount 方法
$mount方法是用來掛載咱們的擴展的，咱們能夠用 $mount 的方法把擴展掛載到DOM上
$destroy() 卸載方法
$forceUpdate() 更新方法
$nextTick() 數據修改方法
當Vue構造器裏的data值被修改完成後會調用這個方法，也至關於一個鉤子函數吧，和構造器裏的updated生命週期很像。

代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <title>example methods 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>example methods 實例</h1>
    <hr>
    <div id="app">
    </div>

    <p><button onclick="destroy()">卸載</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <p><button onclick="tick()">更改數據</button></p>


    <script type="text/javascript">
        var jsextend = Vue.extend({
            template: `<p>{{message}}</p>`,
            data: function () {
                return {
                    message: "Hellow World!"
                }
            },
            mounted() {
                console.log("mounted 被建立");
            },
            destroyed() {
                console.log("destroyed 銷燬以後");
            },
            updated() {
                console.log("updated 更新以後");
            },
        })

        var vm = new jsextend().$mount("#app");

        function destroy() {
            vm.$destroy();
        }

        function reload() {
            vm.$forceUpdate()
        }

        function tick() {
            vm.message = "update message info ";
            vm.$nextTick(function () {
                console.log('message更新完後我被調用了');
            })
        }
    </script>
</body>

</html>

View Code

效果展現

5.三、實例事件

實例事件就是在構造器外部寫一個調用構造器內部的方法。這樣寫的好處是能夠經過這種寫法在構造器外部調用構造器內部的數據。

咱們仍是寫一個點擊按鈕，持續加1的例子。

$on 在構造器外部添加事件。
```
app.$on('reduce',function(){
    console.log('執行了reduce()');
    this.num--;
});
```
$on 接收兩個參數，第一個參數是調用時的事件名稱，第二個參數是一個匿名方法。

若是按鈕在做用域外部，能夠利用 $emit 來執行。

//外部調用內部事件
function reduce(){
    app.$emit('reduce');
}

$once 執行一次的事件

app.$once('reduceOnce',function(){
    console.log('只執行一次的方法');
    this.num--;
});

$off 關閉事件

//關閉事件
function off(){
   app.$off('reduce');
}

代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <title>example methods 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>example methods 實例</h1>
    <hr>
    <div id="app">
        {{num}}
        <p><button @click="add">Add</button></p>
    </div>
    <p><button onclick="reduce()">reduce</button></p>
    <p><button onclick="reduceOnce()">reduceOnce</button></p>
    <p><button onclick="off()">off</button></p>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            }
        })

        app.$on("reduce", function () {
            this.num--;
        })

        app.$once("reduceOnce", function () {
            this.num--;
        })

        function reduce() {
            app.$emit("reduce");
        }

        function reduceOnce() {
            app.$emit("reduceOnce");
        }

        //關閉事件
        function off() {
            app.$off('reduce');
        }
    </script>
</body>

</html>

View Code

效果展現

5.四、內置組件 -slot講解

先來定義一個的組件，這個組件用來顯示博主的一些信息。

咱們在Vue 構造器裏的data中給出了信息，信息以下：（博客地址，網名，使用技能）

data: {
    jsData: {
        blogUrl: "https://www.cnblogs.com/wyt007/",
        netName: "進擊的辣條",
        skill: "web前端"
    }
},

咱們用 <template></template> 標籤的方式定義了組件：

<template id="tep">
    <div>
        <p>博客地址：<slot name="blogUrl"></slot></p>
        <p>網名：<slot name="netName"></slot></p>
        <p>技術類型：<slot name="skill"></slot></p>
    </div>
</template>

咱們如今就能夠用slot功能讓組件接收傳遞過來的值，並在模板中接收顯示。

slot的使用須要兩步：

在HTML的組件中用slot屬性傳遞值。

<jscomponent>
    <span slot="blogUrl">{{jsData.blogUrl}}</span>
    <span slot="netName">{{jsData.netName}}</span>
    <span slot="skill">{{jsData.skill}}</span>
</jscomponent>

在組件模板中用標籤接收值。

<template id="tep">
    <div>
        <p>博客地址：<slot name="blogUrl"></slot></p>
        <p>網名：<slot name="netName"></slot></p>
        <p>技術類型：<slot name="skill"></slot></p>
    </div>
</template>

所有代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <title>slot content extend 實例</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>lot content extend 實例</h1>
    <hr>
    <div id="app">
        <jscomponent>
            <span slot="blogUrl">{{jsData.blogUrl}}</span>
            <span slot="netName">{{jsData.netName}}</span>
            <span slot="skill">{{jsData.skill}}</span>
        </jscomponent>
    </div>

    <template id="tep">
        <div>
            <p>博客地址：<slot name="blogUrl"></slot></p>
            <p>網名：<slot name="netName"></slot></p>
            <p>技術類型：<slot name="skill"></slot></p>
        </div>
    </template>

    <script type="text/javascript">
        var jscmp = {
            template: "#tep",
        }

        var app = new Vue({
            el: '#app',
            data: {
                jsData: {
                    blogUrl: "https://www.cnblogs.com/wyt007/",
                    netName: "進擊的辣條",
                    skill: "web前端"
                }
            },
            components: {
                "jscomponent": jscmp
            }
        })
    </script>
</body>

</html>