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不是一個元素)