ES6+Vue

ES6語法

? VUE基于是ES6的，所以在使用Vue之前我們需要先了解一下ES6的語法。

1.什么是ECMAScript6

ECMAScript是瀏覽器腳本語言的規(guī)范，基于javascript來制定的。為什么會出現(xiàn)這個規(guī)范呢？

1.1.JS發(fā)展史

• 1995年，網(wǎng)景工程師Brendan Eich 花了10天時間設(shè)計(jì)了JavaScript語言。
• 1996年，微軟發(fā)布了JScript，其實(shí)是JavaScript的逆向工程實(shí)現(xiàn)。
• 1997年，為了統(tǒng)一各種不同script腳本語言，ECMA（歐洲計(jì)算機(jī)制造商協(xié)會）以JavaScript為基礎(chǔ)，制定了ECMAscript標(biāo)準(zhǔn)規(guī)范。

1.2.ECMAScript發(fā)展歷史

• 97年而后，ECMAScript就進(jìn)入了快速發(fā)展期。1998年6月，ECMAScript 2.0 發(fā)布。

• 1999年12月，ECMAScript 3.0 發(fā)布。這時，ECMAScript 規(guī)范本身也相對比較完善和穩(wěn)定了，但是接下來的事情，就比較悲劇了

• 2007年10月，ECMAScript 4.0 草案發(fā)布。這次的新規(guī)范，歷時頗久，規(guī)范的新內(nèi)容也有了很多爭議。在制定ES4的時候，是分成了兩個工作組同時工作的。

  一邊是以 Adobe(flash,ps), Mozilla(火狐), Opera(瀏覽器) 和 Google為主的 ECMAScript 4 工作組。
  一邊是以 Microsoft(微軟)和 Yahoo(雅虎) 為主的 ECMAScript 3.1 工作組。

  ECMAScript 4 的很多主張比較激進(jìn)，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經(jīng)過 TC39 的會議，決定將一部分不那么激進(jìn)的改動保留發(fā)布為 ECMAScript 3.1，而ES4的內(nèi)容，則延續(xù)到了后來的ECMAScript5和6版本

• 2009年12月，ECMAScript 5 發(fā)布。

• 2011年6月，ECMAScript 5.1 發(fā)布。

• 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 發(fā)布了。 并且從 ECMAScript 6 開始，開始采用年號來做版本。即 ECMAScript 2015，就是ECMAScript6。

ES6就是javascript用的最多語言規(guī)范.被各大瀏覽器廠商實(shí)現(xiàn)了.

2.ES6語法規(guī)范

2.1.let & var

都是用來聲明變量， let相較于var，他是塊級的(局部)。

for(var i == 0 ; i < 10 ; ++){console.debug(i);
}
console.debug("i="+i);	//正常打印
------------------------------------
for(let i == 0 ; i < 10 ; ++){console.debug(i);
}
console.debug("i="+i);	//這里會報(bào)錯，i會找不到

2.2.const

const聲明常量不能修改 ， 如同Java的final修飾符

const c = 4;
c = 5;	//編譯報(bào)錯，不能修改

2.3.解構(gòu)表達(dá)式

簡單理解，解構(gòu)表達(dá)式就是將數(shù)組的元素或者對象的屬性向變量賦值的一種簡易寫法。

數(shù)組賦值

let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]);	//以前的取值
------------------------------------let [a,b] = arr;	//結(jié)構(gòu)表達(dá)式數(shù)組賦值,定義了變量a,b并按照索引賦值。
console.debug(a,b);	

對象賦值

var user = {id: 1,username:"zs",age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age);	//以前的取值
--------------------------------------
var {id,username,age} = user;	//結(jié)構(gòu)表達(dá)式，對象賦值，按照屬性名賦值。
console.debug(id,username,age);

方法參數(shù)賦值

