vue
文章平均质量分 74
vue从零开始全内容
飘然渡沧海
这个作者很懒,什么都没留下…
展开
-
vue-vue3(10)-vue2与vue3之间的差异改造
vue2与vue3之间的差异改造1.全局API的转移Vue 2.x 有许多全局 API 和配置。例如:注册全局组件、注册全局指令等。//注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.di原创 2021-12-14 17:09:10 · 81 阅读 · 0 评论 -
vue-vue3(9)-Fragment,Teleport,Suspense
FragmentTeleportSuspense原创 2021-12-14 17:06:55 · 225 阅读 · 0 评论 -
vue-vue3(8)-(provide 与 inject)与响应式数据的判断
vue-vue3(8)-(provide 与 inject)与响应式数据的判断provide 与 inject作用:实现祖与后代组件间通信套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据具体写法:祖组件中:setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car',car) ......}后代组件中:原创 2021-12-14 16:02:01 · 1555 阅读 · 0 评论 -
vue-vue3(7)-toRaw,markRaw和customRef
vue-vue3(7)-toRaw,markRaw和customReftoRaw 与 markRawtoRaw:作用:将一个由reactive生成的响应式对象转为普通对象。使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。markRaw:作用:标记一个对象,使其永远不会再成为响应式对象。应用场景:有些值不应被设置为响应式的,例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。Demo<t原创 2021-12-13 16:40:57 · 131 阅读 · 0 评论 -
vue-vue3(6)-shallowReactive,shallowRef,readonly,shallowReadonly
vue-vue3(6)-shallowReactive,shallowRef,readonly,shallowReadonly1.shallowReactive 与 shallowRefshallowReactive:只处理对象最外层属性的响应式(浅响应式)。shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据,后续功能原创 2021-12-13 16:02:59 · 440 阅读 · 0 评论 -
vue-vue3(5)-生命周期+自定义hook函数+toRef(toRefs)
vue-vue3(5)-生命周期vue2的声明周期视图vue3的声明周期视图两个被更名:beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeMountmounte原创 2021-12-13 15:21:34 · 859 阅读 · 1 评论 -
vue-vue3(4)-计算属性与监视computed,watch,watchEffect
computed,watch,watchEffect原创 2021-12-10 11:07:02 · 122 阅读 · 0 评论 -
vue-vue3(3)-Vue3.0中的响应式原理,reactive对比ref,setup的两个注意点
Vue3.0中的响应式原理,reactive对比ref,setup的两个注意点原创 2021-12-10 10:36:06 · 250 阅读 · 0 评论 -
vue-vue3(2)-setup与ref函数,reactive函数
setupref 函数reactive 函数原创 2021-12-08 17:32:32 · 346 阅读 · 0 评论 -
vue-vue3(1)-简介与创建Vue3.0工程
vue-vue3-创建Vue3.0工程1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…2.源码的升级原创 2021-12-08 16:09:29 · 112 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(7)history模式与hash模式+element-ui组件库
vue-vueX(6)-history模式与hash模式对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。hash模式:地址中永远带着#号,不美观 。若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。兼容性较好。history模式:地址干净,美观 。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。原创 2021-12-01 17:19:13 · 693 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(6)全局路由守卫+独享路由守卫+组件内路由守卫
vue-vueX(5)-vuex路由(6)全局路由守卫+独享路由守卫+组件内路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫://全局前置守卫:初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('sc原创 2021-12-01 16:54:26 · 962 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(5)编程式路由导航+缓存路由组件+两个新生命周期钩子
vue-vueX(5)-vuex路由(5)编程式路由导航+缓存路由组件编程式路由导航作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活具体编码://$router的两个APIthis.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx }})this.$router.replace({ name:'xiangqing', params:{ id:xxx原创 2021-12-01 15:20:57 · 167 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(4)props参数+router-link的replace属性
vue-vueX(5)-vuex路由(4)命名路由+params参数 作用:让路由组件更方便的收到参数{ name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件 // props:{a:900} //第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组原创 2021-11-30 16:15:22 · 360 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(3)命名路由+params参数
vue-vueX(5)-vuex路由(3)命名路由命名路由作用:可以简化路由的跳转。如何使用给路由命名:{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello,原创 2021-11-26 11:19:52 · 149 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(2)多级路由+query参数
vue-vueX(5)-vuex路由(6)多级路由配置路由规则,使用children配置项:routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写:/news component:News }, { path:'message原创 2021-11-25 19:18:59 · 396 阅读 · 0 评论 -
vue-vueX(5)-vuex路由(1)路由的基本使用
vue-vueX(5)-vuex路由理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。路由详解基本使用多级路由路由的query参数命名路由路由的params参数路由的props配置router-link的replace属性1.基本使用安装vue-router,命令:npm i vue-router应用插件:Vue.use(VueRouter)编写ro原创 2021-11-25 18:57:40 · 617 阅读 · 0 评论 -
vue-vueX(4)-vuex模块化+命名空间
vue-vueX(4)-vuex模块化编码目的:让代码更好维护,让多种数据分类更加明确。修改store.jsconst countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbou原创 2021-11-25 15:42:07 · 275 阅读 · 0 评论 -
vue-vueX(3)-辅助函数map(mapState,mapGetters,mapActions,mapMutations)
vue-vueX(3)-四个map方法的使用(mapState,mapGetters,mapActions,mapMutations)mapState方法:用于帮助我们映射state中的数据为计算属性computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生原创 2021-11-25 10:06:50 · 1740 阅读 · 0 评论 -
vue-vueX(2)-store_getters的使用
vue-vueX2-store_getters的使用概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。在store.js中追加getters配置......const getters = { bigSum(state){ return state.sum * 10 }}//创建并暴露storeexport default new Vuex.Store({ ...... getters})组件中读取数据:$store.getters.原创 2021-11-24 17:28:49 · 3470 阅读 · 0 评论 -
vue-vueX(1)-vuex介绍,环境搭建及案例使用
vue-vuex在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。何时使用? 多个组件需要共享数据时 vuex 流程概念使用vuex 步骤引入vuex npm i vuex 导入vuex import vuex from ‘vuex’ 使用vuex Vue.use(vuex)在src 创建 store 文件夹并创建 index.js编写in原创 2021-11-24 17:02:18 · 731 阅读 · 0 评论