Vue_(组件)实例方法

Vue.js实例方法/生命周期传送门常用的实例方法数据: 传送门 vm.$set:设置属性值 vm.$delete:删除属性值 vm.$watch:观测数据变化生命周期 vm.$mount:手动挂载Vue实例 vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听 vm.$nextTick:将方法中的回调函数,延迟到DOM更新后传送门 Learn 一.vm.$set 二.vm.$delete 三.vm.$watch 四.实例方法-生命周期项目结构 [每个demo下方都…

vue_组件间通信：自定义事件、消息发布与订阅、槽

自定义事件只能用于子组件向父组件发送数据可以取代函数类型的 props 在父组件: 给子组件@add-todo-event="addTodo" 在子组件: 相关方法中,this.$emit("add-todo-event", newTodo); pubsub 消息发布/订阅实现任意关系的组件间通信 yarn add pubsub-js 实例: 子组件发布消息: 要求删除 todo methods: { PubSub.publish("dele…

Vue_(组件通讯)使用solt分发内容

Vue特殊特性slot 传送门有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢?Vue提供了一个极为方便的内置组件<slot> Learn 一.使用solt分发内容目录结构 [每个demo下方都存有html源码] 一.使用solt分发内容在<my-component-a>组件中添加<h1>.<ul&…

Vue_(组件通讯)非父子关系组件通信

Vue单项数据流传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的 Learn 一.单项数据流目录结构 [每个demo下方都存有html源码] 一.单项数据流定义组件A和组件B,组件A和组件B同级关系,当点击<template-a>的button控件时,调用sendData函数,将template-a中的data数据发向template-b <…

Vue_(组件通讯)单项数据流

Vue单项数据流传送门单向数据流:父组件值的更新,会影响到子组件,反之则不行修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据如果对数据进行简单的操作,可以使用计算属性修改子组件的prop,同步到父组件: 使用.sync修饰符将要操作的数据封装成一个对象再操作单单项数据流设计原则: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这样会防止从…

Vue_(组件通讯)子组件向父组件传值

Vue组件传送门子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 2.准备获取数据:父组件com-a要获取子组件data中的height属性: 3.在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 4.在父组件中使用子组件的地方 <c…

Vue_(组件通讯)父组件向子组件传值

Vue组件传送门父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:com-b要获取父组件data中的name属性 3.在<com-b :name=“name”></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写 4.在子组件定义部分里添加选项,值是个字符串数组 props:[‘name’],将上边红色的属性名称写在这里…

Vue_(组件通讯)父子组件简单关系

Vue组件传送门在Vue的组件内也可以定义组件,这种关系成为父子组件的关系如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是 Vue实例 -- 根组件 root component-a – 相对于root 这是子组件,相对于component-b这是父组件 component-b -- 子组件目录结构简单的通过在父组件调用子组件,但父组件的值是无法直接传递给子组件 <!DOCTYPE html> <…

Vue_(组件通讯)动态组件结合keep-alive

keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 主要用于保留组件状态或避免重新渲染 include - 字符串或正则表达…

Vue_(组件通讯)动态组件

动态组件传送门在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件动态组件的使用:需要使用内置组件<component></component>,根据 :is 的值决定显示哪个组件,:is的值是要显示的组件id 目录结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> &…

Vue_(组件通讯)组件

Vue组件传送门组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 使用全局方法Vue.extend创建构造器: 再使用全局方法Vue.component注册组件: 在Vue.component里需要指明组件的名称,组件名称不能使用内置标签名称,如body 推荐使用短横线命名规则.例: my-component 正确 (推荐) my-Component 错误 mycomponent 正确 Mycompone…

Vue_(组件)过渡效果

Vue.js进入/离开 & 列表过渡传送门进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 过渡效果中也提供了对应的钩子函数,这些钩子函数需要在<transition>组件上绑定,然后再实现 Vue中的过渡效果也可以与其他第三方CSS动画库一起使用,例如Animate.css 如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了 Learn 一.进入/离开过渡效果二.过渡效果的钩子函数三.Vue过渡效…

Vue_(组件)自定义指令

Vue.js自定义指令传送门自定义指令:除了内置指令,Vue也允许用户自定义指令注册指令:通过全局API Vue.directive可以注册自定义指令自定义指令的钩子函数参数:自定义指令的钩子函数可以传递4个参数,分别是el.binding.vnode.oldVnode Learn 一.自定义指令钩子函数二.自定义指令钩子函数的参数三.自定义指令简写项目结构 [每个demo下方都存有html源码] 一.自定义指令钩子函数传送门自定义指令的钩子函数: bind:只调用一次,指令第…

Vue_(组件)计算属性

Vue计算属性中文文档传送门 Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视; 注意:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护 Learn 一.计算属性的基本使用二.计算属性的getter和setter 三.计算属性与方法的区别[重点] 传送门项目结构 [每个demo下方都存有html源码] 一.计算属性的基本使用计算属性computed中对<input>组件中msg信息进行事件监听 data…

Vue_(组件)实例生命周期钩子

Vue生命周期中文文档传送门 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期钩子:又称为Vue生命周期钩子方法/函数,是Vue为开发者提供的方法,我们可以通过这些方法在Vue实例创建.挂载.数据更新.销毁等阶段做一些事情 Vue的生命周期钩子方法: beforeCreate created beforeMount mounted beforeUpdate update activated deactivated beforeDestroy destroy…

Vue_(组件)实例属性

Vue实例属性与方法中文文档传送门 Vue实例属性:vue实例直接调用的属性 Learn 一.vm.$data:获取属性二.vm.$el:获取实例挂载的元素三.vm.$options:获取自定义选项/属性四.vm.$refs:获取通过ref属性注册的DOM对象项目结构 [每个demo下方都存有html源码] 一.使用vm.$data:获取属性 <script> let vm = new Vue({ el:'div', data:{ msg:'Hello Gary!!!' } })…

[React] 多组件生命周期转换关系

前段时间一直在基于React做开发,最近得空做一些总结,防止以后踩坑. 言归正传,React生命周期是React组件运行的基础,本文主要是归纳多组件平行.嵌套时,生命周期转换关系. 生命周期 React生命周期中有如下几种转换方式: 类调用: 此过程仅在类创建时被一次,即无论创建多少个ReactElement,此过程均只会执行一次 getDefaultProps 实例化: 此过程仅执行一次,执行完毕后,React组件真正被渲染到DOM中期间执行生命周期函数如下: getInitialState…

React组件方法中为什么要绑定this

如果你尝试使用过React进行前端开发,一定见过下面这样的代码: //假想定义一个ToggleButton开关组件 class ToggleButton extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this); this.handleChange = this.handleCh…