var user = {id: 1,username:"zs",age: 11
}
--------------------------------------
function showUser({id,username,age}){ 	//結(jié)構(gòu)表達(dá)式，方法參數(shù)賦值，按參數(shù)名賦值。console.debug(id,username,age);
}
showUser(user);	//把user對象作為參數(shù)傳給showUser方法	

注意：數(shù)組用 [ ] 賦值，對象用 { } 賦值

2.4.箭頭函數(shù)

箭頭函數(shù)是函數(shù)的一種簡寫

var user = {username:"zs",age:22,showUser:function(){	//以前定義方法的方式console.debug(this.username+" "+this.age);},//--------------------------------------showUser2:()=>{	//es6定義方法的方式//注意：這里的this指的是window對象了。不能用this.usenameconsole.debug(user.username+" "+user.age);        },showUser3(){	//簡寫console.debug(user.username+" "+user.age);        }
}
user.showUser();
user.showUser2();
user.showUser3();

2.5.Promise對象

Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)+事件）更加合理和強(qiáng)大。 所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。過Promise的構(gòu)造函數(shù)來創(chuàng)建Promise對象，并在內(nèi)部封裝一個異步執(zhí)行的結(jié)果。

  /**=======================================Promise 異步請求=======================================**///1.執(zhí)行異步請求const p = new Promise((resolve, reject) =>{//成功，調(diào)用 resolve //失敗，調(diào)用 reject// 這里我們用定時任務(wù)模擬異步setTimeout(() => {const num = Math.random();// 隨機(jī)返回成功或失敗if (num < 0.5) {//2.調(diào)用成功的結(jié)果回調(diào)resolve("成功！num:" + num)} else {//3.調(diào)用失敗的結(jié)果回調(diào)reject("出錯了！num:" + num)}}, 300)})// 調(diào)用promisep.then(function (msg) {//2.調(diào)用成功的結(jié)果回調(diào)console.log(msg);}).catch(function (msg) {//3.調(diào)用失敗的結(jié)果回調(diào)console.log(msg);})

2.6.模塊化

模塊化通常是把一段JS代碼通過export導(dǎo)出為公共的模塊，其他地方通過import導(dǎo)入使用，實(shí)現(xiàn)代碼復(fù)用的目的。

• 定義三個文件

main.html
main.js
util.js

• util.js

--------------方式一--------------------------------
export const util1 = {sum(a , b){return a + b;}
}
--------------或者---------
const util2 = { //面向?qū)ο笏季S/*sum:function (a,b){return a+b;}*/sum(a,b){return a+b;}
}
export {util2};
--------------方式二：導(dǎo)出多個----------------------
const util3 = {sum(a , b){return a + b;}
}const util4 = {sum(a , b){return a + b;}
}
export {util3,util4};	//導(dǎo)出多個
---------------方式三：默認(rèn)導(dǎo)出--------------------------
export default{sum(a,b){return a + b;}
}

• main.js

//方式一: 的導(dǎo)入
import {util} from './util.js';
//util.sum(1,1)//方式二：多個導(dǎo)入
import {util3,util4} from './util.js';//方式三：默認(rèn)導(dǎo)入
import {名字任意} from './util.js';

• main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Title</title>
</head>
<script src="./main.js" type="module"></script>
<script>alert(util.sum(1,1));   //運(yùn)行會報(bào)錯，瀏覽器不支持，要使用webpack之后才能運(yùn)行
</script>
<body></body>
</html>

運(yùn)行會報(bào)錯，瀏覽器不支持，要使用webpack之后才能運(yùn)行

2.7.總結(jié)

• let
• const
• 結(jié)構(gòu)表達(dá)式
• 箭頭函數(shù)
• Promise
• 模塊化

二 .Vue入門

1.VUE介紹

1.1.Vue是什么

? Vue (讀音 /vju?/，類似于 *view*) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

? 漸進(jìn)式框架： 就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不強(qiáng)求你一次性接受并使用它的全部功能特性

1.2.Vue的特點(diǎn)

