Vue入門基礎

## Vue語法

1.Vue.js模板語法

• 插值語法
  

①文本插值：數據綁定{{}},如：<p>{{messega}}</p>；

②html插值：使用v-html指令輸出html代碼，如<div v-html="message"><div>;

③屬性綁定：使用v-bind指令，如：<div v-bind:class="{'className':boolean}"></div>;

④表達式：完全支持JavaScript表達式；方式1:採用{{}},方式二：採用v-bind,如：{{5+5}}、<div v-bind:id="'list-'+index"></div>;

指令
⑤指令：指令是帶有v-前綴的特殊屬性，如：v-if、v-bind；

⑥參數：參數在指令後用冒號:指明，如：<a v-bind:src="hhtp://baidu.com">url</a>;

⑦修飾符：修飾符是以半角句號.指明的特殊後綴，用於指出一個指定應該以特殊方式綁定，如.prevent修飾符告訴v-on指令對於觸發的點擊事件調用event.preventDefault(),如：<button v-on:prevent="onClick">點擊</div>；

⑧用戶輸入：用戶輸入字段可以用v-model指令來實現雙向數據綁定,如：<input v-model="data">;

過濾器
過濾器：過濾器採用管道符號|，過濾器本質是一個函數，如：{{ data | filterA | filterB(arguments)}}、<div v-bind:id="idData | format"></div>；

縮寫：vue爲最長用的兩個指令提供了縮寫，如<a v-bind:src="url"></a>縮寫爲<a :src="url"></a>;<a v-on:click="fn"></a>縮寫爲<a @click="fn"></a>;

實例
①構造器：每個vue應用都是通過構造函數vue()創建一個vue的根實例來啓動的；
②屬性、方法：每個vue實例都會代理data對象裏所有的屬性(雙向數據綁定)，同時也擁有實例的屬性和方法，這些實例的屬性、方法用$與data對象裏的屬性、方法做區分(單向數據)；

var person={name:'Jhon',age:22};
var app=new Vue({
  data:person
});
consoel.log(person.age);//22
consoel.log(app.age);   //22
<!-- data.$age -->

2. vuet條件與循環

1. 條件判斷：
   
   1. 條件判斷語句：v-if指令
   2. else語句：v-else指令
   3. else-if語句：v-else-if指令
   4. 展示判斷：v-show指令

2. 循環語句：

   1. 循環語句：v-for指令，如：v-for=item in list、v-for=(value,key,index) in object、v-for="n in 10"、v-for="n in [1,23]"

3. 計算屬性computed類似於method，在效果上兩者是一樣的；但method是通過頁面事件觸發人爲去改變屬性值，但computed是基於緩存的，只有相關依賴發生改變是纔會重新取值；computed屬性默認只有getter但可人爲添加setter方法；

4. 樣式綁定

html的class和syle屬性都是用來設置元素的樣式，vue中採用v-bind:class、v-bind:style進行綁定，並且進行了增強，表達式結果可以爲string 、array、object;如：

1. 類樣式：class

  <div class="static" v-bind:class="{active:isActive,'err':isErr}"></div>
 <div v-bind:class="[static err active]"></div>
 <!-- 編譯結果均爲： <div class="static active err"></div> -->

1. 內聯樣式:style

   使用v-bind：style綁定的內聯樣式，vue會自動檢測並添加響應的前綴

   <div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>
   <div v-bind:style="[obj1,obj2]"></div>
   <!--編譯結果均爲： <div style="color:red;font-size:13px;"></div> -->

5. 事件處理

vue應用採用v-on來監聽事件，此外vue提供了事件修飾符老處理DOM事件細節；並添加了按鍵修飾符來監聽鍵盤事件；此外修飾符可以串聯使用；

• 事件修飾符：.stop、.prevent、.capture、.self、once

<!-- 1.阻止事件冒泡 -->
<a v-on:click.stop="callFn"></a>
<!-- 2.提交事件不重載頁面 -->
<form v-on:submmit.prevent="onSubmmit"></form>
<!-- 3. 添加事件監聽器是使用事件捕獲模式 -->
<div v-on:click.capture="callFn"></div>
<!-- 4. 只在事件元素本身觸發時觸發回調（阻止事件冒泡、捕獲） -->
<div v-on:click.slef="callFn"></div>
<!-- 5. 事件只能點擊一次 v2.1.4版本 -->
<a v-on:click.once="callFn"></a>
<!-- 6. 修飾器串用 -->
<div v-on:click.stop.prevent></div>

• 按鍵修飾符

通過調用阿年keycode來進行修飾，同時vue提供了常用13個按鍵的別名，如
enter、tab、delete、esc、space、up、down、left、right、ctrl、alt、shift、meta，如：
<div v-on:keyup.13></div><div v-on:keyup.enter></div>

6. vue表單

1.雙向數據綁定

vue 使用v-model指令在表單空間元素上創建雙向數據綁定，此時v-model會根據空控件類型自動選擇正確的方法來更新元素；如：

<input v-model="name">
<span>{{name}}</span>

1. 修飾符：.lazy、.number、.trim

默認情況下v-model在input事件中同步輸入框的值與數據，同時用戶可以添加一個修飾符lazy，從而將數據轉變爲在change事件中進行同步；同時用戶可以給v-model添加.number使輸入值自動轉變爲 Number類型；也可以添加.trim修飾符使輸入值自動過濾首尾的空格；如：

<input v-model='name'/>
<input v-model.number="age"/>
<input v-model.trim="text">

7.vue組件

同angular、react一樣，vue採用組件化；組件可以擴展html元素，封裝可重用的代碼；使得用獨立可重複的小組件來構建大型應用成爲可能；

• 註冊全局組件：Vue.component(tagName,options)、html中使用<tagNAme></tagName>
• 局部組件：new Vue({el:'container',component:{'childCom':Child}})
• Prop：父組件用來傳遞數據的一個自定義屬性；該屬性可以傳遞給子組件，子組件如需使用，需要顯式的用props聲名prop屬性,如：

  <div id="app"><child message="data from parentCom"></child></div>
  <script>
    Vue.componet('child',{props:['message'],template:'<span>{{message}}</span>'});
    new Vue({el:#app})
  </scipt>

• 動態prop:父組件中通過v-bind動態綁定的數據，當該數據變化時，變化也會傳遞給子組件；
• Prop驗證：組件可以通過type屬性給prop設置驗證，同時也可以通過validator自定義驗證方法；
• 自定義事件：父組件使用props向子組件傳遞數據，子組件向父組件傳遞數據需要使用自定義事件。可以使用v-on綁定自定義事件；每個Vue實例都實現了事件的接口(Events interface)，①$on(eventName)：監聽事件；②$emit(eventName):廣播事件；

  <div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

• 自定義指令

  除了使用vue內置核心指令(v-model、v-show),Vue也用於用戶註冊自定義的指令，①全局指令：Vue.directive('dirtName',{})；②組件內指令：new Vue({el:'#app',directives:{}});
  

  1. 鉤子函數：自定義指令提供了5個鉤子函數：

  • bind:只調用一次，指令第一次綁定到元素時使用，可以用來執行初始化動作；
  • inserted:被綁定元素插入父節點時調用；
  • update:被綁定元素所在的模板更新時調用，不論綁定值是否變化；
  • componentUpdated:被綁定元素所在模板完成一次更新時使用；
  • unbind:只調用一次，指令與元素解綁時調用；

• 路由

  vue.js+vue.router可以很簡單的實現單頁應用，vue-router會根據配置組件和路由映射，告訴vue-router在哪裏進行渲染；