文章分类 - vue
摘要：<input type="radio" :vlaue="radioNo" @change="retainRecord" @click="controlSingel($event)" > data() { return { changed: false } } methods: { retainRec
阅读全文
摘要：<back-top :visible="isShowBackTop" @click.native="backClick" /> BackTop.vue组件监听点击事件，需要加上.native （原生）修饰符。 v-on修饰符： .stop - 调用 event.stopPropagation()。.
阅读全文
摘要：Vue中的MVVM View层： 视图层 在我们前端开发中，通常就是DOM层。 主要的作用是给用户展示各种信息。 Model层： 数据层 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。 VueModel层： 视图模型层 视图模型层是View和Model沟通的桥梁。就是我
阅读全文
摘要：模块化有两个核心：导出和导入 CommonJS CommonJS的导出： CommonJS的导入： export export指令用于导出变量、函数、类，比如下面的代码： 也可以写成一下形式： export default 某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而是让导入
阅读全文
摘要：自定义指令一般用于操作底层dom inserted（）代表元素插入完毕，第一个参数是dom节点，第二个参数是传入的参数，可以不传，最多只能传一个参数。 <div id="box"> <div v-hello="'red'">111111</div> <div v-hello="'yellow'">2
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name
阅读全文
摘要：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如
阅读全文
摘要：1. slot插槽 (内容分发) slot翻译为插槽： 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。 插槽的目的是让我们原来的设备具备更多的扩展性。 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。 组件的插槽： 组件的插槽也是为了让我们封装的组件更加具有扩展
阅读全文
摘要：keep-alive遇见vue-router keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 它们有两个非常重要的属性: ① include - string | RegExp | Array。：只有匹配的组件会被缓存 ② exclude - stri
阅读全文
摘要：一、 响应式原理 什么是响应式原理？ 意思就是在改变数据的时候，视图会跟着更新。这意味着你只需要进行数据的管理，给我们搬砖提供了很大的便利。 VUE是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。 1.1 Object.defineP
阅读全文
摘要：1.根据ESLint的警告提示更改对应的代码 2.执行build 执行build，提示不能使用console.log 解决方案安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息打开项目控制台，点击依赖->开发依赖
阅读全文
摘要：项目上线相关配置 1.通过 node 创建 web 服务器。2.开启 gzip 配置。3.配置 https 服务。4.使用 pm2 管理应用。 1. 通过 node 创建 web 服务器 创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生
阅读全文
摘要：1.1 项目优化策略 1.生成打包报告，根据报告优化项目 2.第三方库启用CDN 3.Element-UI组件按需加载 4.路由懒加载 5.首页内容定制 2. 修改webpack的默认配置 默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，目的是为了屏蔽项目的配置过程，让程序
阅读全文
摘要：<!-- 分类表格 --> <el-table :data="cateslist" border row-key="cat_id"> <!-- 自定义索引列 --> <el-table-column label="#" type="index"> <template v-slot="scope">
阅读全文
摘要：nprogress添加进度条效果的实现 给项目添加进度条效果，先打开项目控制台，执行 npm install --save nprogress，安装nprogress 或者vue ui 中安装nprogress运行依赖 打开main.js，编写如下代码 //导入进度条插件 import NProgr
阅读全文
摘要：main.js中 // 设置请求拦截器,config是请求对象 axios.interceptors.request.use(config => { // 为请求头对象，添加 Token 验证的 Authorization 字段 config.headers.Authorization = wind
阅读全文
摘要：1. el-table中接收当前行绑定的属性值： <el-table-column prop="mg_state" label="状态"> <!-- 定义作用域插槽,通过 slot-scope 接收当前作用域数据 --> <template slot-scope="scope"> <el-switc
阅读全文
摘要：1. Message、MessageBox 消息提示的使用 element.js中引入 import { Message，MessageBox } from 'element-ui' Vue.prototype.$message = Message;Vue.prototype.$confirm =
阅读全文
摘要：项目中新建名为 .prettierrc 配置文件 内容为： { "semi":false, "singleQuote":true "printWidth":200 } "semi":false > 表示取消；结尾 "singleQuote":true > 表示用单引号包围字符串 "printWidt
阅读全文
摘要：如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。 1.导航守卫是什么 导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程， 在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。 2
阅读全文
浙公网安备 33010602011771号