• 輕量
  Vue.js庫的體積非常小的，并且不依賴其他基礎(chǔ)庫。

• 數(shù)據(jù)雙向綁定-回顯簡單
  對于一些富交互、狀態(tài)機(jī)類似的前端UI界面，數(shù)據(jù)綁定非常簡單、方便。

• 指令
  內(nèi)置指令統(tǒng)一為(v—*)，也可以自定義指令，通過對應(yīng)表達(dá)值的變化就可以修改對應(yīng)的DOM。

• 插件化
  Vue.js核心不包含Router(路由)、AJAX、表單驗(yàn)證等功能，但是可以非常方便地根據(jù)需要加載對應(yīng)插件。

• 組件化，他支持自定義標(biāo)簽[初學(xué)的時候比較難]
  組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。允許我們使用小型、自包含和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用

1.3.MVVM思想–[面試的時候容易被問到]

Vue是一款開源的JavaScript MV*（MVVM、MVC）框架。
Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架構(gòu).

• M ：即Model，模型，包括數(shù)據(jù)(json對象)和一些基本操作
• V ：即View，視圖（html便簽），頁面渲染結(jié)果
• VM：即View-Model，模型與視圖間的雙向操作（無需開發(fā)人員干涉）

在MVVM之前，開發(fā)人員從后端獲取需要的數(shù)據(jù)模型，然后要通過DOM操作Model渲染到View中。而后當(dāng)用戶操作視圖，我們還需要通過DOM獲取View中的數(shù)據(jù)，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發(fā)人員不用再關(guān)心Model和View之間是如何互相影響的：

• 只要我們Model發(fā)生了改變，View上自然就會表現(xiàn)出來。
• 當(dāng)用戶修改了View，Model中的數(shù)據(jù)也會跟著改變。

把開發(fā)人員從繁瑣的DOM操作中解放出來，把關(guān)注點(diǎn)放在如何操作Model上.

總結(jié)一下：MVVM的思想就是數(shù)據(jù)模型和視圖的雙向綁定，只要數(shù)據(jù)變化，視圖會跟著變化，只要視圖被修改，數(shù)據(jù)也會跟者變化。

2.入門

官方文檔：https://cn.vuejs.org/

2.1.Vue安裝和使用

創(chuàng)建一個靜態(tài)的web項(xiàng)目 ， 然后安裝VUE ， VUE官網(wǎng)地址：https://cn.vuejs.org/

使用CDN方式

Vue有兩種使用方式，1是使用cdn或者本地方式直接引入JS庫 ，2.使用Npm安裝VUE庫，第一種方式如下：

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

CDN（Content Delivery Network，內(nèi)容分發(fā)網(wǎng)絡(luò)）是由分布在不同地理位置的代理服務(wù)器及其數(shù)據(jù)中心組成的網(wǎng)絡(luò)：

當(dāng)然也可以手動下載該vue的JS庫到本地項(xiàng)目，然后引入JS庫

使用NPM安裝VUE

• 使用Terminal初始化 ：npm init -y

  改名了是初始化NPM，會在項(xiàng)目中產(chǎn)生一個package.json文件。

• 安裝vue：

  全局安裝（不推薦）：npm install -g vue
  局部安裝（推薦） ：npm install vue
  安裝成功后VUE的JS庫：node_modules/vue/dist/vue.js

[注意] 項(xiàng)目的名稱不能使用“vue”，不然會報(bào)錯

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平臺的默認(rèn)包管理工具，也是世界上最大的軟件注冊表，里面包含超過600000 個 包的結(jié)構(gòu)，能夠使您輕松跟蹤依賴項(xiàng)和版本。

2.2.Hello World程序

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：

創(chuàng)建vue-demo.html,目錄結(jié)構(gòu)如下：

vue-demonode_modulespackage.jsonpackage-lock.jsonpagesvue-demo.html

vue-demo.html

