vue
关注
分享
扫一扫
文章平均质量分 55
记录学习vue得点点滴滴
一杯雪花勇闯天涯
越努力越幸运
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ElementUI 动态添加表单校验规则
学习目标：学习ElementUI 动态添加表单校验规则学习内容：<template> <div id="app"> <el-form v-model='data' inline :rules="rules" ref='form'> <el-form-item label='审批人' prop='user'> <el-input v-model='data.user' placeholder='审批人'></el-原创 2021-05-25 19:54:42 · 1516 阅读 · 0 评论 -
ElementUI 表单的基本用法
文章目录前言一.基本使用示例1.el-form 容器，通过model绑定数据2.el-form-item 容器，通过label绑定数据标签3.表单组建通过v-model绑定model中的数据官方文档前言ElementUI 表单的基本用法提示：以下是本篇文章正文内容，下面案例可供参考一.基本使用示例1.el-form 容器，通过model绑定数据2.el-form-item 容器，通过label绑定数据标签3.表单组建通过v-model绑定model中的数据官方文档https://el原创 2021-05-25 19:30:41 · 2147 阅读 · 0 评论 -
ElementUI插件引用
学习目标：通过element插件快速集成element-ui1. 初始化vue项目 vue create vue-pro2.进入项目根目录cd vue-pro3.通过插件的形式安装element-uivue add element安装完毕修改App.vue<template> <div id="app"> <el-button type='danger'>按钮</el-button> </di原创 2021-05-24 20:25:41 · 493 阅读 · 1 评论 -
ElementUI按需加载配置
ElementUI 按需加载文章目录前言1.对项目进行构建2. 按需加载，需要安装一个插件 babel-plugin-component3.修改main.js前言1.对项目进行构建npm run build2. 按需加载，需要安装一个插件 babel-plugin-componentnpm install babel-plugin-component - D修改babel.config.jsmodule.exports = { presets: [ '@vu..原创 2021-05-23 13:26:14 · 327 阅读 · 0 评论 -
幽会ElementUI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型文章目录前言1.初始化vue项目2. 安装element-ui 相关依赖3. 在main.js 引入element-ui4.把app.vue文件删掉，添加如下内容前言饿了吗开源组件库1.初始化vue项目vue create element-test2. 安装element-ui 相关依赖cd element-testnpm i element-ui -S原创 2021-05-23 12:46:33 · 163 阅读 · 1 评论 -
【Vue自定义开关组件】
系列文章目录Vue自定义开关组件提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一.源代码二.效果前言Vue自定义开关组件一.源代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自定义开关组件</title> </head> <body> <div id原创 2021-05-19 21:01:51 · 706 阅读 · 0 评论 -
Vue项目中引入Jquery
文章目录前言1.进入项目根目录，执行如下命令，安装jquery依赖2.在webpack.config.js中添加如下配置项3.在main.js中引入,加入下面这行代码，全局引入总结前言记录在vue项目中如何引入jquery1.进入项目根目录，执行如下命令，安装jquery依赖 npm install jquery --save-dev执行完上面的那条命令，我们可以看到package.json文件里面多出了一个jquery依赖项2.在webpack.config.js中添加如下配置项原创 2020-12-13 21:42:53 · 1482 阅读 · 1 评论 -
vue-cli(脚手架)-vue开发的标准开发工具
文章目录前言一.VUE-CLI VUE.js 开发的标准开发工具1.介绍2.安装二. 安装项目依赖总结前言使用vue-cli的基本使用用法一.VUE-CLI VUE.js 开发的标准开发工具1.介绍官方文档：https://cli.vuejs.org/zh/guide/ Vue CLI 致力于将 Vue生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无原创 2020-12-06 13:32:22 · 453 阅读 · 0 评论 -
vue基础之嵌套路由
文章目录前言二.实现效果总结前言学习vue基础之嵌套路由# 一.vue基础之嵌套路由二.实现效果总结学习vue基础之嵌套路由原创 2020-12-01 08:25:54 · 281 阅读 · 0 评论 -
vue-router编程式导航
文章目录前言一.编程式导航代码二.效果总结前言学习vue-router编程式导航一.编程式导航代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue-router编程式导航</title> </head> <body> <div id="app"> <router-link to="/原创 2020-11-17 23:13:15 · 268 阅读 · 1 评论 -
Vue-router之重定向
一.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue基础之重定向</title> </head> <body> <div id="app"> <router-link to="/a">首页</router-link> <router-link to="/b"&原创 2020-11-16 23:44:35 · 360 阅读 · 0 评论 -
vue基础之动态路由
文章目录前言一.动态路由代码二、实现效果总结前言学习vue基础之动态路由，不同标识渲染同一个组件一.动态路由代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态路由的写法</title> </head> <body> <div id="app"> <router-link to="/原创 2020-11-15 20:56:18 · 289 阅读 · 0 评论 -
vue-route初体验
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一.Vue-router初体验二.实现效果总结前言学习vue-router/font>一.Vue-router初体验<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue路由初体验</title> </head> <body>原创 2020-11-07 11:02:25 · 210 阅读 · 0 评论 -
原生js路由的实现
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一.学习javascript路由的实现二.实习效果总结前言学习原生javascript路由的实现<f一.学习javascript路由的实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基于javascript路由的实现</title> </head原创 2020-11-06 23:08:57 · 1082 阅读 · 0 评论 -
单页应用SPA项目的特点
文章目录前言一 .单页应用1.单页应用优缺点2.单页应用实现的原理总结前言介绍单页应用一 .单页应用1.单页应用优缺点优点： 操作体验流畅完全的前端组件化缺点:首次加载大量资源对搜索引擎SEO不太友好（运维+服务端渲染）开发难度比较高2.单页应用实现的原理Hash 路由:1.利用URL的hash，当hash改变不会引起页面刷新，所以可以利用hash值做单页路由，并且url的hash发生变化的时候，可以触发响应的hashChange回调函数总结学习SPA应用的优缺点...原创 2020-11-04 23:03:50 · 876 阅读 · 0 评论 -
vue基础之组件和模块的区别
一.vue基础和模块之间的区别模块：具有独立动能的js文件组件：封装的html/js/css原创 2020-11-03 23:35:34 · 911 阅读 · 0 评论 -
Vue基础只父子组件传值v-bind的使用
一.代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue基础之父子组件传值之v-bind的使用</title> </head> <body> <div id="app"> <child-b :a="a"></child-b> </div> </bo原创 2020-11-01 20:23:08 · 711 阅读 · 0 评论 -
vue组件通信之props
文章目录前言一.vue组件之通信1. 概要2.示例代码3.展示效果总结前言学习vue组件通信之props提示：以下是本篇文章正文内容，下面案例可供参考一.vue组件之通信1. 概要目的:要在子组件使用数据a，a的值来源于父组件props:字符数组 -> props:[‘a’]1.a是组件的属性2.a的用法和data中数据用法一样3.a的值来源于父组件2.示例代码<!DOCTYPE html><html> <head> <m原创 2020-11-01 16:16:42 · 282 阅读 · 0 评论 -
vue之 局部组件
一.局部组件代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue基础之局部组件</title> </head> <body> <div id="app"> <span-btn></span-btn> <span-btn></span-btn>原创 2020-10-31 19:44:20 · 301 阅读 · 0 评论 -
vue全局组件初体验
文章目录前言一.全局组件初体验1.代码示例2.代码实现效果二.组件的特点三.全局组件总结前言学习组件的使用方法提示：以下是本篇文章正文内容，下面案例可供参考一.全局组件初体验1.代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全局组件初体验</title> </head> <body> <div原创 2020-10-30 22:14:50 · 180 阅读 · 0 评论 -
基础表格网络请求模糊搜索版本
一.代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础表格示例</title> <style> *{ padding: 0px; margin: 0px; } .box { height: auto; width: 90%; margin: 1% 20%; }原创 2020-10-29 21:57:42 · 121 阅读 · 0 评论 -
vue基础表格网络请求版本
一.代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础表格示例</title> <style> *{ padding: 0px; margin: 0px; } .box { height: auto; width: 90%; margin: 1% 20%; }原创 2020-10-27 23:20:28 · 175 阅读 · 0 评论 -
Vue中发送网络请求
文章目录前言一.vue中发送网络请求1.下载npm 包管理器2 .安装json-server 工具3.创建db.json4. 启动json-server5.json-server restful接口使用规则6.见解高效的http库-axios总结前言学习vue中发送网络请求提示：以下是本篇文章正文内容，下面案例可供参考一.vue中发送网络请求1.下载npm 包管理器https://nodejs.org/en/安装完毕，打开cmd，输入npm -v 检查npm 是否安装完毕【见如原创 2020-10-26 22:05:40 · 1497 阅读 · 0 评论 -
vue基础表格+计算属性实现搜索功能+「代码实例」
一.基础表格代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>基础表格示例</title> <style> *{ padding: 0px; margin: 0px; } .box { height: auto; width: 90%; margin: 1% 20%; }原创 2020-10-25 21:32:18 · 612 阅读 · 0 评论 -
vue 基础之计算属性
文章目录前言一.计算属性1.反转字符串示例一2.反转字符串示例二总结前言学习vue基础之计算属性一.计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：1.反转字符串示例一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性</title> </head>原创 2020-10-24 21:18:12 · 152 阅读 · 0 评论 -
Vue基础之自定义局部指令
文章目录前言一.用法1.通过directives定义局部自定义指令2. 使用指令 v-指令名二.代码示例总结前言学习Vue基础之局部自定义指令一.用法1.通过directives定义局部自定义指令directives:{指令名:inserted(el){}}2. 使用指令 v-指令名二.代码示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>原创 2020-10-23 22:32:47 · 236 阅读 · 0 评论 -
vue基础之自定义全局指令
文章目录前言一.全局之定义指令1.用法2.自定义全局指令获取焦点事件代码示例总结前言学习vue如何自定义全局指令一.全局之定义指令1.用法1.在new Vue之前调用Vue.directive('指令名'，{ inserted(el){ } } ),指令名不要加v-2.instered(el){ 自定义指令的具体功能 }，使用该指令dom元素被插入到页面时会自动触发3.在视图中v-指令名，使用该自定义指令2.自定原创 2020-10-21 22:26:01 · 511 阅读 · 0 评论 -
vue基础之ref操作dom元素
文章目录前言一.ref属性的使用1.要给操作的元素设置ref属性2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}3.代码示例总结前言学习vue是如何操作dom元素提示：以下是本篇文章正文内容，下面案例可供参考一.ref属性的使用1.要给操作的元素设置ref属性2.在创建的vue实例属性中的mounted(){this.$refs.ref属性值}3.代码示例<!DOCTYPE html><html> <head>原创 2020-10-20 22:26:59 · 3378 阅读 · 0 评论 -
vue基础-表格示例之过滤器格式化日期
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue基础之表格示例之过滤器格式化日期</title> <style> .table_box { height: auto; width: 90%; margin: 5% auto;原创 2020-10-19 22:50:02 · 163 阅读 · 0 评论 -
vue基础之过滤器-常见文本格式化
文章目录前言一.全局过滤器1.在创建 Vue 实例之前全局定义过滤器：2 .代码示例二.Vue局部过滤器1.用法2.代码示例总结前言Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部一.全局过滤器1.在创建 Vue 实例之前全局定义过滤器：Vue.filter("过滤器名称",function(v){});v 是当前过滤器的原创 2020-10-18 22:02:20 · 1344 阅读 · 0 评论 -
v-cloak和v-once的用法
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一.v-cloak的用法1.v-cloak的作用2.实例二.v-once的用法1.v-once的作用2.使用实例总结前言学习v-cloak和v-once的用法提示：以下是本篇文章正文内容，下面案例可供参考一.v-cloak的用法1.v-cloak的作用解决{{}}表达式页面闪烁的问题2.实例<!DOCTYPE html><html> <head> <meta原创 2020-10-17 23:42:00 · 217 阅读 · 1 评论 -
v-model语法糖原理
文章目录前言一.v-model语法糖原理1.常规用法2. v-model 语法糖原理总结前言学习v-model 语法糖原理提示：以下是本篇文章正文内容，下面案例可供参考一.v-model语法糖原理1.常规用法<div id="app"> <input type="text" v-model="message"/></div></body></html><script src="https://cdn.jsdel原创 2020-10-15 23:09:54 · 479 阅读 · 0 评论 -
v-bind 绑定属性语法
文章目录前言一.v-bind语法1.绑定id 和src 属性2 .绑定class对象语法1.语法一2. 语法二3.绑定class数组语法4. 绑定style对象语法5. v-bind 绑定style数组语法总结前言学习v-bind 绑定对象的相关语法一.v-bind语法1.绑定id 和src 属性 <div id="app"> <img v-bind:src="src"/> <input type='text' v-bind:id='id'原创 2020-10-14 22:12:46 · 690 阅读 · 0 评论 -
vue-table添加和删除代码示例
一.代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue-table示例</title> <style> .table_box { height: auto; width: 90%; margin: 5% auto; }原创 2020-10-13 22:45:47 · 370 阅读 · 0 评论 -
vue基础之v-bind指令与v-model指令
文章目录前言一.v-bind指令1.作用2.当标签的属性值是不确定的，是可以修改的3.语法4.简写方式，直接去掉v:bind,比如：2.实例二.v-model指令1.作用2.示例总结前言学习v-bind指令和v-model指令一.v-bind指令1.作用绑定标签的属性名2.当标签的属性值是不确定的，是可以修改的3.语法 v-bind:要绑定的属性名=“data中的数据”4.简写方式，直接去掉v:bind,比如：<p :id={{id}}></p>2.实原创 2020-10-12 23:12:28 · 496 阅读 · 0 评论 -
vue基础之v-for
文章目录前言一.v-for指令1. 作用：可以用来遍历数组/对象二.实例总结前言学习vue基础之v-for指令提示：以下是本篇文章正文内容，下面案例可供参考一.v-for指令1. 作用：可以用来遍历数组/对象遍历数组1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐遍历对象2.1 使原创 2020-10-11 22:43:43 · 466 阅读 · 0 评论 -
条件渲染之v-if
文章目录前言一.v-if 指令二.实例演示1.示例总结前言vue基础指令之v-if提示：以下是本篇文章正文内容，下面案例可供参考一.v-if 指令1.v-if指令的作用是：根据表达式的真假切换元素的显示状态2.本质是通过操纵dom元素来切换显示状态3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小二.实例演示1.示例<!DOCTYPE html><html> &原创 2020-10-11 21:29:25 · 274 阅读 · 0 评论 -
vue基础-术语解释
文章目录前言一.术语解释1.插值表达式2.指令1.作用:2.实例2.1 v-on：事件名 2.2 v-text 与v-html2.3 v-text 与v-html的区别总结前言学习vue基础之术语解释一.术语解释1.插值表达式作用：会将绑定的数据实时显示出来，通过任何形式修改绑定的数据，所显示的数据都会被实时的替换{{js表达式|、三目运算符、方法调用等}}实例： <div id='app'> <div>{{msg}}</div>原创 2020-10-11 21:09:24 · 1252 阅读 · 0 评论 -
vue 基础之el选项与data选项及method选项详解
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、Vue基础知识1.最简单的vue实例2.el 又称vue的实例选项1.el的值可以是id选择器2.el的值也可以是class选择器，当dom元素中有多个同名的class选择器，vue作用于找到的第一个class选择器3.el的值也可以是dom元素，写法如下3.data选项1.data 的作用2.访问data中的数据可以通过vue实例对象.属性名去访问数据3.特点：响应式数据（当数据发生变化的时候，视图中的数据会自动发生变化）原创 2020-10-11 17:24:29 · 4866 阅读 · 0 评论 -
vue的一些基础链接以及安装方式
文章目录前言一.vue的相关文档链接1.vue的官方文档2.vue 相关开源项目汇总3. vue.js 中文社区二.vue的安装方式1.下载开发版本vue.js2.cdn引入3.NPM安装三.vue初体验1.编写HelloWorld总结前言学习vue的一些基础链接以及安装方式一.vue的相关文档链接1.vue的官方文档https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%882.vue 相关开源项目汇总以上是学习vue原创 2020-10-11 11:53:31 · 370 阅读 · 0 评论