Vue
关注
分享
扫一扫
文章平均质量分 50
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
唐 昊
稳扎稳打，步步为营
展开
-
vue.js的所有元素属性
0: li.currentaccessKey: “”ariaAtomic: nullariaAutoComplete: nullariaBusy: nullariaChecked: nullariaColCount: nullariaColIndex: nullariaColSpan: nullariaCurrent: nullariaDescription: nullariaDisabled: nullariaExpanded: nullariaHasPopup: nullar原创 2021-10-08 19:32:11 · 407 阅读 · 4 评论 -
vue之多条件筛选
<template> <div class="t"> <div> <div class="txt" @click="to_show"> <ul> <li class="current" id="ddd"> <a href>北京</a> </li> <li class="a"原创 2021-10-08 19:27:11 · 2094 阅读 · 0 评论 -
vue.js的dom相关属性获取
获取 子节点 childNodes 是数组的形式classList 用于更改对应的class属性parentElement 父节点e.target 获取当前点击dom对象e.currentTarget 获取你绑定事件的元素previousElementSibling.innerHTML 获取点击的元素的起前一个元素firstElementChild 获取点击事件的第一个元素nextElementSibling 获取点击事件的下一个兄弟元素childNodes：获取父节点下的所有直接子节点原创 2021-08-16 15:33:19 · 477 阅读 · 0 评论 -
Vue.js实现多条件筛选
<template> <div class="t"> <div> <div class="txt" @click="to_show"> <ul> <li class="current" id="ddd"> <a href>北京</a> </li> <li class="a"原创 2021-08-16 15:19:24 · 71 阅读 · 0 评论 -
springboot + vue + FastDFS实现文件上传（支持预览）
准备springboot环境pom.xml <dependency> <groupId>net.oschina.zcx7878</groupId> <artifactId>fastdfs-client-java</artifactId> <version>1.27.0.0</version>原创 2021-08-04 09:15:08 · 2306 阅读 · 2 评论 -
Vue之elementUi的backToTop组件（回到顶部）用法
<template> <el-tooltip placement="top" content="回到顶部"> <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0" transition-name="fade"/> </el-tooltip></template><原创 2021-08-01 19:32:17 · 1561 阅读 · 3 评论 -
“export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
问题描述"export ‘default’ (imported as ‘Vue’) was not found in ‘vue’你一定是以vue cli4.0以上的版本，安装router为4.0以上的版本，且vue版本为2.0,他们之间是相互冲突的，解决方案：将router 4.0版本卸载掉 npm uninstall vue-router@4 再重新安装3.0版本npm install vue-router@3...原创 2021-07-31 21:36:29 · 1149 阅读 · 4 评论 -
记录使用Vue-ui创建项目时报错Cannot read property ‘indexOf‘ of undefined
问题描述：当我们在使用vue ui创建vue项目最后一部时出现了如下的错误分析：应该是vue-cli版本出问题解决方案：删除之前的版本 npm uninstall vue-cli -g ，重新安装 npm i -g @vue/cliOK原创 2021-07-15 11:12:05 · 6159 阅读 · 3 评论 -
20 error code ELIFECYCLE 21 error errno 1 22 error vue-element-admin@4.4.0 dev: `vue-cli-service ser
问题描述0 info it worked if it ends with ok1 verbose cli [1 verbose cli ‘E:\node.exe’,1 verbose cli ‘E:\node_modules\npm\bin\npm-cli.js’,1 verbose cli ‘run’,1 verbose cli ‘dev’1 verbose cli ]2 info using npm@6.14.63 info using node@v12.18.44原创 2021-07-01 22:42:19 · 9314 阅读 · 0 评论 -
记录vue脚手架项目引入layui.js不生效
问题描述：如上图所示，将js和css文件放到了同一层目录之下，正常的引入资源css样式生效，然而js却不能使用，js引入失效解决方案一：将本地资源改为在线引用<!-- 引入 layui.js --><script src="//unpkg.com/layui@2.6.8/dist/layui.js">成功解决方案二：将js资源与css分开，建立js文件夹，将其放入...原创 2021-07-01 18:27:40 · 690 阅读 · 2 评论 -
记录-vue3.0之router路由器的使用
安装安装Vue Router4.x版本目前可以通过npm install vue-router@4.0.0-alpha.6原创 2021-06-17 21:59:46 · 441 阅读 · 5 评论 -
Vue3.0之引入Element-plus ui样式
安装：官网npm install element-plus --save第一种：CDN目前可以通过 unpkg.com/element-plus 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/theme-chalk/index.css”><! – 引入组件库 --><原创 2021-06-17 12:22:05 · 14725 阅读 · 16 评论 -
Vue之评论样式
原型演示：show time…安装vue-cli脚手架：点击app.vue<template> <div id="app"> <div> <header class="site-header jumbotron"> <div class="container"> <div class="row"> <div class="col-xs-12"&g原创 2021-06-15 18:07:08 · 910 阅读 · 4 评论 -
Vue3.0cli-脚手架安装项目
安装指令（cmd）npm install -g @vue/cliloading…安装成功查看版本vue -V查看帮助文档指令vue create --help创建项目vue create project_name此后根据自己的需求选择不同的选项安装选择Vue2或者Vue3或者自定义安装这里我选择自定义安装css预编译语法检测工具ESLint + Standard config语法检测方式（即查即保存）babel,postcss,eslint这些配置文件放哪原创 2021-06-15 17:55:11 · 159 阅读 · 0 评论 -
记录vue防止出现闪现值
有些页面在初始化页面之前是显示原数据的，影响美观此类的数据称为闪现值解决方案：<style type="text/css"> [v-cloak] { display: none }</style><p v-cloak>{{msg}}</p>加上[v-cloak] 样式，并赋予标签属性<!DOCTYPE html><html><head> <meta charset="UTF-8"&原创 2021-06-15 15:55:35 · 238 阅读 · 1 评论 -
Vue之指令用法
简介注册全局指令 // Vue2.0用法 // 注册一个全局指令 // el: 指令所在的标签对象 // binding: 包含指令相关数据的容器对象 Vue.directive('upper-text', function (el, binding) { console.log(el, binding) el.textContent = binding.value.toUpperCase() })注册局部指令 directives : { 'my原创 2021-06-15 15:38:06 · 360 阅读 · 0 评论 -
Vue之常用内置指令
常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标识,原创 2021-06-15 12:02:37 · 244 阅读 · 0 评论 -
Vue对当前时间进行过滤显示
<div id="test"> <h2>显示格式化的日期时间</h2> <p>{{time}}</p> <p>最完整的: {{ dateString(time)}}</p> <p>年月日: {{dateString(time,'YYYY-MM-DD')}}</p></div><script src="https://unpkg.com/vue@next">原创 2021-06-15 11:55:23 · 298 阅读 · 1 评论 -
Vue之动画渲染
参考地址：点击1. vue动画的理解操作css的trasition或animation vue会给目标元素添加/移除特定的class2. 基本过渡动画的编码在目标元素外包裹定义class样式指定过渡样式: transition指定隐藏时的样式: opacity/其它3. 过渡的类名xxx-enter-active: 指定显示的transitionxxx-leave-active:指定隐藏的transitionxxx-enter: 指定隐藏时的样式<st原创 2021-06-15 11:23:23 · 468 阅读 · 0 评论 -
Vue之自动收集数据（双向数据绑定）
<div id="demo"> <form action="#" @submit.prevent="handleSubmit"> <span>用户名: </span> <input type="text" v-model="username"><br> <span>密码: </span> <input type="password" v-model="pwd">&原创 2021-06-15 09:52:24 · 170 阅读 · 0 评论 -
Vue之事件处理
基本知识绑定监听:v-on:method_name=“to_method” @method_name=“to_method”@method_name=“to_method(参数)”默认事件形参: event隐含属性对象: $event事件修饰符:.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()按键修饰符.keycode : 操作的是某个keycode原创 2021-06-15 09:28:40 · 149 阅读 · 1 评论 -
Vue之列表渲染_过滤与排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body><div id="demo"> <input type="text" v-model="searchName"> <ul> <li v-for="(p,原创 2021-06-08 11:41:15 · 160 阅读 · 1 评论 -
论Vue实现简易的增删改查
一、技术栈列表显示数组: v-for / index对象: v-for / key列表的更新显示删除item替换item二、主题实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue-demo</title></head><body><div id="demo">原创 2021-06-08 09:14:37 · 396 阅读 · 1 评论 -
Vue之条件渲染
条件渲染指令v-ifv-elsev-show比较v-if与v-show如果需要频繁切换 v-show 较好<div id="demo"> <p v-if="ok">OK</p> <p v-else>No~~~</p> <hr> <p v-show="ok">yes sir</p> <p v-show="!ok">no my sir</p> <.原创 2021-06-08 08:34:51 · 81 阅读 · 1 评论 -
Vue之class与style样式绑定
一、 理解在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专用来实现动态样式效果的技术二、 class绑定: :class=‘xxx’xxx是字符串xxx是对象xxx是数组三、style绑定:style="{ color: activeColor, fontSize: fontSize + 'px' }"其中activeColor/fontSize是data属性<div id="demo"> <h2>1. class绑定:原创 2021-06-08 08:31:32 · 212 阅读 · 0 评论 -
Vue之属性的计算和监控
样例：<div id="demo"> 姓: <input type="text" placeholder="First Name" v-model="firstName"><br> 名: <input type="text" placeholder="Last Name" v-model="lastName"><br> <!--fullName1是根据fistName和lastName计算产生--> 姓名1(单向):原创 2021-06-08 08:21:41 · 145 阅读 · 1 评论 -
Vue学习之模板语法
模板的理解:动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性)双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行简洁写法::xxx=‘yyy’指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:click=‘xxx’简洁写法:@click=.原创 2021-06-07 20:18:28 · 184 阅读 · 0 评论 -
hello-Vue
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_HelloWorld</title></head><body><!-- 1. 引入Vue.js 2. 创建Vue对象 el : 指定根element(选择器) data : 初始化数据(页面可以访问) 3. 双向数据绑定原创 2021-06-07 20:12:26 · 231 阅读 · 0 评论