第二章 建議學習時間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>
今天就講到這里，明天我們講解：組件嵌套，父子組件、兄弟組件之間的通訊
關注公眾號，博客更新即可收到推送
