vue
Tokisaki_Kurumi
这个作者很懒,什么都没留下…
展开
-
vue3中v-model结合了vue2中的.sync语法
示例:父组件:<template> <div>{{count}}</div> <hr/> <Son v-model:changeCount="count"></Son><!-- 等价于--><!-- <Son :changeCount="count" @update:changeCount="count=$event"></Son>--></template原创 2021-10-28 11:16:18 · 394 阅读 · 0 评论 -
vue2数据响应原理核心 Object.defineProperty() 深入浅出的讲解
讲解大致会根据下图展开本文部分参考了书籍《你不知道的javascript》上卷对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valueObject.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当前需要定义的转载 2021-06-16 20:40:27 · 449 阅读 · 0 评论 -
vue3数据响应原理Proxy——阮一峰
《ES6标准入门》(阮一峰)–14.Proxy1.概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。var obj = new Proxy({}, { get:转载 2021-06-16 08:31:04 · 4132 阅读 · 0 评论 -
vue组件通信—依赖注入provide和inject基础使用
场景:父组件的数据要共享给所有的子孙组件就可以使用provide和inject注意点:父组件暴露的数据不是响应式的<script>import Son from './components/Son.vue'export default { components: { Son }, data(){ return { money: 100 } }, // 1.如果父组件的数据要共享给所有的后代组件数据, 可以使用provide来暴露提供数据 .原创 2021-05-26 17:56:24 · 178 阅读 · 0 评论 -
vuex状态管理基础使用
vuex是vue的集中状态管理工具,状态就是数据。状态管理就是集中管理vue中**通用**的一些数据。 使用场景:多个组件共享同一份数据,才会将这个数据放在vuex中,组件内部自己使用的数据还是放在组件的data中。不是所有的场景都适用于vuex,只有在必要的时候才使用vuex使用了vuex之后,会附加更多的框架中的概念进来,增加了项目的复杂度vuex的优点:方便的解决多组件的共享状态vuex的作用是解决多组件状态共享的问题。它是独立于组件而单独存在的,所有的组件都可以把它当作一座桥梁.原创 2021-05-26 17:48:38 · 259 阅读 · 2 评论 -
Vue路由——路由嵌套和前置守卫
路由嵌套main.js– 继续配置2级路由一级路由path从/开始定义二级路由往后path直接写名字, 无需 / 开头嵌套路由在上级路由的children数组里编写路由信息对象onst routes = [ // ...省略其他 { path: "/find", name: "Find", component: Find, children: [ { path: "componentOne", component:原创 2021-05-23 18:28:47 · 346 阅读 · 0 评论 -
Vue路由——编程式导航
编程式导航 - 基础使用编程式导航是使用JS代码进行跳转语法:this.$router.push({ path: "路由路径", // 都去 router/index.js定义 name: "路由名" //path和name二选一})path方法也可以简写this.$router.push({ path: "路由路径"})//上面的也可以简写为:this.$router.push('路由路径')注意:如果使用name方法必须要在main.js里给路由取原创 2021-05-23 15:32:42 · 193 阅读 · 0 评论 -
Vue路由——重定向、模式、404页面
重定向配置了路由后,页面刚打开是空的,所以需要设置默认初始页面。第一种方法是:const routes = [ { path :"/", component:Find }, { path:"/find", component:Find }]缺点,初始"/"页面和“/find”页面效果一样解决:利用重定向:const routes = [ { path: "/", // 默认hash值路径 redirect: "/find" // 重定向到/原创 2021-05-23 15:14:59 · 306 阅读 · 0 评论 -
Vue路由——声明式导航及跳转传参
<template> <div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/part">朋友</router-link> /原创 2021-05-23 11:40:57 · 1156 阅读 · 0 评论 -
Vue路由——vue-router基础使用
安装yarn add vue-router导入路由import VueRouter from 'vue-router'使用路由插件// 在vue中,使用使用vue的插件,都需要调用Vue.use()Vue.use(VueRouter)创建路由规则数组const routes = [ { path: "/find", component: Find }, { path: "/my", component: My }, { pat原创 2021-05-23 10:47:58 · 153 阅读 · 0 评论 -
VUE组件——动态组件、组件缓存
动态组件:多个组件同时使用同一个挂载点,并动态的进行切换,就是动态组件<template> <div> <button @click="comName = 'page1'">page1</button> <button @click="comName = 'page2'">page2</button> <p>下面显示注册组件-动态切换:</p> <di原创 2021-05-22 20:06:15 · 226 阅读 · 0 评论