vue實用技巧總結

總結一些新手可能會迷惑可是項目中經常使用的小技巧

.native

給組件綁定原生事件

對於通常的html元素，綁定自定義事件使用v-on便可，可是在某個組件的根元素上監聽一個原生事件，好比：

<my-component v-on:click="doTheThing"></my-component>

咱們會發現這樣是不起做用的，可使用 .native 修飾

<my-component v-on:click.native="doTheThing"></my-component>

自定義組件上的v-model

你們知道v-model 是用來進行數據雙向綁定，經常使用於表單控件元素上數據的自動更新。
如：

<input v-model="something">

其實它不過是下面示例的簡寫

<input v-bind:value="something" v-on:input="something = $event.target.value">

因此在自定義組件上也可使用v-model

<custom-input v-model="something"></custom-input>

至關於下面示例的簡寫

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

在組件內部，經過this.$emit('input', value)能夠改變something的值

使用require.ensure按需加載組件

使用vue-cli構建項目，默認狀況下，路由文件（/router/index.js）使用import引入vue組件：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'

執行npm run build以後，webpage會打包成一個總體的js文件：app.[contenthash].js，這個文件的體積是很龐大的，幾兆甚至幾十兆，加載起來會很慢。

這時候咱們須要將文件拆分紅多個小文件，分模塊打包，使用webpage的require.ensure，加上chunk名，chunk名相同的會被打包到同一個js文件裏面。

const Home = resolve => {
    require.ensure(['./views/index.vue'], () => {
        resolve(require('./views/index.vue'), 'chunkname1');
    });
};

const List = resolve => {
    require.ensure(['./views/list.vue'], () => {
        resolve(require('./views/list.vue'), 'chunkname2');
    });
};

const List2 = resolve => {
    require.ensure(['./views/list2.vue'], () => {
        resolve(require('./views/list2.vue'), 'chunkname2');
    });
};

這裏要注意的是使用chunk，若是你的filename是寫死的，則須要配置chunkFilename,和publicPath，如：

module.exports={
    entry:'./src/js/a.js',
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'js/output.js',
        publicPath:"./",
        chunkFilename:'js/[name].js'
    }

或者你的filename能夠寫成：filename:'[name].js'，則可不配置chunkFilename,和publicPath

未完待續~

---

關注做者吧~