Vue
文章平均质量分 92
Vue知识点
YF-SOD
LDSBAH,NAB!
展开
-
Vue详解(MVVM设计模式、响应式原理、指令、计算属性、过滤器、动画、组件化、Vuex、VueRouter、Vue-CLI使用、Vue生命周期方法、Vue实例属性、搭配框架Element UI等)
目录Vue简介Vue引用链接Vue作用Vue数据绑定过程MVVM设计模式Vue响应式原理详解var vm=new Vue({})Vue指令(directives)Vue计算属性(computed)区别于fun定义在methodsVue过滤器(filter)Vue全局过滤器Vue.fliter('capitalize1',function(value,a1,a2,..,an){return})Vue局部过滤器new Vue({el:'#app',da原创 2018-06-24 00:16:38 · 6332 阅读 · 2 评论 -
Vue实例方法、响应式原理、自定义简易vue实现(数据$watch|set|delete、事件$on|once|off|emit、响应式原理详解、vue限制)
目录Vue实例方法(数据)this.$watch(expOrFn,callback,[option])this.$set(target,propertyName/idnex,value)this.$delete(target,propertyName/index)Vue实例方法(事件)this.$on(myEvent,function(){})this.$once(myEvent,function(){})this.$off(event,fun)this.$emit(ev原创 2021-10-07 11:37:39 · 1391 阅读 · 0 评论 -
Vuex(自定义简易Vuex、states、mutations、getters、actions、modules、mapState等、namespace搭配devtools调试、数据持久化)
目录Vuex(store)Vuex引入链接new Vuex.Store({})statemutationsgettersactionsmodulesnamespaced方法mapState()mapMutations()mapGetters()mapActions()Vuex异步请求修改数据图解搭配vue devtoolsvuex持久化(第三方库)详细使用链接Vuex(store)Vuex是vue配套的公共数据管理工具,可以将共原创 2021-06-08 23:40:14 · 1129 阅读 · 2 评论 -
VueRouter(自定义VueRourter、使用方法、router-view\link、传递参数、路由嵌套、重定向、路由拦截(全局和局部守卫)、命名路由、路由模式(原理)、路由懒加载)
目录VueRouter(router)VueRouter引入链接使用方法router-view标签name属性(命名视图)router-link标签传递参数形式嵌套路由重定向路由拦截全局前置守卫全局后置钩子局部守卫命名路由路由模式(history)路由原理路由懒加载VueRouter(router)和v-if/v-show一样,是用来切换组件的显示,Vue Router是通过哈希来切换(#/xxx),且能够在切换的时候传递参数。注意原创 2021-06-01 15:32:50 · 2334 阅读 · 1 评论 -
VUE引入Element UI、Mint UI、Vant UI(基础使用、按需引入优化(按需打包使用到的组件)、官方文档链接)
目录Element UI基础使用Element UI组件链接优化(按需打包使用到的组件)MintUI基础使用W3C Mint UI中文文档优化注意Vant官方文档链接Element UI是饿了么前端团队推出的基于Vue的左面端UI框架,和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面。基础使用在Vue-CLI的项目文件下输入命令行npm i element-ui -S安装,并在main.js中插原创 2021-05-28 19:14:48 · 1836 阅读 · 3 评论 -
Vue-CLI入门(webpack入门、安装配置Vue-CLI(命令、手动、自动版本)、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等)
目录webpack入门链接Vue-CLI介绍安装配置Vue-CLI全局安装命令自动版本手动版本运行和打包项目使用Vue-CLI创建子组件使用Vuex使用Vue-router修改webpack配置Vue-CLI封装的webpack配置属性链接配置反向代理(跨域请求数据)添加webpack中插件webpack插件链接封装自定义插件保存自动格式化代码配置webpack入门链接webpack使用入门(配置loader:style、css原创 2021-05-28 16:10:33 · 1514 阅读 · 0 评论 -
Vue生命周期方法(分类、生命周期方法调用时期示意图详解)、Vue实例方法(生命周期:mount、forceUpdate、nextTick、destroy)
目录Vue生命周期方法分类生命周期方法调用时期示意图Vue实例方法(生命周期)this.$mount(str)this.$forceUpdate()this.$nextTick(function(){})this.$destroy()Vue生命周期方法可以在直接在vue对象中定义创建期间的生命周期方法new Vue({el:'#app',data:{},beforeCreate(){},created(){},...,beforeDestroy(){},destroy原创 2021-05-24 14:05:23 · 980 阅读 · 0 评论 -
Vue组件化、插槽(Vue全局组件和局部组件定义、创建组件和注册组件,组件中使用methods和data,component、keep-alive标签、父子组件的数据与方法传递和多级传递bus通信)
目录Vue组件化Vue全局组件创建全局组件注册全局组件Vue局部组件解决template下编写HTML代码没有提示问题组件中使用methods组件中使用datacomponent标签切换组件动画keep-alive标签slot标签匿名插槽具名插槽v-slot:(#)作用域插槽v-slot:(#)补充父子组件父子组件数据传递和多级传递父子组件方法传递和多级传递父子组件数据传递和多级传递补充任意组件之间数据传递补充:bus通原创 2021-05-07 21:09:58 · 1167 阅读 · 1 评论 -
Vue动画详解(transition、transition-group标签、自定义动画类名前缀和类名、动画钩子函数、搭配velocity.css、animation.css使用)
目录Vue动画transition标签apperar:durationtransition-group标签自定义进入/离开过渡动画名自定义类名前缀自定义类名动画钩子函数作用使用方法注意点搭配velocity.css引入velocity.css链接查看样式链接使用方法搭配animation.css引入animation.css链接查看样式名链接使用方法Vue动画可以给任何元素和组件添加进入/离开过渡,用于条件渲染 (使用.原创 2021-05-06 17:59:14 · 2778 阅读 · 1 评论 -
Vue指令(常用指令介绍和使用、自定义全局与局部指令、钩子函数和钩子函数参数等)
目录Vue指令v-model修饰符v-bind:(:)修饰符绑定属性绑定样式对象和数组的绑定的方式注意点v-on:(@)修饰符v-showv-ifv-elsev-else-ifv-for复用原则导致数据混乱问题解决方法v-textv-htmlv-oncev-clockv-slot:(#)自定义指令自定义全局指令Vue.directive('color',{bind(el,obj,vnode,oldVnode)原创 2021-05-05 12:06:32 · 1716 阅读 · 1 评论