![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习
文章平均质量分 57
Rulelur
这个作者很懒,什么都没留下…
展开
-
vue学习-状态管理
使用reactive打造简单状态管理。(复杂的用Vuex)适用于全局的数据变更,需要更新下面多个层级的组件的情况。(props只适合父子组件传递)1.用一个store.js专门保存全局信息// store.jsimport { reactive } from "vue";export default { state: reactive({ globalMsg: "全局信息" }), setGlobalMsg(newValue) { this.state.globalMs原创 2021-11-09 00:05:33 · 137 阅读 · 0 评论 -
vue学习-teleport
基本使用teleport 可以将包裹的内容移动到另外的dom元素下属性:to:类型Stirng,必须是有效的查询选择器(#some-id .some-class之类)或 HTMLElementdisabled:类型boolean,启用和禁用转移功能改变disabled,这将移动实际的 DOM 节点,而不是被销毁和重新创建,并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态teleport包裹的子组件虽然被转移到了不同地方,但...原创 2021-11-06 00:03:06 · 174 阅读 · 0 评论 -
vue学习-自定义指令
vue局部指令使用:元素上加上v-自定义指令名<template> <input type="text" v-my-focus /></template><script>export default { directives: { "my-focus": { mounted(el) { el.focus(); }, }, },};</script>钩.原创 2021-11-05 23:17:35 · 3978 阅读 · 0 评论 -
vue学习-生命周期
生命周期钩子 | Vue.jshttps://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate文档写的太好了,只能照搬。列一下上图中没有的几个钩子activated被 keep-alive 缓存的组件激活时调用deactivated被 keep-alive 缓存的组件失活时调用。以上两个是针对动态组件的激活和缓存<keep-alive> <component :is="current...原创 2021-11-03 23:45:05 · 94 阅读 · 0 评论 -
vue学习-模板引用
模板引用ref,获得dom元素实例,可以进行一些操作<input type="text" ref="input" />this.$refs.input.focus()也可以加在子组件上,调用子组件的methods,修改子组件的data<ref-child :ref="refName"></ref-child>data() { return { refName: "childComponent", };},mounted(原创 2021-10-31 23:29:40 · 679 阅读 · 0 评论 -
vue学习-动态组件 & 异步组件
1.在动态组件上使用 keep-alive使用<component :is="currentTabComponent"></component>进行组件切换的时候,每次改变currentTabComponent的值,都会重新创建一个该组件的实例,这意味着组件的状态(比如用户的输入)在切换组件后不会被保存下来。要缓存动态组件的内容,需要用<keep-alive>包裹它<!-- 失活的组件将会被缓存!--><keep-alive> .原创 2021-10-30 23:50:51 · 278 阅读 · 0 评论 -
vue学习-深层组件传递数据Provide/inject
1.Provide/inject父组件的数据可以放在provide,任意层级的子组件声明inject,便可以访问到该数据 provide: { msg: "父组件数据", },inject: ["msg"]值为对象的provide无法访问组件实例 property,要访问需将provide 转换为返回对象的函数,子组件部分不需要做修改。 data() { return { dataMsg: "父组件数据", }; }, pr.原创 2021-10-29 23:52:31 · 450 阅读 · 0 评论 -
vue学习-插槽
1.插槽内容父组件可以在html的子组件元素中间插入html 字符串 组件,这些东西都会被插入到子组件的<slot></slot>所占的位置上,如果子组件没有<slot></slot>,则插入的内容会被抛弃 <slot-child> <h3>插槽内容</h3> </slot-child> <div>slot-child</div> <slot>原创 2021-10-29 23:03:52 · 110 阅读 · 0 评论 -
vue学习-自定义事件
与组件和 prop 一样,建议在父组件html使用kebab-case (短横线分隔命名),在子组件用驼峰命名触发事件。1.验证抛出的事件要添加验证,将为事件分配一个函数,该函数接收传递给 $emit 调用的参数,并返回一个布尔值以指示事件是否有效<template> <div @click="click()">{{ name }}</div> <input type="text" v-model="name" /> <bu原创 2021-10-28 00:02:46 · 181 阅读 · 0 评论 -
vue学习-非 Prop 的 Attribute
一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。1.Attribute 继承当组件返回单个根节点时,非 prop attribute 将自动添加到根节点的 attribute 中如下例,父组件data-status就会自动添加到子组件的单个根节点的attribute中当然,如果子组件将dataStatus加入props,就不会出现在根节点的attr原创 2021-10-26 23:51:33 · 476 阅读 · 0 评论 -
vue学习-Props
1.Prop 类型prop可以声明类型,当类型不一致,能正常运行,但是会在console报warn props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise, // 或任何其他构造函数 },传入一个bool.原创 2021-10-25 23:20:22 · 462 阅读 · 0 评论 -
vue学习-路由入门
1. 安装vue本身没有整合路由,是使用的vuer-routernpm install vue-router@42. 使用router.js可以使用嵌套路由,嵌套父组件也需要router-viewimport { createRouter, createWebHistory } from "vue-router";import Ha from "./components/Ha.vue";import Hb from "./components/Hb.vue";//.原创 2021-10-23 23:54:19 · 244 阅读 · 0 评论 -
vue学习-组件基础
1. 父子组件传值父组件通过prop向子组件传递数据,HTML attribute 名不区分大小写,因此浏览器将所有大写字符解释为小写,所以这里的prop使用kebab-case命名法。传递到子组件,因为不是html attr,可以正常使用camelCased命名法,比如子组件的:props: ["childName", "fontSize"],{{ childName }}不过如果是单文件组件,是可以用camelCased命名法命名HTML attribute的<template.原创 2021-10-22 23:28:08 · 112 阅读 · 0 评论