vue2
vue2,vue3新建项目的方法
npm 创建 只能创建最新的vue3(会引导你添加需要的组件) npm init vue@latest vue-cli 命令行创建(可以选择vue2还是vue3,但是创建出来的是一个空的vue) vue create hello-world vue-cli 可视化创建(可以新建项目,也可以给项目添加 ......
vue2调用摄像头拍照并识别二维码
参考: https://blog.csdn.net/qq_33270001/article/details/124632110 https://www.cnblogs.com/skylineStar/p/16149694.html 图像解二维码:qrcode-decoder 摄像头需要在本地和ssl ......
Vue2.0计算属性的实现
说一下整体思路: 在初始化的时候会给每一个计算属性都创建一个相对于的wathcer对象,然后这个watcher对象在创建的时候都会传入三个参数,第一个是vm实例对象,第二个就是在外面封装好的一个函数,这个函数主要是用于拿值,就是自己在外面写的return里面的值.第三个是一个对象,{lazy:t ......
解决vue2中methods写的方法无法使用箭头函数
1.情况:在method写递归函数,函数内使用了this.变量,报错变量为undefined,原因是function内this指向改变,因改写为箭头函数,使其this不被改变, 但是methods内又无法写箭头函数 2.解决:使用var获取this,供函数内使用 ......
Vue2 移动端 ui库 MintUI
MintUI MintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。 http://mint-ui.github.io/docs/#/zh-cn2 Vant组件库也是基于移动端的vue组件库(有赞团队)。 https://vant-contrib.gitee.io/vant/v ......
关于vue2路由跳转问题记录
1. vue 路由间跳转和新开窗口的方式(query, params) 路由间跳转配置: query方式:参数会在url中显示 this.$router.push({ path: '路由地址', query: { msg: 'hello world' } }) params方式:传参数据不会在导航栏 ......
vue2 学习
vue标签含义 1、 <el-button :logding="buttonLoading" type="primary" @click="submitForm">确 定</el-button> <!-- 1,logding属性=true 会一直现在转圈圈显示状态。 2.buttonLoading属 ......
vue2 学习提纲
## 手册 * 慕课网-vue2手册:http://www.imooc.com/wiki/vuelesson/vueslot.html ## 视频 * vue2.5入门 https://www.imooc.com/learn/980 ``` ``` * echarts数据报表 https://cod ......
vue2.0中使用element-ui时报错
1、重新安装依赖 a) yarn add babel-preset-es2015 --dev b) npm install babel-preset-es2015 -D 2、修改babel.config.js配置 module.exports = { presets: ['@vue/cli-plug ......
vue2如何重写数组
Vue中使用Object.defineProperty重新将对象中的属性定义,如果是数组的话需要重写数组原型上的方法。 代码如下: 1 function notify() { 2 console.log('视图更新') 3 } 4 let data = { 5 name: 'jw', 6 age: ......
上下翻页按钮,上一页 下一页 vue2,分页
已经有每一页对应的数据,一共五页,点击到最后一页再点下一页按钮时回到第一页 <div class="button-list"> <button @click.prevent="handleLeft"> <i class="el-icon-arrow-left"></i> {{ifchinese ? ......
下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS
需求:点击下拉菜单按钮,显示子菜单并有过渡效果 过渡效果:缓慢展开收起 环境:vue2 CSS 分析:子菜单的高度有没有固定,如果子菜单的高度固定,可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果 图片展示: 展开状态 收起状态 实现代码: <template> <div> ......
【Vue2.x】vue2给对象动态添加响应式属性
# 1 vue2给对象动态添加响应式属性 > vue2里对象的响应式是通过Object.defineProperty()实现 ## 1.1 给对象添加单个响应式属性 使用Vue.set()或this.$set() 参数 - 第一个参数,是目标对象 - 第二个参数,是要添加的属性名字 - 第三个参数, ......
Vue2 与 Vue3 生命周期对比
Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们注册js方法,可以让我们达到控制整个过 ......
Vue2项目开发时遇到:<template v-for> key should be placed on the <template> tag
问题缘由: Vue2和Vue3中,对待template中存在v-for行为的组件正好相反 Vue2中key必须写在子元素中,Vue3中key必须写在template中,不然会报错 使用volar插件,使用Vue3语法检测代码,导致错误 解决方案: 1、禁用volar 2、貌似可以修改配置项,但尚未尝 ......
Vue2知识点简要
一、双向绑定原理 Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式), 编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式); 详细的是主要是定义一个Observ ......
vue2插槽的透传
多组件嵌套的情况下,有时候会希望父组件向孙子组件(或者更小的辈分)的slot中插入内容, 显然,这需要在孙子组件里面用``, 在父组件里面用``。但是在子组件中应该如何进行插槽的声明,才能做到类似中继的作用呢。 一般地,我们可以用下面的方式来声明: ```vue $emit('fetched-dat ......
系统化学习前端之Vue(vue2 组件通信)
## 前言 前文 vue2 基础中聊过,页面本质是 DOM 树,而在vue2 中 组件 = vm 实例对象 = DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。 ## vue2 组件通信 组件通信即组件之间的数据传递。 ### props 和 ......
Vue2入门之超详细教程十一-条件渲染
1、简介 条件渲染: 1. v-if 写法: (1) v-if=”表达式” (2) v-else-if=”表达式” (1) v-else=”表达式” 适用于:切换频率较低的场景 特点:不展示的DOM元素直接被移除 注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被”打断 ......
vue2响应式原理
一、初识响应式原理 如果我们在 Vue 实例中声明过的数据发生了改变,那么所有用到这份数据的视图都会更新重新渲染,我们称这些数据就是响应式数据。响应式概括来说就是 数据驱动视图的自动更新。 <div id="app"> {{ obj.message }} </div> let data = { ob ......
uniapp 组件中使用页面的生命周期(vue2)
用于直接在组件中使用onLoad,onBackPress等 因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法! 使用mixin this.$c ......
vue2项目中使用dhtmlx gantt甘特图插件
官网示例地址:https://docs.dhtmlx.com/gantt/samples/ 可以在这里查看绑定数据的格式 ### 安装依赖 ``` npm install dhtmlx-gantt --save ``` ### 创建一个甘特图组件 ```javascript ``` 到这里传入数据就 ......
Vue2实现双向数据绑定原理
Vue2.x 采用数据劫持结合发布订阅模式(PubSub 模式)的方式,通过 Object.defineProperty 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选 ......
VUE2/3差异之模板写法
Options API (选项API) 传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。虽然尽量一个文件不要写太多代码(1000行内),但总有一些大型组件要一个文件写很多代码 优点:各选项编写写位置固定,结构清晰缺点: 代码组织性差,相似的逻辑代码不便于复用 逻辑 ......
vue2.x中使用cherry-markdown
安装依赖 npm install cherry-markdown --save 子组件写法 <template> <div @click.prevent.stop> <div :id="mdId" :style="{height:height+'px'}" /> </div> </template ......
深入vue2响应式原理,在对象或数组新增属性无响应
# 深入vue2响应式原理,在对象或数组新增属性无响应 # 解决方法 # 前言 ``` 该问题只存在vue2, 基于Object.defineProperty的特性,vue3中的proxy已经解决了该问题,但也存在兼容性问题, 例如IE系统任意版本都不支持. ``` ![image-20230524 ......
vue2和vue3数据双向绑定原理
## vue2数据双向绑定和vue3数据双向绑定的原理透析 参考资料 : https://www.jianshu.com/p/d7e2efde434b https://www.jianshu.com/p/d7e2efde434b 背景:面试官10个有9个都会问这个问题,所以深究一下啦 ### 需 ......