Vue.js--基本命令&元件化應用構建
Vue.js
前言：Vue.js的官方學習網站是：https://cn.vuejs.org/v2/guide/#元件化應用構建
這裡面講述了Vuejs的指令，例如v-bind,v-if,v-on,v-model等等。
----------------------------------------------------------------------------------------------------------------------------------
1.基本指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> <!--this is a view--> {{ message }} </div> <div id="app-2"> <!--this is a instruction--> <span v-bind:title="message"> here is surprise </span> </div> <div id="app-3"> <span v-if="seen"> <!--this is a structure that blind data to DOM--> you can see me </span> </div> <div id="app-4"> <ol> <!--this is an array used in table--> <li v-for="fruit in fruitshop"> {{fruit.text}} </li> </ol> </div> <div id="app-5"> <p>{{message}}</p> <!--this is an function blinding to an button--> <button v-on:click="reversemessage">reversemessage</button> </div> <div id="app-6"> <p> {{update}} </p> <!--showing data changes by the changing data in updata--> <input v-model="update"> </div> <div id="app-7"> <ol> <todo-item v-for="item in itemlist" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div> </body> <script> Vue.component('todo-item', { //design a property by yourself using props //this name of property is todo props:['todo'], template: '<li>{{todo.text}}</li>' }) var app7=new Vue({ el:"#app-7", data:{ itemlist:[{id:0,text:'homework'}, {id:1,text:'housework'}, {id:2,text:'drink'}] } }) var app6=new Vue({ el:"#app-6", data:{ update:'today is '+new Date().toDateString() } }) var app5=new Vue({ el:"#app-5", data:{ message:'you are a boy' }, methods: { reversemessage: function () { //"j'oin" put the element to an array this.message = this.message.split(' ').reverse().join(' ') } } }) var app4=new Vue({ el:"#app-4", data:{ fruitshop:[ {text:'apple'}, {text:'pineapple'}, {text:'banana'} ] } }) var app3=new Vue({ el:"#app-3", data:{ seen:true } }) var app2=new Vue({ el:"#app-2", data:{ message:'localtime: ' + new Date().toLocaleString() } }) var app =new Vue ({ //this is a viewmodel el:"#app", data: { //this is a model message: 'Hello world !' } }) </script> </html>
按照上面一個一個來，再對應官方文件的對應解釋，很容易就上手了。
2.元件化應用構建
學會了基本指令和元件化應用，就能做出一個小demo了。
我的vue-member-record小demo原始碼地址為：https://github.com/drunkprogrammer/vue-member-record
效果圖如下所示
進入正題,這裡只說我踩過的坑：
1.學習了基本指令和組建化應用構建的基礎知識後，就開始寫DEMO程式碼。覺得還是太急躁的，最好再返過頭看一遍。
v-model不僅可以將dom的資料繫結到應用上，而且可以在表單控制元件元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來
更新元素。
v-for指令在元件化應用建立時，需要和v-bind連用，v-bind:key是序號。
2.在table標籤自定義tr-item元件，發現模板元素是塊級元素，原本tr應該是內聯元素，這就會導致每一次新增的成員的位置跑到表頭的上方。對此原因，官方給出解釋：
就是瀏覽器看到tr-item元件時，認為是無效的，Vue只有在瀏覽器解析和標準化HTML後才能獲得模板內容。
3.元件化構建Vue.component中的預定義選項template裡的內容必須是由一對標籤開始和結束，你可以在這對標籤中插入其他標籤，但是如果是一個標籤接著一個標籤，它就會認為是多個模板。例如：'<td></td><td></td>'它就會只認為'<td></td>
'<tr><td></td><td></td></tr>'它就會認為'<tr><td></td><td></td></tr>'是這個模板了。