随笔分类 - Vue
摘要：不多说直接上代码 星星是使用的iconfont图标 <div> <ul> <li v-for='item in list' > <span class="iconfont icon-start-copy " :style="{color:item.isred?'gray':'red'}" @clic
阅读全文
摘要：语法： data-属性 绑定自定义属性,并赋值 <ul> <li v-for='item in list' > <span :data-index="item.id" @click ="cools($event)"></span> </li> </ul> 通过 ev.target.dataset.i
阅读全文
摘要：在我们的Vue-cli项目中会频繁的创建xxx.vue文件, 为了让我们有一个更好的编码体验,我们可以快速生成组件模板 如下图在VScode中点击左上角的文件 文件–> 首选项 --> 用户代码片段 然后搜索 vue.json 回车 下一步, 在vue.json 文件中插入如下代码 "Print t
阅读全文
摘要：ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码. 关闭eslint 如果当前项目使用了eslint，并且需要关闭。需要创建vue.config.js文件，采用如下代码： modul
阅读全文
摘要：路由守卫 在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化 全局路由钩子： //进入到某个路由组件之前 router.beforeEach((to, from, next) => { //会在任意路由跳转前执行，next一定要记着执行
阅读全文
摘要：路由模式 为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于 ——— 改变视图的同时不会向后端发出请求。 路由有两种模式：hash、history，默认会使用hash模式，但是如果url里不想出现丑陋hash值，在new VueRout
阅读全文
摘要：命名路由 我们可以给路由对象配置name属性，这样的话，我们在跳转的时候直接写name:main就会快速的找到此name属性对应的路由，不需要写大量的urlpath路径了 <router-link v-for="nav in navs" :key="nav.id" :to="{name:nav.na
阅读全文
摘要：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
阅读全文
摘要：简单路由实现 cnpm install vue-router -S or yarn add vue-router -S 引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件 router/index.js文件 import Vue from 'vu
阅读全文
摘要：自定义指令介绍 directives - 对普通 DOM 元素进行底层操作 (1) 自定义指令注册 当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实
阅读全文
摘要：每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，一般不做操作 挂载数据，绑
阅读全文
摘要：slot插槽 vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现 匿名插槽 在父组件中使用子组件的时候，在子组件标签内部写入内容。在子组件的模板中可以通过来使用 <div id="app"> <hello> <div>联通卡</div> <div>移动卡</d
阅读全文
摘要：组件之间通信方式 i. 父子组件传值 (props down, events up) ii. 属性验证 props:{name:Number} Number,String,Boolean,Array,Object,Function,null(不限制类型) iii. Ref this.$refs.
阅读全文
摘要：虚拟dom 频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法 虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想 (1) 提供一种方便的工具，使得开发效率得到保证 (2
阅读全文
摘要：一.模板语法 (1) 插值 a.文本 {{ }} 声明一条数据，然后用特殊的模板语法将其渲染出来（声明式渲染） b.纯HTML v-html慎用 ，防止XSS,CSRF（ (1) 前端过滤 （前端采用正则将容易注入的字符<等过滤掉） (2) 后台转义( < > 换成 < &g
阅读全文
摘要：vue的双向数据绑定原理 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES
阅读全文
浙公网安备 33010602011771号