摘要: 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 因此比如我们修改一个数组其中的一个值,或者添加一条数据时,数据变化了,但是视图没有渲染。 例如: <div v-for="item in items" :key="item">{{item}}</div> <button @click="a 阅读全文 »
posted @ 2022-06-27 20:43 长安·念 阅读(665) 评论(0) 推荐(0) 编辑
摘要: render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能,它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 render也可以称为渲染函数 因为 Vue 是虚拟 DOM,所以在拿到 Template 模板时也要转 阅读全文 »
posted @ 2022-06-27 18:18 长安·念 阅读(885) 评论(0) 推荐(0) 编辑
摘要: 全局自定义指令 在main.js中注册input聚焦 Vue.directive('focus', { inserted: function (el) { // 聚焦元素 el.focus() } }) directive:指令 inserted:嵌入 focus:指定的是指令的名称,使用的时候要加 阅读全文 »
posted @ 2022-06-27 13:33 长安·念 阅读(57) 评论(0) 推荐(0) 编辑
摘要: 两者的区别: computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作, watch:通常监听一个变量,可以执行异步操作 简单记就是:computed是多对一,watch是一对多 计算属性(computed) 为什么要用计算属性? 当一个数据需要复 阅读全文 »
posted @ 2022-06-27 12:24 长安·念 阅读(80) 评论(0) 推荐(0) 编辑
摘要: Vue的生命周期 Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们称为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。 生命周期: vue实例从创建到销毁的过程 beforeCreate( 创建前/出生 阅读全文 »
posted @ 2022-06-26 22:01 长安·念 阅读(51) 评论(0) 推荐(0) 编辑
摘要: 第一种: 传递一个数组,这里的class需要使用v-bind的数据绑定; <h2 :class="['red', 'size']">hello</h2> 第二种: 在数组中使用三元表达式; <h2 :class="['red', 'size', flag?'active':'']">hello</h 阅读全文 »
posted @ 2022-06-26 17:26 长安·念 阅读(34) 评论(0) 推荐(0) 编辑
摘要: vue路由的两种导航传参方式: 1.声明式导航(router-link) 2.编程式导航(push|replace) query参数 声明式导航(router-link) 父组件: 传递参数 <!-- 跳转并携带query参数,to的字符串写法 --> <router-link to="/home/ 阅读全文 »
posted @ 2022-06-26 17:06 长安·念 阅读(37) 评论(0) 推荐(0) 编辑
摘要: 1.概念 ​ 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。 2.何时使用? ​ 多个组件需要共享数据时 3.搭建vuex环境 创建文件:src/store/index.js //引 阅读全文 »
posted @ 2022-06-26 10:26 长安·念 阅读(68) 评论(0) 推荐(0) 编辑
摘要: EventBus 一种组件间通信的方式,适用于任意组件间通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式,所以代码里需要有一个 阅读全文 »
posted @ 2022-06-26 10:08 长安·念 阅读(122) 评论(0) 推荐(0) 编辑
摘要: $attrs与$listeners 祖先传递数据给子孙 如果要C组件要使用A组件的方法或者数据.要不用props传递(繁琐),要不用eventBus或者vuex(大材小用) 利用 $attrs 实现祖孙组件间的数据传递, $listeners 实现祖孙组件间的事件监听 $attrs 包含了父作用域中 阅读全文 »
posted @ 2022-06-26 10:03 长安·念 阅读(76) 评论(0) 推荐(0) 编辑
摘要: ref ref='xx'相当于id='xx', this.$refs.xx去找具体的位置 通过this.$refs 可以访问到此vue实例中的所有设置了ref属性的DOM元素,并对其进行操作。 子传父 父组件在使用子组件的时候设置ref 父组件通过设置子组件ref来获取数据 父组件 <Childre 阅读全文 »
posted @ 2022-06-26 10:01 长安·念 阅读(295) 评论(0) 推荐(0) 编辑
摘要: 子组件使用父组件的数据和方法 $parent 指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。 父组件 data() { return { msg:'age' } }, components: { 阅读全文 »
posted @ 2022-06-26 09:39 长安·念 阅读(209) 评论(0) 推荐(0) 编辑
摘要: 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 > 子组件 。 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。 分类:默认插槽、具名插槽、作用域插槽 使用方式: 默认插槽: 父组件中: <Category> <d 阅读全文 »
posted @ 2022-06-26 09:37 长安·念 阅读(1290) 评论(0) 推荐(0) 编辑
摘要: 组件的自定义事件(子组件 > 父组件) 一种组件间通信的方式,适用于:子组件 > 父组件 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。 绑定自定义事件: 第一种方式,在父组件中:<Demo @event-name="test"/> 或 <D 阅读全文 »
posted @ 2022-06-26 09:36 长安·念 阅读(70) 评论(0) 推荐(0) 编辑
摘要: props(父传子) 功能:让组件接收外部传过来的数据 传递数据:<Demo name="xxx"/> 父组件 子组件 如果父组件传的值是一个动态的(父传子的时候,则用v-bind绑定要用的传入的名) 子组件不变 接收数据: 第一种方式(只接收):props:['name'] 第二种方式(限制类型) 阅读全文 »
posted @ 2022-06-26 09:35 长安·念 阅读(69) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示