![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 53
Spider@囚童
实现功能的方法永远不唯一,如果读者有别的办法欢迎分享,一起进步
展开
-
Vue Demi同时支持vue2和vue3模板
vue-demi同时支持vue2和vue3原创 2022-06-10 18:07:31 · 1034 阅读 · 2 评论 -
Apache ECharts使用教程,vue中使用图表教程
简介这里先说一下什么是echarts如果你已经了解它是什么直接往下看教程ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。遵循 Apache-2.0 开源协议,免费商用。兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。在项目中引入 Apache ECharts假如你的开发环境使用了npm或者yarn等包管理工具,并且使用 Webpack 等打包工具进行构建,本文原创 2022-02-16 16:18:19 · 1049 阅读 · 0 评论 -
vue自定义指令 Directive
前言一、Vue的自定义指令分为?vue中除了核心功能内置的指令外,也允许注册自定义指令。有的情况下,对普通DOM元素进行底层操作,这时候就会用到自定义指令。自定义指令分为全局自定义指令和局部的自定义指令全局自定义指令是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象,这个对象上有钩子函数})下边举例说明: Vue.directive('focus', { // el:指令所绑定的元素,可以用来直接操作 DOM。 //binding:一个对象,包含以原创 2022-02-14 20:09:50 · 357 阅读 · 0 评论 -
element ui 上传图片用法
通过 slot你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :be.原创 2022-02-14 19:53:24 · 1471 阅读 · 0 评论 -
vue中Computed、Methods、Watch区别
1.计算属性Computed模板内使用js表达式是很方便的,设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。<!-- 复杂运算 --><div>{{message.split('').reverse().join('')}}</div><!-- 计算属性代替复杂运算 --><div>{{reverseMessage}}</div>computed: {原创 2022-02-10 20:32:52 · 100 阅读 · 0 评论 -
vue监听和深度监听watch
watch可以让我们监控一个值的变化,从而做出相应的反应。 <div id="app"> 用户名:<input type="text" v-model='name'> <p>你的名字是:{{name}}</p> </div><!-- 引入vue --> <script src="/node_modules/vue/dist/vue.js"></script&.原创 2022-02-10 20:28:37 · 106 阅读 · 0 评论 -
Vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile(模板解析器)解析模板指令,将模板中的变量替换成数据,然后初原创 2022-02-07 19:23:32 · 130 阅读 · 0 评论 -
Vue虚拟dom,Vue Diff算法
二、vue虚拟dom,diff算法想要理解虚拟dom首先要知道什么是虚拟dom?虚拟dom可以简单的用一句话概括,就是用普通的js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。虚拟dom是相对于浏览器所渲染出来的真实dom而言的,在react,vue等技术出现之前,我们要改变页面展示的内容,只能通过遍历查询dom树的方式,找到需要修改的dom,然后修改样式行为或者结构,来达到更新视图的目的。为什么要用虚拟DOM来描述真实的DOM呢?创建真实DOM成本比较高,如果用js对象原创 2022-02-07 19:20:19 · 83 阅读 · 0 评论 -
Vue生命周期的执行过程
简单粗暴的答案直接走起:答: 总共分为8个阶段。创建前/后,载入前/后,更新前/后,销毁前/后。创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,$el还没有。载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.m原创 2022-02-07 19:11:31 · 303 阅读 · 0 评论 -
vue常用的指令,v-if和v-show的区别
vue常用指令: v-model 多用于表单元素实现双向数据绑定v-for 格式: v-for="(item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 (dom元素的删除添加 同angular中的ng-if 默认值为false)v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动.原创 2022-02-07 19:08:37 · 389 阅读 · 0 评论 -
Vue中的data为什么是一个函数
一. 组件和实例定义data的区别 vue实例中的data既可以市对象,也可以是函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件定义data只能是一个函数如果组件data定义为对象就会报错二. 组件data定义原创 2022-02-07 18:46:44 · 870 阅读 · 0 评论 -
Vue过滤器filter
过滤器就是一个数据经过了这个过滤器之后出来另一样东西。 vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器 // global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' }) var app =..原创 2022-02-06 09:34:54 · 150 阅读 · 0 评论 -
vue2与vue3双向数据绑定区别
新的响应式机制采用了ES6的ProxyApi,抛弃了Object.defineProperty()Vue2双向数据绑定存在的问题: 关于对象 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化,所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的 关于数组 Vue 不能检测以下数组的变动: 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfIt..原创 2022-02-06 09:31:24 · 290 阅读 · 0 评论 -
vue组件化开发
使用组件的好处 组件是可以复用性的易于维护有封装性,易于使用大型项目中降低组件之间重复性 父传子 <!-- 父组件 --><template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from .原创 2022-02-06 09:27:13 · 121 阅读 · 0 评论 -
Vue3新语法
Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API作用: 聚合代码 & 逻辑重用1. 使用 reactive 绑定数据 <template> <div> <h1>使用 reactive 绑定数据</h1> <p>{{state.msg}}</p> <p>{{info}}</p>.原创 2022-02-06 09:22:54 · 952 阅读 · 0 评论 -
Vue组件通信
父传子 父组件给子组件传递自定义属性,子组件通过props来接收 父组件代码 <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->import son from './Son' //引入子组件data () { return { msg: '父组件', }},components:{son}, 子组件代码 <p>子组件接收到内容:{{ faMsg }}</p原创 2022-01-28 13:52:22 · 66 阅读 · 0 评论 -
vue-cli4打包优化(10M变300kb)
项目开始时webpack配置 vue-cli3以后,我们修改webpack配置,需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目,在本地开发环境中,如果遇到跨域的问题。可以通过配置proxy的方式,解决跨域问题: module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port原创 2022-01-13 20:41:27 · 477 阅读 · 0 评论 -
vue vue-cli rem适配 手写rem
1.安装依赖npm install amfe-flexible -Snpm install postcss-px2rem -S2.引入lib-flexible// 在入口main.js中 引入 lib-flexibleimport "amfe-flexible/index.js";3.配置post-px2rempostcss-pxtorem 在vue.config.js中配置module.exports = { css: { loaderOptions: {原创 2022-01-03 20:18:43 · 604 阅读 · 0 评论 -
vuex概念,vuex的基本操作,持久化工具使用, 辅助函数(语法糖)
1.Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,它是由五部分组成,分别是: state,actions,mutaions,getters,modulesstate 存放数据mutaions 唯一可以修改state的地方getters 相当与vue的计算属性actions 异步操作modules store的子模块 用于大型项目 方便管理使用的vuex中的高级用法原创 2022-01-07 14:30:24 · 694 阅读 · 0 评论 -
vue vue-cli4跨域,配置跨域
配置跨域1.在vue- cli根目录下创建vue.config.js在devServer下配只proxy代码如下module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { target: 'http://12原创 2021-12-30 15:54:37 · 928 阅读 · 0 评论 -
vue vue-cli axios封装
封装axios可以更好的维护请求地址改变后更好修改下面上代码1.在src目录下创建一个文件夹建议起名utils2.如上图所示创建三个js文件我们先来写http.js的内容import axios from "axios";const http=axios.create({ baseURL:'/api', //配置公用地址 withCredentials:true, //跨域是否携带token timeout:5000 //响应延迟时间})//设置请求拦截器ht原创 2022-01-03 20:55:24 · 466 阅读 · 0 评论 -
vue vue-cli脚手架安装步骤
嗨大家好今天给大家分享@vue/cli的安装步骤第一步查看node 版本号 如果低于 版本10 的话安装最新版node如果没有cnpm 的话 需要安装cnpm 如果已经安装过cnpm 可以跳过安装cnpm的命令是:npm install -g cnpm --registry=https://registry.npm.taobao.org第二步cmd终端中安装vue脚手架cnpm i @vue/cli -g安装成功后可以执行 vue -V (注意:-V 是大写) 查看vue版本号 来检原创 2021-12-26 19:24:02 · 169 阅读 · 0 评论 -
vue循环渲染本地路径图片不显示问题
写代踩到过的坑,分享一下上代码<template> <div class="swipe"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="(item, index) in src" :key="index"> <img :src="item" alt="">原创 2022-01-07 21:01:07 · 747 阅读 · 0 评论