成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue實用技巧總結(jié)

developerworks / 1250人閱讀

摘要：這里要注意的是使用，如果你的是寫死的，則需要配置和，如或者你的可以寫成，則可不配置和未完待續(xù)關(guān)注作者吧

總結(jié)一些新手可能會迷惑但是項目中常用的小技巧

.native

給組件綁定原生事件

對于一般的html元素，綁定自定義事件使用v-on即可，但是在某個組件的根元素上監(jiān)聽一個原生事件，比如：

我們會發(fā)現(xiàn)這樣是不起作用的，可以使用 .native 修飾

自定義組件上的v-model

大家知道v-model 是用來進(jìn)行數(shù)據(jù)雙向綁定，常用于表單控件元素上數(shù)據(jù)的自動更新。
如：

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

所以在自定義組件上也可以使用v-model

相當(dāng)于下面示例的簡寫

在組件內(nèi)部，通過this.$emit("input", value)可以改變something的值

使用require.ensure按需加載組件

使用vue-cli構(gòu)建項目，默認(rèn)情況下，路由文件（/router/index.js）使用import引入vue組件：

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

執(zhí)行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

未完待續(xù)~

關(guān)注作者吧~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83268.html

相關(guān)文章

  • 前端最實用書簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術(shù)做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術(shù)做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評論0 收藏0

  • 個人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時候，會進(jìn)行總結(jié)或者分享會議！那么今天我就...

    sherlock221 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<