第二章 建議學習時間4小時 課程共3章
前面的nodejs教程並沒有停止更新，因爲node項目需要用vue來實現界面部分，所以先插入一個vue教程，以免不會的同學不能很好的完成項目。
本教程，將從零開始，教給大家vue的基礎、高級操作、組件封裝等，再配合前面的Nodejs後臺，實現一個完整的項目。
指令
上一章我們講的 以v開頭的屬性都是vue的指令， 比如 v-bind
除了上一章的指令，大家再掌握以下指令
v-on綁定事件 基本格式 v-on:事件名="方法名"
下面案例中，使用v-on綁定了click事件，當點擊的時候，改變value的值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="clickFn">{{value}}</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
value:"按鈕"
},
methods:{
clickFn:function(){
this.value = "點擊了按鈕"; //這裏的this.value，可以直接調用或修改 data中的value的值。
}
}
})
</script>
</body>
</html>
綁定事件的簡寫方式，
上面案例中的 v-on: 可以使用 @替換，作用一樣
其他事件，一般只需要將原生的事件的on去掉即可，比如 onkeyup --> keyup
v-html 綁定html內容 下面的代碼就會將 data中的value作爲 html顯示
<div id="box">
<p v-html="value"></p>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
value:"<h3>按鈕</h3>"
}
})
</script>
v-text 綁定html內容 下面的代碼就會將 data中的value作爲文本顯示
<div id="box">
<p v-text="value"></p>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
value:"<h3>按鈕</h3>"
}
})
</script>
自定義指令
定義一般指令，使用 Vue.directive()定義指令，然後在標籤中使用 v-指令 調用
在定義指令中 el 就代表 標籤 dom ，可以直接執行js操作。
<div id="box">
<p v-test>測試：紅色</p>
<p v-test-blue>測試：藍色</p>
</div>
<script>
/*自定義指令*/
Vue.directive("test",function(el){ /* el就是頁面的dom */
el.style.color = "red";
});
/* 如果使用了駝峯命名指令，那麼頁面使用的時候需要改成橫槓鏈接 */
Vue.directive("testBlue",function(el){
el.style.color = "blue";
});
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
指令傳參數
在標籤中調用 指令=“json格式參數” ，然後在指令定義的回調函數的第二個參數中，就可以接受到這參數，如下代碼：
<div id="box">
<p v-test-orange="{'color':'orange'}">測試：橘色</p>
</div>
<script>
/*自定義指令*/
Vue.directive("test-orange",function(el,args){ /*傳過來的json格式參數，存在參數 args.value 中*/
el.style.color = args.value.color;
});
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
局部指令
上面定義的是全局指令，如果要定義局部指令，只需要在 new Vue實例的時候，傳的json參數中寫入 directives即可，如下：
<div id="box">
<p v-test-orange="{'color':'orange'}">測試：橘色</p>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
},
directives:{ /* 在new Vue內部，可以使用 directives定義多個指令，和前面直接通過 Vue.dirctive一樣的寫法。 */
"test-orange":function(el,args){ /*傳過來的json格式參數，存在 args.value中*/
el.style.color = args.value.color;
},
"test-other":function(){
}
}
})
</script>
組件
上面的指令只是實現了操作dom的功能，而組件可以將具備特定功能的html代碼塊進行封裝，以實現組件化，重用的功能。
基本使用如下，具體代碼的意義在註釋中。
<div id="box">
<who></who><!-- 使用和組件名稱相同的html標籤調用 -->
</div>
<script>
var item = Vue.extend({ /*使用extend添加一個對象*/
data:function(){ /*在data中返回的對象，就是組件具備的數據源 和實例中的 data作用一致*/
return {
msg:"他是小明" /*數據包含一個數據msg*/
}
},
template:'<h1>{{msg}}</h1>' /* template（模板）是用於顯示在頁面中的內容，模板的值，就是一個html字符串，內部可以自由使用值或指令 */
});
Vue.component("who",item); /*使用 Vue.componet 將上面的對象定義爲組件*/
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
瀏覽器運行結果：
我們可以看到，我們定義的 h1中包含msg值的代碼被顯示在了頁面中
練習：一個帶有事件操作的組件
當點擊文字的時候，文字會改變。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<who></who>
</div>
<script>
var item = Vue.extend({
data:function(){
return {
msg:"他是小明"
}
},
template:'<h1 @click="change">{{msg}}</h1>',
methods:{
change:function(){
this.msg = "誰說他是小明的"
}
}
});
Vue.component("who",item);
var vm = new Vue({
el:"#box",
data:{
}
})
</script>
</body>
</html>
開始顯示
點擊之後顯示
局部組件
寫法和全局組件基本一致，只是將聲明組件放在了 vue實例的配置項中，使用 components可以配置多個組件。由於組件內容不較多，可以先使用變量聲明好，再負值到組件中，如下代碼的做法
具體的代碼解釋在註釋中 注：如果申明的組件名是駝峯是命名的，那麼在標籤中，需要轉化成 橫槓 鏈接的小寫名稱
<div id="box">
<who-haha></who-haha> <!-- 駝峯式命名的變量，在html中使用的時候，要轉化成橫槓的方式 -->
</div>
<script>
var item = Vue.extend({
data:function(){
return {
msg:"哈哈"
}
},
template:'<h1 @click="change">{{msg}}</h1>',
methods:{
change:function(){
this.msg = "呵呵"
}
}
});
var vm = new Vue({
el:"#box",
data:{},
components:{ //可以配置多個內部組件
"whoHaha":item //組件命名的名字，最好都用引號引起來（當然，單個單詞的時候不用引號也不報錯）
}
})
</script>
開始顯示
點擊之後顯示
將模板獨立編寫
有的時候我們模板的html代碼很多，字符串形式寫在js中不好寫，可以將它獨立寫在html中，然後調用。
使用 template 標籤定義模板 ，將模板內容寫在 template標籤內，指定 一個 id，這樣再定義組件的時候，只需要傳入模板id，就可以關聯起來了。
如下代碼：將上一步的代碼中的模板提取了出來。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<who-h></who-h>
</div>
<template id="temp01"> <!-- template 用來定義模板，需要指定一個id -->
<div> <!-- 模板中的內容，只能保護在唯一一個標籤中 （最外層不能有多個標籤） -->
<h1 @click="change">{{msg}}</h1>
<p>模板示例，示例，示例</p>
</div>
</template>
<script>
var item = Vue.extend({
data:function(){
return {
msg:"哈哈"
}
},
template:'#temp01', //傳入id調用模板
methods:{
change:function(){
this.msg = "呵呵"
}
}
});
var vm = new Vue({
el:"#box",
data:{},
components:{ //可以配置多個內部組件
"who-h":item //組件命名的時候，最好都用引號引起來（當然，單個單詞的時候不用也不報錯）
}
})
</script>
</body>
</html>
今天就講到這裏，明天我們講解：組件嵌套，父子組件、兄弟組件之間的通訊