vue-app開發入門

vue的中文文檔在這裏

1. 簡單地引用vue.js

使用vue框架最簡單的方式就是寫一個HTML頁面而後引用vue.js啦. 使用<script> 標籤就能夠將vue.js導入而且使用它來構建vue app了.

這種方法是官方建議的, 像我這種新手固然也是使用這種方案的啦.

記錄一些vue的模板語法

相關連接

• {{}} 雙大括號綁定內容(相似於innerHtml )
• v-bind 綁定屬性 (el: v-bind:style="variable")
• v-on 綁定事件 (el: v-on:click="onClick")
• v-if 條件渲染 (el: v-if="bool") 

<ul id="example">
<li v-for="(item, index) in items">{{ index }} - {{ item.message }}
</li>
</ul>

v-model 輸入數據綁定 

<input v-model="model">
<p>Message is: {{ model }}</p>

建立vue-app實例

若是要使用vue的」插值語法」和vue的種種api, 則必須在HTML的js代碼中創建vue實例. 
模板以下:

var app = new Vue({
    el: '#app', //vue實例的承載元素
    data: {}, //數據
    method: {}, //方法
    computed: {}, //計算屬性. 當插值時使用的數據須要過於繁瑣的計算時, 使用計算屬性.
    /*
    生命週期鉤子, 詳見vue的文檔
    */
});

生命週期函數鉤子

2.使用vue-cli構建

vue-cli是個node的模塊, 因此想要使用vue-cli, 首先須要配置node運行環境, 而後再使用npm安裝vue-cli.

1. vue-cli構建vue-app的流程

1. 使用內置的模板構建vue-app的項目 
   vue init webpack project-name
2. 按需修改項目的詳細信息
3. 使用npm安裝依賴 
   npm install --sava
4. 項目開發碼代碼
5. 測試 
   vue run dev
6. 使用webpack打包項目 
   webpack

2. vue-app項目目錄簡要分析

• index.html ———項目主頁入口, vue-app實例的承載元素就在這裏定義
• src/ ——————項目的源碼文件目錄, 爲項目寫的全部的組件/js等代碼都在這裏
• src/main.js ——-app的入口文件, 它將App.vue做爲模板, 以index.html中的承載元素初始化Vue-app實例.
• src/APP.vue ——app實例的主模板文件, 是整個vue-app最外層的總框架
• src/components—模板目錄, 原則上應該將全部的component都放在這裏
• src/assets ————不須要編譯的資源放在這裏
• src/router —————路由目錄. 若是初始化app時選擇了route, 則會有此目錄
• src/router/index.js —路由配置文件. 在這裏指定單頁面應用的頁面跳轉
• build/ —————webpack的配置文件就在這裏, 記錄了app的構建規則 webpack入門

3. vue模板

1. 模板的模板

<template>
<!--HTML代碼-->
</template>

<script>
//Javascript代碼
</script>

<style scoped>
//CSS代碼, 使用scoped屬性能將這段style代碼限制在此組件內部而不會影響外部
</style>

2. 組件的構造方法

在node中, 一個js文件就是一個模塊, 使用 import 導入模塊而使用 export 導出模塊. 在vue中, 一個vue文件即包含了這個組件的view和controller, 而對於javascript來講, 這個vue文件就是一個js模塊. 所以, 應該使用export 導出這個組件的對象實例, 這樣才能在外部導入這個組件. 
構造一個對象的實例和構造一個vue實例是相似的, 都 須要指定html中的"承載元素"和 data等等屬性.

export default {
 el:'#component',
 data: function(){
    return somedData; //注意, 一個組件的data應該是一個函數對象而且使用return返回data對象
 }
 method: function(){} //somefunction
}

3. 組件間的數據傳遞

父組件->子組件 

　　父組件傳數據給子組件須要兩步操做

• 　　在子組件中聲明須要的數據並完成view和model的綁定;
• 　　父組件中將數據傳給子組件 

//子組件:
<template>
 <div>
      <div>{{someText}}</div>
      <div v-bind:style="{color : colorCode}">This font-color should be setted by parent</div>
 </div>
</template>
<script>
 export default {
      data(){
         return {
             someText: "text"
         }
      }
      props: {
          colorCode: String  //使用props聲明子組件須要的數據(屬性), msg是屬性的"name", String用來指定msg值的類型
      }
 }
</script> 

//父組件:
<template>
 <div>
     <child v-bind:colorCode="#00aaff"></child>
 </div>
</template>
<script>
 export default {
     data: ()=>{},
     component:{
         child: require('componenets/child.vue')
     }
 } 
</script>

子組件->父組件 

　　子組件傳遞數據給父組件能夠有多種操做. 

• 　　子組件使用將數據封裝到組件實例並使用 export 導出
• 　　子組件使用」事件發射器(emit)」以」事件」的方式傳給父組件

4. 組件間的事件傳遞

子組件捕獲事件, 子組件處理
父組件捕獲事件, 父組件處理
子組件捕獲事件, 父組件處理
父組件捕獲事件, 子組件處理

前兩種的事件處理直接在script裏將事件」消費」掉便可; 然後兩種則須要使用不一樣的方式分別處理. 

- 子組件到父組件 

使用」事件發射器(emit)」, 子組件捕獲事件並將其」發射」給父組件, 由父組件處理 

- 父組件到子組件 

在 vue 1 中, 有 dispatch() 和 broadcast() 將父組件的事件分發給子組件, 而在 vue 2 中, 上述兩個方法已經被棄用, 取而代之的是狀態管理層Vuex. 詳見

//子組件
 <template>
  <div>
    <input type="text" v-model="msg" v-on:change="onInput">
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg: '請輸入值'
      }
    },
    methods: {
      onInput: function () {
        if (this.msg.trim()) {
          this.$emit('customedEvent', this.msg); //第一個參數是"發射"給父組件的事件名稱, 第二個參數是事件的附加參數.
        }
      }
    }
  }
</script>
 //父組件
 <template>
  <div>
    <child v-on:customedEvent="recieveMessage"></child>
  </div>
</template>
<script>
  export default{
    components: {
      child: require('components/child.vue'),
    },
    methods: {
      recieveMessage: function (text) {
        alert(text);
      }
    }
  }
</script>

注意事項

1. 每個組件的最外層只能有一個根元素(template不是一個元素)