大家好，本文給各位做一下vue.js一個最基本的概念介紹。
vue.js 指令
<div id="app"> <div v-text="message"></div></div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})這個例子我們會得到，v-text所在的div元素的內部插入了'Hello Vue！'這段字符串，那么我們為什么會產生這樣一個結果呢，我們來分析一下：
這一步的意思是，實例化的這個Vue接管了#app元素，這里面的所有內容歸我管，也就是說可以接受vue的功能指令。
第二步是在#app里， v-text指令被識別出來，它接受的參數是'message'，vue獲取到這個參數，并在自己實例化的data里查找叫message的屬性，找到message的內容原來是'hello vue', 于是把'hello vue' 渲染到頁面。
類似的指令，還有v-if，條件判斷，v-for，列表渲染，v-on進行元素的事件綁定。等等。vue.js與頁面也就是template進行交互，主要是通過這些內置指令來完成的。
vue.js 組件
開發前端頁面，模塊化有很多好處，比如公用的sidebar，比如公用的日期選擇器。
模塊化還有一個好處，就是簡化開發邏輯，讓項目具有擴展性。
vue.js的模塊化主要體現在組件上，以組件為單位進行模塊化。
我們可以在實例化vue對象之前，通過Vue.component方法來注冊全局的組件，比如：
全局組件
// 告訴Vue，我需要一個組件叫做todo-item，它的配置如下，就是包含props和template那個對象Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'}) // 實例化一個vue對象，掛載在#app-7這個元素下，并且設定它的屬性，groceryList，是一個數組var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] }})模板：
<div id="app-7"> <ol> <!--因為注冊了全局的todo-item組件，所以在掛載范圍內我們可以直接使用todo-item標簽，來引用這個組件，--> <!--組件內部會被 todo-item配置表里的template替換，用來渲染。屬性todo也是配置對象里規定的，可以接受的參數。--> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol></div>
子組件
實際項目開發中，我們更多的使用的是子組件。
我們剛剛說的每個組件都有一個配置表，就是一個js對象，比如：
{ props: ['todo'], template: '<li>{{ todo.text }}</li>'}我們把這份配置引入到實例化對象里，就可以成為這個vue對象的子組件，比如：
new Vue({ components: { 'component-a' : { props: ['todo'], template: '<li>{{ todo.text }}</li>' } }})這樣的話，我們和之前全局組件一樣，也可以在實例化對象掛載的范圍內，直接使用<component-a>標簽來引用組件。
那么接下來，我們考慮一下，子組件里也可以有自己的子組件，比如：
new Vue({ components: { 'component-a' : { props: ['todo'], template: '<li>{{ todo.text }}</li>'， components: { 'component-b' : { template: 'i am component b'， components: { ... } } } } }})那么這樣下去，我們可以有無數個子組件，形成一個組件樹：
所以，一個vue.js架構的網站，我們可以看成是一個個組件的開發，最終存在一個根節點，就是項目里唯一實例化的Vue對象，而這一個個組件，其實就是一份份配置對象，以及它們對應的template 模板（html片段）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