<script type="application/javascript" src="../node_modules/vue/dist/vue.js"></script>
---------------------------------------------------
<body><div id="app"><!--        取data中的數(shù)據(jù)-->{{ message }}</div>
</body>
---------------------------------------------------
<script type="application/javascript">var app = new Vue({//使用ID綁定vue到頁面的元素el: '#app',//vue的數(shù)據(jù)data: {message: 'Hello Vue!'}})
</script>

Hello Vue!

2.3.VUE的el掛載

每個Vue實(shí)例通過el配置掛載的標(biāo)簽，該標(biāo)簽可以通過id或者是class掛載。 實(shí)例上的屬性和方法只能夠在當(dāng)前實(shí)例掛載的標(biāo)簽中使用。

2.4.VUE的數(shù)據(jù)“data”

<body><div id="app"><!--        取data中的數(shù)據(jù)-->{{ message }}<hr/>{{ user }}<hr/>{{ user.username }}	//取對象中的數(shù)據(jù)</div>
</body>
<script type="application/javascript">var app = new Vue({//使用ID綁定vue到頁面的元素el: '#app',//vue的數(shù)據(jù)data: {message: 'Hello Vue!',	//普通數(shù)據(jù)user:{	//對象數(shù)據(jù)username:"zs",age:11}}})
</script>

注意：{{}}取值不能脫離VUE綁定的元素。

2.5.VUE的方法

所有的方法都在methods屬性中定義，方法的調(diào)用可以通過在VUE綁定的頁面元素中使用{{方法名()}} 的方式，也可以在js中通過VUE對象調(diào)用.

<body><div id="app"><!--        取data中的數(shù)據(jù)-->取普通值：{{ message }}<hr/>取對象值：{{ user }}<hr/>取對象中的屬性：{{ user.username }}<hr/>調(diào)用方法：{{showUser('參數(shù)')}}</div>
</body>
<script type="application/javascript">var app = new Vue({//使用ID綁定vue到頁面的元素el: '#app',//vue的數(shù)據(jù) ，所有的數(shù)據(jù)都在這里綁定data: {message: 'Hello Vue!',user:{username:"zs",age:11}},//vue的方法，所有的方法都在這里定義methods:{showUser(args){//這里的 this 代表 Vue對象console.log(this.user.username);console.log(this.user.age);console.log(args);}}})//調(diào)用vue方法app.showUser('我也是參數(shù)');
</script>

2.6 vue生命周期與鉤子函數(shù)

1、beforeCreate（創(chuàng)建前）：vue實(shí)例初始化之前調(diào)用
此階段為實(shí)例初始化之后，此時的數(shù)據(jù)觀察和事件配置都還沒有準(zhǔn)備好，而此時的實(shí)例中的data和el還是undefined狀態(tài)，不可用的，dom元素也未加載,此時使用html片段代碼我們加上ref屬性，用于獲取DOM元素的操作會報(bào)錯，詳細(xì)效果請使用代碼測試。

注入：將methods、data等掛載到vue實(shí)例當(dāng)中。

2、created（創(chuàng)建后）：vue實(shí)例初始化之后調(diào)用
beforeCreate之后緊接著的鉤子就是創(chuàng)建完畢created，此時我們能讀取到data的值，但是DOM還沒有生成，所以屬性el還是不存在的，dom元素也未加載。

生成render函數(shù)，用來渲染。在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用

3、beforeMount（載入前）：掛載到DOM樹之前調(diào)用
此時的$el成功關(guān)聯(lián)到我們指定的DOM節(jié)點(diǎn)，但是此時的DOM元素還未加載，如果此時在DOM元素中綁定數(shù)據(jù)使用{{name}}后里邊的name不能成功地渲染出我們data中的數(shù)據(jù)

4、mounted（載入后）：掛載到DOM樹之后調(diào)用
掛載完畢階段，到了這個階段數(shù)據(jù)就會被成功渲染出來。DOM元素也加載出來了，html片段代碼我們加上ref屬性，可以獲取DOM元素。

5、beforeUpdate（更新前）：數(shù)據(jù)更新之前調(diào)用
當(dāng)修改Vue實(shí)例的data時，Vue就會自動幫我們更新渲染視圖，在這個過程中，Vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改數(shù)據(jù)的時候，更新渲染視圖之前就會觸發(fā)鉤子beforeUpdate。html片段代碼我們加上ref屬性，用于獲取DOM元素。Dom元素上的數(shù)據(jù)還沒改變。

6、updated（更新后）：數(shù)據(jù)更新之后調(diào)用
此階段為更新渲染視圖之后，此時再讀取視圖上的內(nèi)容，已經(jīng)是最新的內(nèi)容。 此時加載的DOM元素上的數(shù)據(jù)更新了。

7、beforeDestroy（銷毀前）：vue實(shí)例銷毀之前調(diào)用
調(diào)用實(shí)例的destroy()方法可以銷毀當(dāng)前的組件，在銷毀之前，會觸發(fā)beforeDestroy鉤子。

8、destroyed（銷毀后）：vue實(shí)例銷毀之后調(diào)用
成功銷毀之后，會觸發(fā)destroyed鉤子，此時該實(shí)例與其他實(shí)例的關(guān)聯(lián)已經(jīng)被清除，它與視圖之間也被解綁，此時再修改name的值，試圖不在更新，說明實(shí)例成功被銷毀了。

vue的生命周期：就是vue對象從創(chuàng)建到銷毀的整個過程。

vue對象大概生命周期：創(chuàng)建–掛載-銷毀，在這些階段它提供了一些鉤子函數(shù)，讓我們可以在這些生命周期中做事情。 創(chuàng)建前，創(chuàng)建后，掛載前，掛載后，銷毀前，銷毀后等鉤子，我們可以寫函數(shù)掛載在鉤子上面，到達(dá)對應(yīng)的聲明周期就能執(zhí)行我們操作。

整個生命周期中，主動執(zhí)行的函數(shù)，稱為鉤子函數(shù)。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue聲明周期</title><script src="js/plugins/dist/vue.js"></script>
</head>
<body><div id="myDiv"></div><!--聲明周期 從產(chǎn)生到銷毀中間經(jīng)歷的過程就叫聲明周期--><script type="text/javascript">new Vue({el:"#myDiv",data:{},methods:{},//構(gòu)造beforeCreate() {},created(){alert("created");},beforeMount(){},mounted(){//掛載完成后，就相當(dāng)于js中window.onload,相當(dāng)于jQuery中$(fuction(){}),就是掛載點(diǎn)里面所有//標(biāo)簽都已經(jīng)加載了alert("mounted");}});</script>
</body>
</html>

三 VUE的表達(dá)式

1 表達(dá)式語法

• VueJS表達(dá)式寫在雙大括號內(nèi)：{{ expression }}。
• VueJS表達(dá)式把數(shù)據(jù)綁定到 HTML。
• VueJS將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
• VueJS表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字、運(yùn)算符和變量。

實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

2 簡單表達(dá)式

在{{ }}中可以進(jìn)行簡單的運(yùn)算.

<div id="app"><!--簡單表達(dá)式  --><h1>{{num1+num2}}</h1><!-- +:運(yùn)算，字符串連接 --><h1>{{5+"v5"}}</h1><h1>{{5+"5"}}</h1><!-- -：減法 --><h1>{{"5"-"5"}}</h1><h1>{{5*5}}</h1><!-- *:乘 --><h1>{{"5"*"5"}}</h1><!-- / 除--><h1>{{5/5}}</h1><h1>{{5/5}}</h1></div>
---------------------------------------------------------------------------------------------------
var app = new Vue({//掛載到id=app元素上el:"#app",data:{num1: 10,num2: 20},
});

3 三目運(yùn)算符

在{{}}中的表達(dá)式可以使用data中數(shù)據(jù) ， 可以使用三元運(yùn)算符,但是不能夠使用其他語句

<div id="app"><!--三目運(yùn)算  -->{{ show1?"真":"假"}}
</div>var app = new Vue({el : "#app",data : {show1 : true}
});

4 字符串操作

• 直接使用字符串字面值作為字符串對象
• 使用data中的字符串對象

<div id="app">{{"這是字面值"}}<br/>{{"這是字面值".length}}<br/>{{message.length}}<br/>{{message.substring(1,5)}}<br/>{{message.substring(2,6).toUpperCase()}}<br/>
</div>var app = new Vue({el: "#app",data: {message: "這是data中的數(shù)據(jù)"}
});

5 對象操作

在表達(dá)式中可以使用data中定義的對象的各種用法.像使用js對象中的方法和屬性一樣

<div id="app">{{user}}<br/>{{JSON.stringify(user)}}<br/>{{user.toString()}}<br/>{{user.name}}<br/>{{user.age}}<br/>{{user.getAge()}}<br/>
</div>var user = {name: "張三",age: 29,getAge: function () {return this.age},toString:function(){return "姓名:"+this.name+",年齡:"+this.age;}
};
var app = new Vue({el: "#app",data: {user: user}
});

6 數(shù)組操作

在表達(dá)式中可以使用JavaScript數(shù)組中的任何語法來操作數(shù)組.

<div id="app">{{hobbys}}<br/>{{hobbys[0]}}<br/>{{hobbys.length}}<br/>{{hobbys.toString()}}<br/>{{hobbys.join("-")}}<br/>
</div>var app = new Vue({el: "#app",data: {hobbys:["打游戲","踢足球",'泡MM',"泡GG"]}
});

四.VUE的指令

官方文檔：https://cn.vuejs.org/v2/api/#v-text

指令是一個帶有v-前綴的特殊標(biāo)簽屬性, 指令屬性的值預(yù)期是單個JavaScript表達(dá)式.

• 作用: 當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。
• 一個標(biāo)簽元素上可以出現(xiàn)多個指令屬性
• 指令只能夠出現(xiàn)在Vue對象所掛載的標(biāo)簽范圍內(nèi)的標(biāo)簽中

常用指令如下：

v-text=“表達(dá)式”  設(shè)置標(biāo)簽中的文本
v-html=“表達(dá)式”  設(shè)置標(biāo)簽中的html
v-for=“表達(dá)式”   循環(huán)
v-bind="函數(shù)" 綁定事件
v-model=“表達(dá)式” 數(shù)據(jù)雙向綁定
v-show="布爾" 是否顯示元素
v-if(else else if)=“表達(dá)式”    判斷條件	
v-on=“表達(dá)式”    注冊事件

1 v-text

給標(biāo)簽設(shè)置文本

• 語法

<標(biāo)簽 v-text="textValue"></標(biāo)簽>

<div id="app"><span v-text="message"></span><br/><span v-text="user.username"></span><br/>
</div>var app = new Vue({el: "#app",data: {message: "<h1>這是一個Span!</h1>",user: {username: "lw"},}
});

給元素填充純文本內(nèi)容

2 v-html

給標(biāo)簽設(shè)置文本：通過data中的數(shù)據(jù)更新標(biāo)簽標(biāo)簽中的innerHTML屬性的值.(標(biāo)簽中的HTML內(nèi)容)

• 語法

<標(biāo)簽 v-html="htmlValue"></標(biāo)簽>

<div id="app"><div v-html="message"></div>
</div>var app = new Vue({el: "#app",data: {message: "<h1>這是HTMl代碼</h1>"}
});

【注意】和v-text的區(qū)別是v-html會把內(nèi)容的html符號進(jìn)行渲染

3 v-for

循環(huán)：v-for可以作用于：數(shù)字，字符串，數(shù)組，對象

• 語法一：普通用法

<標(biāo)簽 v-for="item in 數(shù)據(jù)源">{{item}}</標(biāo)簽>

• 語法二：帶索引

<標(biāo)簽 v-for="(元素,索引) in 數(shù)據(jù)源">{{元素}}=={{索引}}</標(biāo)簽>

• 語法三：鍵，值，索引

[注意]這里的鍵是指對象的屬性名，這種方式適合用來遍歷對象的所有屬性

<標(biāo)簽 v-for="(元素,鍵,索引) in 對象"></標(biāo)簽>

<div id="app"><h1>循環(huán)數(shù)組</h1><ul><li v-for="hobby in hobbys">{{hobby}}</li></ul><h1>遍歷對象</h1><ul><li v-for="value in student">{{value}}</li></ul><h1>帶索引循環(huán)數(shù)組</h1><ul><li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li></ul><h1>帶鍵遍歷對象</h1><ul><li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li></ul>
</div>var app = new Vue({el: "#app",data: {hobbys : ["爬山","游泳","打豆豆","睡覺"],student : {name: "小毛",age: 29,sex: "男",},num : 10,str : "ronghuanet",}
});

學(xué)生列表案例

<div id="app"><table ><tr><th>序號</th><th>姓名</th><th>年齡</th><th>性別</th></tr><tr v-for="student in students"><td>{{student.id}}</td><td>{{student.name}}</td><td>{{student.age}}</td><td>{{student.sex}}</td></tr></table>
</div>var app = new Vue({el: "#app",data: {students: [{id:1,name: "劉備", age: 29, sex: "男"},{id:2,name: "貂蟬", age: 30, sex: "女"},{id:3,name: "呂布", age: 31, sex: "男"}]}
});

4 v-bind

屬性綁定：將data中的數(shù)據(jù)綁定到標(biāo)簽上,作為標(biāo)簽的屬性值.

• 語法一

<標(biāo)簽 v-bind:標(biāo)簽屬性名字="表達(dá)式"></標(biāo)簽>

• 語法二：簡寫

<標(biāo)簽 :標(biāo)簽屬性名字="表達(dá)式"></標(biāo)簽>

• 語法三：為一個標(biāo)簽綁定一個對象作為該標(biāo)簽的多個屬性

<標(biāo)簽 v-bind="對象"></標(biāo)簽>

<div id="app"><img src="xxx.jpg" /><img v-bind:src="imgsrc" v-bind:title = "title"/><img :src="imgsrc" :title = "title"/><input v-bind="props"/>
</div>var app = new Vue({el: "#app",data: {imgsrc: "./img/1.jpg",title: "二哈!",props :{type: "text",name: "username",}}
});

5 v-model 指令

在表單控件上創(chuàng)建雙向綁定,表單的值被修改時, 基于dom監(jiān)聽機(jī)制, 就會自動修改data中的數(shù)據(jù)中,

當(dāng)data中的數(shù)據(jù)被修改時,基于數(shù)據(jù)綁定機(jī)制, 自動會把新的內(nèi)容自動更新到value屬性上. 頁面視圖也發(fā)生了改變. 雙向綁定

v-model只作用于以下表單: input select textarea

<標(biāo)簽 v-model="表達(dá)式"></標(biāo)簽>

<div id="app"><h1>綁定到type=text的input表單元素</h1>姓名:<input type="text" v-model="inputValue"><br/>data中的值:{{inputValue}}<h1>綁定到type=checkbox的input表單元素</h1>打籃球:<input type="checkbox" v-model="checkboxValue" value="打籃球"><br/>踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>data中的值:{{checkboxValue}}<h1>綁定到type=radio的input表單元素</h1>打籃球:<input type="radio" v-model="radioValue" value="打籃球"><br/>踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>data中的值:{{radioValue}}<h1>綁定到textarea的元素</h1>個人簡介:<textarea v-model="textareaValue"></textarea><br/>data中的值:{{textareaValue}}<h1>綁定到單選的select的元素</h1>技能:<select v-model="skills"><option value="java">java</option><option value="php">php</option><option value=".net">.net</option></select><br/>data中的值:{{skills}}</div>var app = new Vue({el: "#app",data: {inputValue: "初始化的值",checkboxValue: ["踢足球"],radioValue: "打籃球",textareaValue: "你是一個優(yōu)秀的軟件工程師!",skills: "java",}
});

6 v-show

根據(jù)表達(dá)式之真假值，切換元素的 display CSS 屬性。當(dāng)條件變化時該指令觸發(fā)過渡效果。當(dāng)v-show的值為假時, 會在標(biāo)簽的css中添加 display: none

 <標(biāo)簽名 v-show="表達(dá)式"></標(biāo)簽名>

7 v-if

• 語法一

<標(biāo)簽名 v-if="表達(dá)式"> ... </標(biāo)簽名>

<div id="app"><div v-if="show">你看到我了!</div><div v-if="hidden">你看不到我了!</div><div v-if="score>=90">優(yōu)秀</div>
</div>var app = new Vue({el: "#app",data: {"show":true,"hidden":true,"score":90,}
});

• 語法二

 <標(biāo)簽名 v-if="表達(dá)式"></標(biāo)簽名><標(biāo)簽名 v-else></標(biāo)簽名>

<div id="app"><div v-if="isVip">歡迎歡迎!!</div><div v-else>滾動!!</div>
</div>var app = new Vue({el: "#app",data: {isVip: true}
});

• 語法三

<標(biāo)簽名 v-if="表達(dá)式"></標(biāo)簽名>
<標(biāo)簽名 v-else-if="表達(dá)式"></標(biāo)簽名>
<標(biāo)簽名 v-else-if="表達(dá)式"></標(biāo)簽名>
<標(biāo)簽名 v-else></標(biāo)簽名>

<div id="app"><div v-if="score>=90">優(yōu)秀!!</div><div v-else-if="score>=70">良好!!</div><div v-else-if="score>=60">及格!!</div><div v-else="score<60">不及格!!</div>
</div>var app = new Vue({el: "#app",data: {score: 80}
});

8 v-on

使用v-on指令注冊事件

<標(biāo)簽 v-on:事件句柄="表達(dá)式或者事件處理函數(shù)"></標(biāo)簽>簡寫方式
<標(biāo)簽 @事件句柄="表達(dá)式或者事件處理函數(shù)"></標(biāo)簽>

<div id="app"><h1>結(jié)果</h1>{{num}}<h1>表達(dá)式的寫法</h1><button v-on:click="num++">按鈕</button><br/><button @click="num++">按鈕</button><br/><h1>事件處理函數(shù)</h1><button v-on:click="myclick">按鈕</button><br/><button @click="myclick">按鈕</button><br/>
</div>var app = new Vue({el: "#app",data: {num:0},methods:{myclick:function(){app.num++;console.log(this);}}
});

五 計(jì)算屬性和watch

1 computed

有的時候我們需要在頁面進(jìn)行復(fù)雜的計(jì)算，復(fù)雜的計(jì)算導(dǎo)致頁面很亂，Vue中提供了計(jì)算屬性，來替代復(fù)雜的表達(dá)式：

<div id="app"><h1>您的生日是：{{birth}} </h1>
</div>
-----------------------------------------------------------------
var vm = new Vue({el:"#app",data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 計(jì)算屬性本質(zhì)是一個方法，但是必須返回結(jié)果const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}}
})

2 watch

watch可以讓我們監(jiān)控一個值的變化。從而做出相應(yīng)的反應(yīng)。

<div id="app"><input type="text" v-model="message">
</div>
-------------------------------------------------------------
<script type="text/javascript">var vm = new Vue({el:"#app",data:{message:"xxxx"},watch:{message(newVal, oldVal){	//監(jiān)聽 message 的變化，調(diào)用該函數(shù)。console.log(newVal, oldVal);}}})
</script>