vue實用技巧總結

developerworks 發布于2019-08-20 16:56 / 1220人閱讀

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

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

.native

給組件綁定原生事件

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

我們會發現這樣是不起作用的，可以使用 .native 修飾

自定義組件上的v-model

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

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

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

相當于下面示例的簡寫

在組件內部，通過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

未完待續~

關注作者吧~

云服務器 GPU云服務器技巧總結應用技巧總結 Vue開發技巧年終總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83268.html

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

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

sshe 2019-08-23 12:00 評論0 收藏0
個人分享--web前端學習資源分享

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

sherlock221 2019-08-20 18:59 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

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

princekin 2019-08-20 11:28 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0