vue实用技巧总结

developerworks 发布于2019-08-20 16:56 / 1076人阅读

摘要：这里要注意的是使用，如果你的是写死的，则需要配置和，如或者你的可以写成，则可不配置和未完待续关注作者吧

总结一些新手可能会迷惑但是项目中常用的小技巧

.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

未完待续~

关注作者吧~

云服务器混合云技巧总结应用技巧总结 Vue开发技巧年终总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论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