vue2

vue2,vue3新建项目的方法

npm 创建 只能创建最新的vue3(会引导你添加需要的组件) npm init vue@latest vue-cli 命令行创建(可以选择vue2还是vue3,但是创建出来的是一个空的vue) vue create hello-world vue-cli 可视化创建(可以新建项目,也可以给项目添加 ......
vue 方法 项目 vue2 vue3

vue2调用摄像头拍照并识别二维码

参考: https://blog.csdn.net/qq_33270001/article/details/124632110 https://www.cnblogs.com/skylineStar/p/16149694.html 图像解二维码:qrcode-decoder 摄像头需要在本地和ssl ......
摄像头 vue2 vue

vue2数组更改页面不刷新

赋值换成这样: this.$set(this.obj.list, 1, { name: '小红',age: 18}) ......
数组 页面 vue2 vue

Vue2.0计算属性的实现

说一下整体思路: ​ 在初始化的时候会给每一个计算属性都创建一个相对于的wathcer对象,然后这个watcher对象在创建的时候都会传入三个参数,第一个是vm实例对象,第二个就是在外面封装好的一个函数,这个函数主要是用于拿值,就是自己在外面写的return里面的值.第三个是一个对象,{lazy:t ......
属性 Vue2 Vue

解决vue2中methods写的方法无法使用箭头函数

1.情况:在method写递归函数,函数内使用了this.变量,报错变量为undefined,原因是function内this指向改变,因改写为箭头函数,使其this不被改变, 但是methods内又无法写箭头函数 2.解决:使用var获取this,供函数内使用 ......
箭头 函数 methods 方法 vue2

Vue2 移动端 ui库 MintUI

MintUI MintUI是饿了么团队开发的基于移动端的vue组件库。用于搭建移动端界面。 http://mint-ui.github.io/docs/#/zh-cn2 Vant组件库也是基于移动端的vue组件库(有赞团队)。 https://vant-contrib.gitee.io/vant/v ......
MintUI Vue2 Vue

关于vue2路由跳转问题记录

1. vue 路由间跳转和新开窗口的方式(query, params) 路由间跳转配置: query方式:参数会在url中显示 this.$router.push({ path: '路由地址', query: { msg: 'hello world' } }) params方式:传参数据不会在导航栏 ......
路由 问题 vue2 vue

vue2 学习

vue标签含义 1、 <el-button :logding="buttonLoading" type="primary" @click="submitForm">确 定</el-button> <!-- 1,logding属性=true 会一直现在转圈圈显示状态。 2.buttonLoading属 ......
vue2 vue

vue2 学习提纲

## 手册 * 慕课网-vue2手册:http://www.imooc.com/wiki/vuelesson/vueslot.html ## 视频 * vue2.5入门 https://www.imooc.com/learn/980 ``` ``` * echarts数据报表 https://cod ......
提纲 vue2 vue

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 ......
element-ui 时报 element vue2 vue

vue2如何重写数组

Vue中使用Object.defineProperty重新将对象中的属性定义,如果是数组的话需要重写数组原型上的方法。 代码如下: 1 function notify() { 2 console.log('视图更新') 3 } 4 let data = { 5 name: 'jw', 6 age: ......
数组 vue2 vue

上下翻页按钮,上一页 下一页 vue2,分页

已经有每一页对应的数据,一共五页,点击到最后一页再点下一页按钮时回到第一页 <div class="button-list"> <button @click.prevent="handleLeft"> <i class="el-icon-arrow-left"></i> {{ifchinese ? ......
按钮 上下 vue2 vue

下拉菜单缓慢展开收起的动画过渡效果,vue2 CSS

需求:点击下拉菜单按钮,显示子菜单并有过渡效果 过渡效果:缓慢展开收起 环境:vue2 CSS 分析:子菜单的高度有没有固定,如果子菜单的高度固定,可以设置高的变化添加过渡效果。如果高度不固定设置最大高度的变化添加过渡效果 图片展示: 展开状态 收起状态 实现代码: <template> <div> ......
菜单 效果 动画 vue2 vue

【Vue2.x】vue2给对象动态添加响应式属性

# 1 vue2给对象动态添加响应式属性 > vue2里对象的响应式是通过Object.defineProperty()实现 ## 1.1 给对象添加单个响应式属性 使用Vue.set()或this.$set() 参数 - 第一个参数,是目标对象 - 第二个参数,是要添加的属性名字 - 第三个参数, ......
属性 对象 动态 Vue2 vue2

Vue2 与 Vue3 生命周期对比

Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们注册js方法,可以让我们达到控制整个过 ......
Vue 周期 生命 Vue2 Vue3

vue2跟Vue3区别

(22条消息) vue3 vs vue2.x_vue3兼容vue2吗_一只小药锅的博客-CSDN博客 ......
vue2 Vue3 vue Vue

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、貌似可以修改配置项,但尚未尝 ......
template 项目开发 项目 should placed

Vue2知识点简要

一、双向绑定原理 Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式), 编译DOM时解析v-model等属性以及对input框等注册事件实现UI和JS的交互(也就是注册发布订阅这模式); 详细的是主要是定义一个Observ ......
知识点 简要 知识 Vue2 Vue

vue2插槽的透传

多组件嵌套的情况下,有时候会希望父组件向孙子组件(或者更小的辈分)的slot中插入内容, 显然,这需要在孙子组件里面用``, 在父组件里面用``。但是在子组件中应该如何进行插槽的声明,才能做到类似中继的作用呢。 一般地,我们可以用下面的方式来声明: ```vue $emit('fetched-dat ......
vue2 vue

系统化学习前端之Vue(vue2 组件通信)

## 前言 前文 vue2 基础中聊过,页面本质是 DOM 树,而在vue2 中 组件 = vm 实例对象 = DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。 ## vue2 组件通信 组件通信即组件之间的数据传递。 ### props 和 ......
前端 组件 系统 vue2 Vue

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

vue2响应式原理

一、初识响应式原理 如果我们在 Vue 实例中声明过的数据发生了改变,那么所有用到这份数据的视图都会更新重新渲染,我们称这些数据就是响应式数据。响应式概括来说就是 数据驱动视图的自动更新。 <div id="app"> {{ obj.message }} </div> let data = { ob ......
原理 vue2 vue

uniapp 组件中使用页面的生命周期(vue2)

用于直接在组件中使用onLoad,onBackPress等 因为之前在写App的时候有许多弹窗,希望可以在有弹窗的时候先关闭弹窗,没有弹窗在执行返回事件,因此需要在页面onBackPress里面写很多判断,因此找了一些方法,写了可以直接在组件中调用页面生命周期的方法! 使用mixin this.$c ......
组件 周期 生命 页面 uniapp

vue2项目中使用dhtmlx gantt甘特图插件

官网示例地址:https://docs.dhtmlx.com/gantt/samples/ 可以在这里查看绑定数据的格式 ### 安装依赖 ``` npm install dhtmlx-gantt --save ``` ### 创建一个甘特图组件 ```javascript ``` 到这里传入数据就 ......
插件 项目 dhtmlx gantt vue2

Vue2实现双向数据绑定原理

Vue2.x 采用数据劫持结合发布订阅模式(PubSub 模式)的方式,通过 Object.defineProperty 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选 ......
双向 原理 数据 Vue2 Vue

VUE2/3差异之模板写法

Options API (选项API) 传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。虽然尽量一个文件不要写太多代码(1000行内),但总有一些大型组件要一个文件写很多代码 优点:各选项编写写位置固定,结构清晰缺点: 代码组织性差,相似的逻辑代码不便于复用 逻辑 ......
写法 差异 模板 VUE2 VUE

vue2.x中使用cherry-markdown

安装依赖 npm install cherry-markdown --save 子组件写法 ​<template> <div @click.prevent.stop> <div :id="mdId" :style="{height:height+'px'}" /> </div> </template ......
cherry-markdown markdown cherry vue2 vue

深入vue2响应式原理,在对象或数组新增属性无响应

# 深入vue2响应式原理,在对象或数组新增属性无响应 # 解决方法 # 前言 ``` 该问题只存在vue2, 基于Object.defineProperty的特性,vue3中的proxy已经解决了该问题,但也存在兼容性问题, 例如IE系统任意版本都不支持. ``` ![image-20230524 ......
数组 属性 原理 对象 vue2

vue2和vue3数据双向绑定原理

## vue2数据双向绑定和vue3数据双向绑定的原理透析 参考资料 : https://www.jianshu.com/p/d7e2efde434b ​ https://www.jianshu.com/p/d7e2efde434b 背景:面试官10个有9个都会问这个问题,所以深究一下啦 ### 需 ......
双向 vue 原理 数据 vue2

系统化学习前端之Vue(vue2)

## 前言 vue2 截止 2023 年 12 月 31 日不再维护更新,将全面拥抱 vue3 了。 ## vue2 vue2 是一个实现 UI 层的渐进式 js 框架。vue2 本质是一个类,可以配置 options API 实例化为一个 vm 对象,通过模板编译处理成虚拟 DOM,对比更新后生成 ......
前端 系统 vue2 Vue vue