Vue.js經常使用開發知識簡要入門（一）

Vue-cli建立項目

• 安裝：npm install -g vue-cli

• vue list命令 ：查看官方模版列表

• 初始化項目：vue init webpack 項目名

• 安裝依賴：npm install

• 運行：npm run dev

Vue動畫支持（transition）

以DIV從右到作的飛入動畫爲例。
在須要加動畫的組建上設置屬性：transition="動畫名稱"

<template>
  <div v-show="showFlag" transition="move" class="food">
  </div>
</template>

這裏給要添加動畫的組建設置了transition屬性，而且值等於move，也就是去個名字

而後在style樣式中分別寫兩個樣式：

<style lang="less" rel="stylesheet/less">
  .food{
    // 其餘樣式
    ... ...
    &.move-transition{
      transition: all .2s linear;
      transform: translate3d(0,0,0);
    }
    &.move-enter,&.move-leave{
      transform: translate3d(100%,0,0);
    }
  }
</style>

樣式以「動畫名稱-transition」爲名，表示動畫開始的設置，以「enter」「leave」結尾的表示動畫結束的設置。

這樣就完成了一個簡單的Vue動畫。

父組建調用子組件方法（v-ref）

parent組件中有child組件，而且在子組件上設置v-ref屬性：

<template>
   // child組建
   <child v-ref:child></child>
</template>
<script type="text/ecmascript-6">
    export default{
        methods: {
            methodA() {
                // 調用子組件方法
                this.$refs.child.show();
            }
        }
    };
</script>
<style lang="less" rel="stylesheet/less">
</style>

注意：v-ref後面的值是以「:」鏈接的而不是「=」號。「this.$refs.child」就是獲取到子組件。

child子組件內容

<template>
   <div>我是child組建</div>
</template>
<script type="text/ecmascript-6">
    export default{
        methods: {
            show() {
                //方法內容
            }
        }
    };
</script>
<style lang="less" rel="stylesheet/less">
</style>

子組建通知父組件（事件派發$dispatch）

在子組件方法中

this.$dispatch('content.toggle', type);

「ratingtype.select」是自定義事件名，在父組件中能夠監聽該事件，在父組件中定義events屬性處理事件

events: {
      'ratingtype.select'(type) {
        this.selectType = type;
      },
      'content.toggle'(onlyContent) {
        this.onlyContent = onlyContent;
      }
}

DOM綁定（v-el）

經過給div設置「v-el:xxx」就如同給div設置一個id屬性，而後能夠經過這個id獲取DIV元素。

<div class="food" v-el:food>

而後在使用$els便可訪問該元素

let food = this.$els.food;

food獲得的就是一個DOM對象

阻止元素點擊穿透和冒泡

<div @click.stop.prevent="test">test</div>

生命週期不從新加載（keep-alive）

在切換路由的時候不但願每次切換都從新被渲染一次，能夠在路由出口上添加keep-alive屬性便可

<router-view :user="user" keep-alive></router-view>

項目編譯打包注意

使用vue-cli建立的項目使用npm run build命令進行打包編譯成靜態文件。可是可能遇到以下異常：

- building for production...shell.js: internal error
Error: ENOENT: no such file or directory, stat 'D:\xxxxxapp\static\*'
... ...

此時，能夠嘗試更新shelljs包的版本，如項目中shelljs當前版本是0.6.0，那麼能夠更新至0.7.4（npm update shelljs@0.7.4）後再次進行build命令

---

++++++++++本人出售本人出售《Vue.js權威指南》，二手價20元！++++++++++