![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
菜鸟也能飞呀飞
这个作者很懒,什么都没留下…
展开
-
Vue2 和 Vue3 的响应式原理
Vue2 和 Vue3 的响应式原理原创 2022-07-18 00:38:27 · 446 阅读 · 0 评论 -
VUE3中的ref函数和reactive函数
VUE3.0中的 ref 函数,reactive 函数原创 2022-07-17 17:40:10 · 6543 阅读 · 3 评论 -
创建vue3.0项目的两种方式
创建vue3的两种方式及区别原创 2022-07-14 19:10:19 · 475 阅读 · 0 评论 -
uni-app 触底加载和下拉刷新
//获取热门商品列表数据async getGoodsList(callBack){ const res = await this.$myRequest({ url:'/public/v1/goods/search', data:{ pagenum: this.pagenum,//当前页数 pagesize: this.pagesize//每页显示条数 } }) this.total = res.data.message.total//总条数 this.goods = [..原创 2021-06-04 10:21:30 · 1430 阅读 · 1 评论 -
vue监听对象中的某个属性
需求:监听 addForm 对象中 protocolBm 的变化addForm: { name:'', url:'', protocolBm:''//协议},方案一:(直接监听,推荐)watch:{ 'addForm.protocolBm':{ handler: function(val, oldVal) { //动作 }, },}方案二:(巧用计算属性)computed: { getProt原创 2021-04-27 11:13:16 · 371 阅读 · 0 评论 -
el-table 使用过滤器
如图,后端传来的数据是0,1 我们需要把数组展示为 ‘是’,‘否’关键代码(html):<el-table-column prop="sf" label="是否参数代理" align="center"> <template slot-scope="scope">{{ scope.row.sf | csdlFilter }}</template></el-table-column>(js):filters: { csdlFilte.原创 2021-04-27 10:53:23 · 1830 阅读 · 0 评论 -
VUE sessionStorage 存取对象
存对象var user = {name: '李白', age: '27'}sessionStorage.setItem("userInfo",JSON.stringify(user));取对象var data = JSON.parse(window.sessionStorage.getItem('userInfo'));console.log(data.name)//'李白'重点:json.stringfy()将对象、数组转换成字符串;json.parse()将字符串转成json对象。.原创 2021-04-13 17:51:06 · 1660 阅读 · 0 评论 -
uni-app 小程序项目目录及文件作用介绍
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径,窗口样式,原生的导航栏,底部的原生 tabbar 等manifest.json 文件是应用的配置文件,用于指定应用的名称,图标,权限等App.vue 是我们的根组件,所有页面都是在App.vue 下切换的,是页面入口文件,可以调用应用的生命周期函数main.js 是我们项目的入口文件,主要作用是初始化 vue 实例并使用需要的插件uni.scss 文件的用途是为了方便整体控制应用的风格,比如按钮的颜色,边框风格,该文原创 2021-01-13 09:26:10 · 3655 阅读 · 0 评论 -
vue禁止浏览器页面复制/选中
在main.js 中加上如下代码//页面禁止复制document.onselectstart = function () { return false; }原创 2020-11-23 12:49:37 · 2092 阅读 · 0 评论 -
vue禁止浏览器后退
第一步,在main.js中加上如下代码//禁止后退功能window.history.pushState(null, null, window.location.href);window.addEventListener('popstate', function () { window.history.forward(-1); window.history.pushState(null, null, window.location.href);});第二步,在App.vue中加上如下代码原创 2020-11-23 12:45:59 · 744 阅读 · 0 评论 -
vue 父组件调用子组件的方法
方案一:通过ref直接调用子组件的方法;父组件⬇<Row> <application ref="appli"></application></Row><Row> <Button @click="commit_btn"> 点击调用子组件方法 </Button></Row>-------------------------------分割线---------------------------原创 2020-11-18 13:44:59 · 2387 阅读 · 0 评论 -
iview table 序列,分页后从1开始的解决方案
columns: [ { title: '序号', width: 70, align: 'center', render: (h,params) => { return h('span',params.index + (this.currentPage-1)*thi原创 2020-10-23 11:23:58 · 287 阅读 · 0 评论 -
el-date-picker 日期选择器-样式大小设置
今天做一个需求,用户针对老年人(看不起字),所以控件要求大一点,el-date-picker 日期选择器,官方没有给的 api 中没有修改大小的字段,于是 自己研究了下,完美解决!!在全局CSS文件中放置如下代码.el-date-picker { width: 600px;}.el-date-picker .el-picker-panel__content { width: 600px;}.el-picker-panel__icon-btn { font-size: 18原创 2020-08-19 16:18:27 · 26574 阅读 · 7 评论 -
VUE 项目中实现 element-ui 组件按需引入
按需引入借助 babel-plugin-component ,引入我们需要的组件,减少项目体积 npm install babel-plugin-component -D修改 babel.config.js 的内容//babel.config.js 全文内容如下module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component',原创 2020-08-11 11:24:37 · 3290 阅读 · 0 评论 -
关于 slot, slot-scope 和 v-slot
相同点:它们都是 VUE 提供的用来获取当前作用域内容的。不同点:在 2.6.0 中,vue 官方为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope。也就是说如果你 vue 的版本是2.6.0+ 的就要使用 v-slot下面我来介绍具体使用上的区别slot,slot-scope<template slot="order" slot-scope="scope"><!-- 这里也可以简写为 #order=原创 2020-07-22 00:23:31 · 574 阅读 · 0 评论 -
2021前端面试题和笔试题——Vue
对 MVVM 的理解MVVM分为Model、View、ViewModel三者。Model:代表数据模型View:代表视图ViewModel:连接视图和模型,实现数据的双向绑定Vue 实现数据双向绑定的原理采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发...原创 2020-06-02 17:59:32 · 13495 阅读 · 8 评论 -
Eslint 导致项目一直报错的解决办法
在使用图形化 vue-cli 创建项目时,默认启用了 Eslint 规则,启动项目时报错。解决方法有多种,这里我列举两种。第一种:直接关闭 Eslint在 package.json 中添加如下代码 "vue":{ "lintOnSave": false }第二种:利用格式化代码,顺着 Eslint 规范来在项目根路径创建 .prettierrc 文件,文件内容 如下...原创 2020-05-03 00:46:02 · 3845 阅读 · 0 评论 -
Vue 中路由导航守卫的介绍及使用
路由导航守卫是为了路由跳转之前做的检查及操作比如:用户没有登录 而是直接通过修改浏览器 url 来访问网页,这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查,符合条件后放行,不符合条件则强制用户跳转登录页面。代码如下://在路由对象上 挂载路由导航守卫router.beforeEach((to,from,next) => { //to 将要访问的路径 ...原创 2020-05-03 00:08:38 · 3063 阅读 · 2 评论 -
Vue中 watch 和 computed 之间的对比
watch<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...原创 2020-04-16 02:43:37 · 274 阅读 · 0 评论 -
如何下载vue-resource.js
1.vue-resource是干嘛用的Vue 要实现异步加载需要使用到 vue-resource 库。Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。2.怎么下载浏览器打开https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js这个网址,然后Ctrl+s保存到本地就可以了,然后js中引入本地的...原创 2020-04-07 22:42:27 · 4248 阅读 · 3 评论 -
VUE笔记2——Vue实例的生命周期
1. Vue实例的生命周期组件创建期间的四个钩子函数:beforeCreatecreatedbeforeMountmounted<div id="app"> <h3 id="h3">{{msg}}</h3> </div>var vm = new Vue({ el:"#app", ...原创 2020-04-07 21:33:25 · 151 阅读 · 0 评论 -
VUE笔记1
vue笔记1.什么是vue.jsVue.js 是目前最火的一个前端框架,React 是最流行的一个前端框架。Vue.js 是前端的主流框架之一,和Angular.js,React.js 一起,并成为前端散淡主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合前端的主要工作?主要负责MVC中 V 这一层;主要工作就是和界面打交道,...原创 2020-04-07 17:40:43 · 228 阅读 · 0 评论 -
Vue实现数据双向绑定的原理
Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的...原创 2020-04-04 02:20:15 · 202 阅读 · 0 评论