Vue學習筆記

一：安裝

方式1：

腳手架安裝

#全局安裝 vue-cli

npm install vue-cli --global

# 創建一個基於 webpack 模板的新項目

vue init webpack first-vue

# 進入項目，安裝依賴，啟動項目

cd my-project

npm install

npm run dev

方式2：

直接引入對應的js文件

二：Vue基礎知識

1、插值表達式
語法：
　　{{值}}
作用：
　　將表達式執行的結果 輸出當調用元素的innerHTML中；還可以將數據綁定到視圖

2、指令-迴圈指令
基本語法1：
　　<any v-for="tmp in array"></any>
基本語法2：
　　<any v-for="(value,index) in array"></any>
作用：
　　在遍歷array這個集合時，將臨時變數保存在tmp中，創建多個any標簽

3、指令-選擇指令
語法：
　　<any v-if="表達式"></any>
　　<any v-else-if="表達式"></any>
　　<any v-else="表達式"></any>
作用：
　　根據表達式執行結果的真假，來決定是否要將當前的這個元素 掛載到DOM樹

4、指令-事件綁定
    語法：
        <any v-on:eventName="handleEvent"></any>
    作用：
        給指定的元素 將handleEvent的方法綁定給指定eventName事件

5、指令-屬性綁定
  基本語法：
    <any v-bind:myProp="表達式"></any>
    補充，支持簡寫：
    <any :myProp="表達式"></any>
  作用：
    將表達式執行的結果 綁定 到當前元素的myProp屬性

    <img v-bind:src="'img/'+myImg" alt="">
   動態樣式綁定
    <p :style="{backgroundColor:myBGColor}">動態樣式綁定</p>

   動態樣式類綁定
      <h1 :class="{myRed:false}">動態樣式類的綁定</h1>

6、指令-雙向數據綁定
    方向1：數據綁定到視圖
    方向2：將視圖中（表單元素）用戶操作的結果綁定到數據

    基本語法:
      <表單元素 v-model="變數">
      </表單元素>

三：組件化

所謂的組件化，就像玩積木一樣，把封裝的組件進行復用,把積木（組件）拼接在一起，構成一個複雜的頁面應用程式。

組件樹就是由各個組件構成的一種數據結構，它存在的意義是為了幫梳理應用程式

1、組件的創建
  全局組件
    Vue.component('my-com',{
      template:`
        <h2>it is a header</h2>
      `
    })
      局部組件
    new Vue({
        components:{
            'my-footer':{
           template:''
         }
        }
    })
2、組件使用
    作為普通的標簽去使用
    <my-com></my-com>


3、註意事項
    1.組件的id和使用方式 遵循烤串式命名方式：a-b-c 
    2.如果一個組件 要渲染多個元素，將多個元素放在一個頂層標簽中，比如div、form
    3.全局組件可以用在id為example的範圍內的任何一個組件內部，直接調用可以；但是局部組件只能在父模板中直接調用

 四、自定義指令

1、創建和使用
 Vue.directive('change',{
    bind:function(el,bindings){
    //首次調用
    },
    update:function(el,bindings){
    //只要是有數據變化，都會調用
    },
    unbind:function(){
    //解綁
    }
 })
 <any v-change="count"></any>