vue
文章平均质量分 51
vue全家桶
babyxuqian
安得广厦千万间,大庇天下寒士俱欢颜!风雨不动安如山。呜呼!何时眼前突兀见此屋,吾庐独破受冻死亦足!
展开
-
Vue-cli4脚手架搭建
一、安装node.js进入官网下载node.js二、安装 cnpm安装命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org输入cnpm -v,可以查看当前cnpm版本三、安装vue-cli脚手架构建工具1.先用vue -V的命令来确认是否安装过vue-cli (如果需要卸载命令:npm uninstall vue-cli -g)2.指定版本 :如是3.0以下 npm install -g...原创 2021-08-02 12:38:02 · 468 阅读 · 0 评论 -
Vue中使用数据可视化Echarts图表展示
一、首先在vue中下载echarts 命令:npm install echarts --save二、在所在页面进行引用Html部分<template><divclass="contetn"><divid="main"ref="chart"style="width:100%;height:400px"></div></div></template>JavaScript...原创 2021-08-04 16:30:02 · 3613 阅读 · 0 评论 -
uniapp,vue中的身份证格式校验
uniapp,vue中的身份证格式校验原创 2022-08-12 09:31:56 · 2142 阅读 · 1 评论 -
在vue中使用count-to(数字滚动计时)插件
效果图(注意:里面的图标是elementui中的,如果你没有下elementui需要下载,不然会报错。如果不用elementui可以直接把图标删除就可以了)插件参数Property Description type default startVal 开始值 Number 0 endVal 结束值 Number 2017 duration 持续时间,以毫秒为单位 Number 3000 autoplay .原创 2022-04-18 15:40:00 · 2781 阅读 · 0 评论 -
vue中的全屏半屏模式展示
<template> <div class="fullscreen" @click="screen"> <span>{{ fullscreen ? "半屏" : "全屏" }}</span> </div></template><script>export default { data() { return { fullscreen: false, }; }, .转载 2022-04-18 15:31:04 · 497 阅读 · 0 评论 -
web本地存储的使用和在vue中的封装(localStorage,sessionStorage )
目录什么是本地存储?localStorage和sessionStorage的区别localStorage和sessionStorage的使用方法(使用方法是一样的)开始封装本地存储(以sessionStorage为例)什么是本地存储?1.通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。2.在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据原创 2022-03-16 10:34:34 · 1291 阅读 · 0 评论 -
Vue中Axios参数传递 与 请求拦截 的封装
普通写法:1.下载axios 命令:npm install axios --save2.在main.js中引用import axios from 'axios'Vue.prototype.$axios = axios;3.在app页面中this.$axios.get('https://yesno.wtf/api') .then((res) => {}) .catch((error) => {});封装:1.下载axios 命令:npm ...原创 2021-08-02 14:34:55 · 622 阅读 · 0 评论 -
vue实例:增删改查实战--纯手写
Html部分<template><divclass="content"><divclass="table"><tablecellpadding="0"cellspacing="0"><thead><tr><th><inputtype="checkbox"@cha...原创 2021-08-03 14:48:15 · 635 阅读 · 0 评论 -
Vue+element-Ui登录界面
效果图片html部分 <div class="login"> <div class="login_contetn"> <div class="login_title"> <h1>Login登录管理系统</h1> </div> <div class="login_input"> <el-input .原创 2021-08-09 11:26:23 · 3616 阅读 · 1 评论 -
Vue中怎么用$ref来操作dom
ref前言ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例this.$refs前言this.$refs是一个对象,持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例具体的写法Html部分:我们在html中写一个h1标签上面添加上ref=‘‘name’,在写一个点击事件,用来改变h1<template> <d原创 2021-08-06 10:02:14 · 1977 阅读 · 0 评论 -
vue实例:监听购物车数量变化、金额变化、物品模糊查询、计算属性的应用和分页功能的实现----纯手写
Html部分<template> <div class="main"> <div class="form-group"> <label>商品名称</label> <input type="text" placeholder="请输入查询内容" v-model="inputs" /> </div> <div class="table">原创 2021-08-05 11:21:53 · 1312 阅读 · 0 评论 -
Vue中组件与组件之间的传值
一、父到子之间的传值首先父到子组件用 props进行接收数据父组件中:子组件中:二、子到父组件之间的传值首先子到父组件用 $emit子组件中父组件中...原创 2021-08-03 15:33:13 · 138 阅读 · 0 评论 -
Vue中filters过滤器的封装
封装filters:1.在main.js中引用import * as filters from './filters/filters.js' // ./filters/filters.js//全局过滤器Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})2.新建一个文件夹名字叫filters,然后在里面在新建一个filters.js在filters.js中写例子expor......原创 2021-08-02 14:55:03 · 1808 阅读 · 0 评论 -
vue中的路由深入了解和路由传参
1.http://localhost:8080/List/100原创 2022-03-10 14:22:53 · 665 阅读 · 0 评论 -
在vue中使用wow动画插件(下载,配置,使用,参数)
1.首先下载wow插件下载命令:npm install wowjs --save-dev2.在项目中的main.js中进行配置import 'wowjs/css/libs/animate.css'import wow from 'wowjs'Vue.prototype.$wow = wow3.使用方法1.在需要使用的页面中的mounted函数加入代码 mounted() { this.getList(); this.$nextTick(() => {原创 2022-02-18 17:24:41 · 3307 阅读 · 0 评论 -
vue中面包屑的实现方法
什么是面包屑就是能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点一般会以(首页 / 我的页 / 内容展示)样子展现$route.matched$route.matched里面是一个数组,来记录路由的数据和变化详细例子页面组件中<template> <div class="Breadcrumb"> <div class="list" v-for="(item, index) in list" :key="index">原创 2022-04-13 15:39:57 · 1251 阅读 · 0 评论 -
vue3入门起步
在vue3中需要什么就引入什么:import { } from "vue";(注意:在vue3中只有响应式数据才能在页面中特别渲染变化)setup函数简介:setup函数是vue3专门为组件提供的新属性执行:创建组件实例,初始化props,然后就调用setup,在生命周期beforeCareat钩子之前调用reactive函数reactive函数接收一个普通对象,返回一个响应式对象模板语法----循环语句<template> <div class="m原创 2022-04-14 16:02:06 · 1275 阅读 · 0 评论 -
vue中模块的导入与导出
导入模块:import导出模块:export1.第一种方法(一个一个的导入导出)新建一个index.js,在index.js 中导出//一个一个的单个导出export var arr = ['a', 'b', 'c', 'd'] //导出数组export var stringName = 'I is xuqian' //导出字符串export var obj = { name: 'xq', age: '18', id: 1 } //导出对象export functio..原创 2022-02-17 15:35:59 · 3233 阅读 · 0 评论