事件的基本使用: 1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名; 2.事件的回调需要配置在methods对象中,最终会在vm上; 3.methods中配置的函数,不要用箭头函数!否则this就不是vm了; 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对
由于项目需要,兼容IE,所以只能用vue2,且ant-design只能选用1版本 第一步: 1.查看vue/cli版本,我选用的是4.4.6 2. 创建项目 vue create writebg-project 选择自定义配置,并选择需要的选项 3.根据需要,选择是否需要历史路由 4.选择css预处理器,
案例 1.图片左右滚动 上图 效果描述 第一行向左滚动 第二行向右滚动 代码 ScrollImg组件 <template> <swiper :options="swiperOption" :dir="derection" class="companySP__srollImg"> <swiper-slide class="com
将如下代码封装成JsonEditor组件 <template> <div class="json-editor"> <el-row style="height: 100%;overflow-y: auto;"> <textarea ref="codemirror"/> </el-row> <slot></slot> &l
VUE - 在vue2项目中使TS语法 环境:vue2、vue-cli3 / vue-cli4 并不是要把vue文件改为ts,而是可以在vue中写ts语法 ts有什么用? 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的“痛点”:弱类型和没有命名空间,导致
# 笔记 ## 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue
1、内置指令 学过的指令: v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染(动态控制节点是否存存在) v-else : 条件渲染(动态控制节点是否存存在) v-show : 条件渲染 (动
1列表渲染 1.1、基本列表 v-for指令 用于展示列表数据 语法: <li v-for="(item,index) in items " :key="index"> ,这里 key 可以是 index ,更好是遍历的对象的唯一标识。 可遍历:数组、对象、字符串(用的少)、指定次数(用的少) <!DOCTYPE html> <html lang="en"> <head> &
注意点1 less一定要是3版本, less-loader一定要是5版本 然后在vue.config.js配置 module.exports = { runtimeCompiler: true, css: { loaderOptions: { less: { javascriptEnabled: true, },
1、模板语法 Vue模板语法包括两大类 1 .插值语法 功能:用于解析标签体内容。插值语法往往用于指定标签体内容(双标签中间夹着的内容) 写法:{{xxx}} , xxx是js表达式,可以直接读取到data中的所有区域。 2 .指令语法 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…) 举例:< a v-bi
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据、视图更新,v-model是一个语法糖,,我们可以自定义v-model指令的部分内容。 vue2中自定义v-model 在vue2中想要自定义v-model,我们需要在组件中设定mode
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title&g
前言 在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述: Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口 slot大概分为以下几种: 基础slot组件(匿名插槽) 匿名插槽主要使用场景并不涉及特别复
vue2最佳实践 为列表渲染设置属性key在v-if/v-if-else/v-else中使用key关于路由切换组件不变的解决方案路由导航守卫beforeRouteUpdate观察$route对象的变化为router-view组件添加属性key 为所有的路由统一添加query使用全局守卫beforeEach使用函数劫持 区分Vuex与props的
之前电脑一直是用vue2开发,所以vue3没有安装。 现在要开始用vue3开发了。所以要学习了。 因为之前的项目也要维护所以,必须安装两个版本。 今天在网上搜索了一下,找到方案了。 首先在电脑上找一个盘,我是F盘,新建一个文件夹vue3 然后进入这个文件夹 输入 npm install @vu
直接在js导入图片会报错,原因wp处理不了 ERROR in ./src/imgs/avatar.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpa
今天在使用事件总线进行组间通信的时候,在子组件mounted钩子内打印了this查看指向 每个组件都有自己的_uid,_uid: 80,没问题。 但是当我来回切换一次页面(组件肯定伴随着不停的销毁创建),第二和第三行为本次的打印,发现同时打印出了两次,且由_uid可知为两个不同组件(准确来说是同
Vue2外卖总结 先看一下效果,这是跟随硅谷外卖做的一个小项目。但是很多都是没有接口导致许多不太一致。 简介: 这是一个基础Vue2实现的一个外卖项目,部分图如上所示,数据没有调用一个接口,全都是模拟数据。相关视频在哔哩哔哩尚硅谷。链接https://www.bilibili.com/video/B
一.Vue介绍 1.vue是一套用于构建用户界面的渐进式的JavaScript框架 2.vue的特点: a.采用组件化模式,提高代码复用率,且让代码更好维护 b.声明式编码,让编码人员无需直接操作DOM,提高开发效率 c.使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点 3.学习Vue前,最好掌握这
子组件事件传递给父组件 父组件 <template> .... <diyItemAdd @delDiyItemCall="delDiyItem" :itemInfo="item" v-for="(item,index) in jl_content_form.diyItem" :key="item.itemID"></diyItemAdd> ... <template> &
1. 安装scss npm install node-sass --save-dev 安装不上执行 npm install node-sass@4.14.1npm install sass-loader --save-dev 安装不上执行 npm install sass-loader@7.0.2 --save-dev 2. 在build文件中找到webpack.base.conf.js, 配置如下: { //上面的不修改,这是sass的
后台管理项目中,在页面切换时(不同场景共用一个展示界面)不同数据需要共用一个input框等,就会出现因取消或者保存结束后,切换到其他场景时还会出现上一个页面输入(绑定)的数据(因为响应式数据data里没有清除) 解决办法:如果涉及到data中的响应式数据只有一个,可以一个一个手动赋值为空来初始
1.安装Node.js * Node.js中包含了npm工具 安装后查看版本: node -v npm -v 2.设置npm的源为国内源 npm config set registry https://registry.npm.taobao.org 3.安装webpack npm install -g webpack 4.安装脚手架 npm install -g vue-cli 5.创建项目 假设项目
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多,需要统一每个项目的代码规范,于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及
前言 Vue3.0 在去年 9 月正式发布了,看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发,这篇文章就是在使用后的一个总结, 包含 Vue3 新特性的使用以及一些使用经验分享。 为什么要升级 Vue3 使用 Vue2.x 的小伙伴都熟悉,Vue2.x 中所有数据都是定义在data中,方法