随笔分类 - vue
vue 小记
摘要：keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 act
阅读全文
摘要：<!-- 内联样式，跟一般css添加样式相似， 多了一个绑定，样式添加通过数组方式，数组中以字符串显示 --> <div id="box" :class="['one','two']">{{mg}}</div> <!--数组中添加三元表达式，只有为true时候才起作用 --> <!-- 下边这种在变
阅读全文
摘要：mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 mixins就是混入。 一个混入对象可以包含任意组件选项。 同一个生命周期，混入对象会比组件的先执行。 与vu
阅读全文
摘要：vue v-lazy官方API：https://www.npmjs.com/package/vue-lazyload 1.安装插件 npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用 import VueLazyload from 'vu
阅读全文
摘要：Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders 方法一、 子组件通过$emit传值到父组件中修改
阅读全文
摘要：方法1： 子组件用v-if，当父组件有数据才渲染； <chird :listdata='listdata' v-if="listdata"></chird> // 通过判断有异步数据成功后，再渲染子组件 方法2： 子组件用wach，并且加上deep属性，可以直接在handler里面传入在子组件定义好
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <child-component> <p>分发的内容</p> <p>更多分发的内容</p> </c
阅读全文
摘要：<div id="app"> <h1 id="myh">{{msg}}</h1> <button @click="change">点击</button> </div> <script> var vm = new Vue({ el: '#app', data: { msg: 'hello' }, me
阅读全文
摘要：1.可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果 2.没有key。vscode编辑器会报红下划线 3.可以这样简单地理解，无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素。 4
阅读全文
摘要：在项目根目录创建vue.config.js文件。 module.exports = { lintOnSave: false, devServer: { overlay: { warning: false, errors: false } } } eslint常见报错： 文件末尾存在空行(eol-la
阅读全文
摘要：vue中使用:src="img"绑定本地静态资源失效问题 直接使用src本地引入图片正常显示 <img src="../assets/img/bs.png" alt="" /> 而使用v-bind时却意外的失效 <img :src="img" alt="" /> //js data() { retu
阅读全文
摘要：1、区别 watch中的函数是不需要调用的 computed内部的函数调用的时候不需要加() （内部的不是函数，而是属性对象只有get方法时的简写，其实它是属性对象） watch 属性监听 监听属性的变化 computed:计算属性通过属性计算而得来的属性 watch需要在数据变化时执行异步或开销较
阅读全文
摘要：利用ref属性//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div> </template> <script
阅读全文
摘要：Vue中子组件调用父组件的方法，这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child f
阅读全文
摘要：to.matched.some(record => record.meta.requiresAuth); 路由守卫 看下 es6的 some方法。 这里的意思是，to.matched 的数组中，如果在mate中有requiresAuth 那么就返回true，否则会返回false;
阅读全文
摘要：方法一： HTML <div id="app"> <button @click="getData($event,'100')">点我</button> </div> JS methods : { getData(e,num) { console.log(num); // 输出 100 } } 方法二
阅读全文
摘要：根据dom结构得出v-if与v-show的区别： v-if以删除或添加dom结点控制元素的显示隐藏 v-show是通过添加样式display:none控制元素的显示隐藏 总结： v-if和v-show都可以控制元素的显示或隐藏，具体该使用哪一个应该根据使用情况决定。建议只有一次或少量切换的时候使用v
阅读全文
摘要：1.安装node,安装npm # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui 【Vue】脚手架的一些个介绍 脚手架Vue CLI 是一个基于
阅读全文
摘要：项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。 首先，先确定项目中是否有path模块： 如果没有path模块需要先安装path npm install path --save 以下为v
阅读全文
摘要：require: 运行时调用，理论上可以运用在代码的任何地方，import：编译时调用，必须放在文件开头 懒加载：component: resolve => require(['@/view/index.vue'], resolve)用require这种方式引入的时候，会将你的component分别
阅读全文
