vue

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 有如下三种方法: vue异步组件 es提案的import() webpack的require,ensure() 1.vue异步组件 将异步组件和 webpack 的 code-splitting 功能一起配合使用 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 1 /* vue异步组件技术 */ 2 { 3 path: '/home', 4 name: 'home', 5 component: resolve => require(['@/components/home'],resolve) 6 },{ 7 path: '/index', 8 name: 'Index', 9 component: resolve => require(['@/components/index'],resolve) 10 },{ 11 path: '/about', 12 name: 'about', 13 component: resolve => require(['@/components/about'],resolve) 14 } 2

基础写法，没有懒加载，打包分离代码 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 路由懒加载，ES6的import()方法。（按需加载） 这个是最常用的 import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld') Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld　　　　//或者　　　component: () => import("@/components/HelloWorld") } ] }) vue的异步组件，require()方法。（按需加载） import

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入： npm install webpack -g 或者（ npm install -g webpack ），安装完成之后输入 webpack -v ，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install

路径：文件>>首选项>>用户代码片段>>输入vue "Print to console": { "prefix": "vue", "body": [ "<style scoped lang=\"scss\">", "</style>", "", "<template>", "\t<div>\n\t\tHello World$0\n\t</div>", "</template>", "", "<script>", "//import x from ''", "export default {", "\tname: 'Unnamed',", "\tprops: {},", "\tdata () {", "\t\treturn {", "\t\t}", "\t},", "\tcomponents: {},", "\tcomputed: {},", "\twatch: {},", "\tmethods: {},", "\tbeforeMount () { },", "\tmounted () { },", "\tactivated () { }", "}", "</script>", "" ], "description": "vue output to vue-template" } 参考： https://blog.csdn.net/jbj6568839z/article

const Core = require("@alicloud/pop-core"); var client = new Core({ accessKeyId: "xxxxxx", accessKeySecret: "xxxxxxx", endpoint: "https://dysmsapi.aliyuncs.com", apiVersion: "2017-05-25" }); var params = { RegionId: "cn-hangzhou", PhoneNumbers: mobile, SignName: "十面埋伏", // 签名名称 公司名 TemplateCode: "xxxxx", // --短信模板id TemplateParam: "{'code':'aaaaa'}" }; var requestOption = { method: "POST" }; await client.request("SendSms", params, requestOption).then( result => { if (result.Code == "OK") { this.info.result = true; this.info.msg = "发送成功"; } //this.ctx.body = JSON.stringify(result); // console

// 处理路由拦截器 导航守卫 import router from '../router' import progresss from 'nprogress' import 'nprogress/nprogress.css' // 全局前置守卫 当 路由发生变化时 这个方法里的回调函数就会执行 router.beforeEach(function (to, from, next) { progresss.start() // 开启进度条 // 权限拦截 认为有token 让过去 没token不让过 if (to.path.startsWith('/home')) { // 确定要去检查的范围 let token = window.localStorage.getItem('user-token') if (token) { next() // 放过 } else { next('/login') // 跳转到登录页 } } else { next() // 直接放过 } }) router.afterEach(() => { // setTimeout(() => progresss.done(), 1000) progresss.done() // 关闭进度条 }) 来源： https://www.cnblogs.com/wtsx-2019/p/12546153.html

首先说一下会用到几个知识点 1. event.target.files[0] 获取的是上传的图片的一些参数如下图： 可以自己依次打印看看 console.log(event, event.target, event.target.files, event.target.files[0]) 2. HTML5中FileReader 在FileReader出现之前，前端的图片预览是这样实现的： 把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。 这种方法的缺点是： 必须要先把图片上传到服务器。如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。 有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，这种方法的思路是： 通过FileReader.prototype.readAsDataURL() 方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。 let that = this; let file = event.target.files[0]; let reader = new FileReader(); // 调用reader.readAsDataURL()方法

　　首先描述一下需求，就是希望在长按元素的时候实现某种操作，话不多说，下面就介绍一下方法： 给需要长按的元素添加 touchstart 和 touchend 两个事件： <div v-for="(item, index) in fileList" :key="index" @touchstart="touchstart(index,item)" @touchend="touchend(index)"> // 这里是循环的一些元素 </div> 在methods中添加事件： touchstart(index,item) { clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器 this.Loop = setTimeout(function() { //这里是长按以后需要触发的事件 }.bind(this), 1000); // 这里的1000是指需要长按的时间，单位为ms }, touchend(index) { // 这个方法主要是用来将每次手指移出之后将计时器清零 clearInterval(this.Loop); } 　　通过上面的两步就能实现长按事件了。 来源： https://www.cnblogs.com/belongs-to-qinghua/p/12545384.html

1.安装依赖 npm i lib-flexible -S npm i px2rem-loader -D 2.在src文件夹下新建utils文件夹，在utils文件夹下新建flexible.js,其代码如下 (function() { // flexible.css var cssText = '' + '@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr

vue.js是一个用于创建web交互页面的库 从技术角度讲，vue专注于MVVM模型的viewModel层，它通过双向数据绑定把view层和model层连接起来，实际DOM封装和输出格式都被抽象为Directive和Filters。 概念综述： ViewModel 一个同步model和view的对象，在vue中，每个vue实例都是一个ViewModel。他通过构造函数vue或其他子类被创建出来的。 var vm=new Vue({/*options*/}) 这是你作为一个开发者在使用vue时主要打交道的对象。 View（视图） 被vue实例管理的DOM节点 vm.$el //The View vue使用基于Dom的模板，每个vue实例都关联着一个DOM元素。当一个vue实例被创建时，他会地柜遍历根元素的所有节点，同时完成必要的数据绑定，当这个视图被编译后，他会自动相应数据变化。 在使用vue时，除了已定义指令，几乎不必直接接触DOM。当数据发生变化时，视图将会自动发生更新，更新精确到一个文字节点。同时为了更好地性能，这些更新是批量异步执行的。 Model（模型） 是一个轻微改动过的原生js对象 vm.$data vue中的模型就是普通的js对象，也可以叫做数据对象，一旦某对象被作为Vue实例中的数据，他就成为一个“反应式“的对象了，你可以操作他们的属性