Vue
关注
分享
扫一扫
文章平均质量分 65
XUPT-前端在逃工程师
逃
展开
-
初识Vue3—与Vue2的不同
Vue3与Vue2的区别Vue3向下兼容一.从options API到Composition APIvue3具有的composition API实现逻辑模块化和重用vue3中使用setup函数（比beforeCreated更早执行）接收两个参数 props（响应式不能用ES6结构）和context（普通JavaScript对象）生命周期改变setup语法糖1.组件自动注册<template> <Child /></template><原创 2021-12-16 18:18:27 · 940 阅读 · 0 评论 -
快速上手Vue3
一.快速上手Vue31.使用Vue3的CDN<script src="https://lib.baomitu.com/vue/3.0.2/vue.global.js"></script>2.vue-cli升级到vue-cli v4.5 (删除后再安装)npm i -g @vue/cli@next3.使用Vite利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省区webpack冗长的打包时间// npm$ npm init vite原创 2021-12-16 18:15:15 · 506 阅读 · 0 评论 -
封装axios
/**@param 封装ajax请求以及其他的操作axios 专门处理cros跨域的**/import axios from ‘axios’//引入全局状态管理import store from ‘…/store/index’//引入路由import router from ‘…/router/index’//引入缓存文件import storage from ‘…/storage/storage’//设置axios 请求超时/**@param 设置超时**/axio原创 2021-07-04 11:40:22 · 134 阅读 · 0 评论 -
Vuex全局状态管理
Vuex（全局状态管理）组件之间传值子父组件传值：1.父=>子 props 2.子=>父 this.$emit()非子父组件传值：1.事件车通信eventEmitter 2.Vuex1.安装Vuex#vue 3.x版本以上安装vuex 4.x以上cnpm install --save-dev vuex@4#vue 2.x版本cnpm install --save-dev vuex2.使用Vuex创建Vuex整个store(初始化store)import {createS.原创 2021-04-28 11:09:54 · 212 阅读 · 0 评论 -
Vue-router路由
Vue-router1.使用Vue-router1.1安装路由npm install -s -g vue-router@41.2使用步骤注意:vue-router必须是4版本以上的否者不能用1.2.1 创建router.js文件配置//import引入路由方法//createRouter创建路由//createWebHistory路由模式路径（不带#号）//createWebHashHistory路由模式路径（带#号）import { createRouter,createWebH.原创 2021-04-28 11:06:48 · 361 阅读 · 1 评论 -
Vue组件
Vue 组件学习1.注册组件1.1 两种注册方法：全局注册和局部注册局部注册：在父组件文件中import引入组件，只能在父组件内使用<template> <div id='app'> <h1>组件的使用</h1> <!-- 3.使用组件 --> <com1 /> </div></template><script>//1.引入模板文件import com原创 2021-04-28 11:03:04 · 143 阅读 · 0 评论 -
Vue中的动画
1.使用过渡类名实现动画v-enter[时间点]是进入之前元素的其实状态此时还没有进入v-enter-active[入场动画的时间段]v-leave-active[离场动画的时间段]v-leave-to[时间点]是动画离开之后，离开的终止状态，此时元素动画已经结束<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2021-04-28 10:51:28 · 176 阅读 · 0 评论 -
Vue过滤器
Vue中的过滤器1.过滤器的全局定义语法Vue.filter('过滤器的名称',function(){})2.过滤器中的fn第一个参数：过滤器管道符前面传递过来的数据后面可以一直添加传入参数Vue.filter('过滤器的名称',function(data,str1,str2,...){ return data+'123'})3.过滤器使用<div id="box"> <p>{{message|msg('邪恶')}}</p> &l原创 2021-04-28 10:50:44 · 146 阅读 · 0 评论 -
Vue生命周期
Vue实例的生命周期1.什么是生命周期:从Vue实例创建,运行,到销毁期间,总盘随着各种各样的事件,这些事件,统称为生命周期!2.生命周期钩子=生命周期函数=生命周期事件3.主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性created:实例化已经在内存中创建OK,此时data和methods已经创建OK,此时还没有开始编译模板mounted:此时,已经将编译好的模板,挂载到了页面指定的容原创 2021-04-28 10:37:55 · 790 阅读 · 0 评论 -
Vue自定义指令
1.自定义Vue指令1.使用Vue.directive定义全局指令//注册一个全局自定义指令 v-focusVue.directive('focus'，{//绑定元素插入到DOM中 inserted:function(el,binding){ //聚焦元素 el.focus() }})参数1：指令名称（不用添加v-）参数2：对象，存放指令相关函数（钩子函数）bind：立即执行，只调用一次inserted：元素插入到DOM中时执行，只执行一次原创 2021-04-28 10:34:22 · 102 阅读 · 0 评论 -
Vue元素样式
用v-bind来进行属性绑定（简写:属性名），来实现对元素样式的修改 Vue中class样式1.数组<h1 :class="['red','thin']"></h1>2.数组中使用三元表达式<h1 :class="['red','thin',isactive?'active':'']"></h1>3.数组中嵌套对象<h1 :class="['red','thin',{'active':isactive}]"></原创 2021-04-28 10:26:16 · 181 阅读 · 0 评论 -
Vue基本指令
1.v-cloak解决插值表达式闪烁问题<style> [v-cloak] { display: none; }</style>v-text，v-html和{{}}的区别：{{}}渲染界面会有闪烁问题，但是v-text，v-html不存在2 v-text1.v-text指令的作用：设置标签的内容2.默认写法会替换全部内容，使用**插值表达式{{}}**可以替换指定内容3.内部支持写表达式（字符串拼接）3 v-html1.v-htm.原创 2021-04-28 10:22:36 · 758 阅读 · 1 评论