小马Ti的博客

组件的自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件：1.第一种方式，在父组件中： <Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/> 2.第二种方式，在父组件中： <Demo ref="demo"/> ...... mounted(){ ...

组件的嵌套vm管理一个app组件 APP组件管理所有的父组件 父组件里里面有各种各样的子组件 这样的一个分层管理

组件化编码流程 组件化编码流程： (1). 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 (2). 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用； 1). 一个组件在用：放在组件自身即可。 2). 一些组件在用：放在他们共同的父亲组件上（状态提升）。 (3). 实现交互：从绑定事件开始。 props适用于： (1). 父组件 ==> 子组件 通信 (2). 子组件 ==> 父组件 通信（要求父先给子一个函数） 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！ props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。|

组件使用方法 注意事项 1.组件命名： 单个词：可以使用小写字母（如schoo）或首字母大写（如School）。 多个词：推荐使用kebab-case（如my-school），也可以使用CamelCase（如MySchool），但后者需要Vue脚手架的支持。 避免冲突：组件名应尽量避免与HTML元素名重复，例如不能用h2等作为组件名。 自定义显示名：可以通过设置name选项来指定组件在开发者工具中的显示名称。 2.组件标签： 使用闭合标签的方式 <school></school> 是标准的用法。 简写形式 <school /> 也是有效的，但不使用脚手架时可能导致后续组件无法正常渲染。 3.简化定义： 当使用Vue.extend(options)来定义组件时，可以直接简写为const school = options以减少代码量。

监视属性 使用方式第一种12345678910111213141516171819202122232425262728const vm = new Vue({ el:"#root", data:{ isHot:true, }, methods: { qiehuan() { this.isHot = !this.isHot this.x++ } }, computed: { info(){ return this.isHot?"炎热":"凉爽" } }, watch: { info:{ //...

生命周期 生命周期流程 总结

理解MVVM前言M(model模型):对应data中的数据 V(view 视图):模板 VM(ViewMoide视图模型):Vue实例对象

深度监视 开启深度监视12345678watch: { "numbers":{ deep:true, handler() { console.log("a被改变了") } } } 深度监视的简写第一种123456watch: { isHot(newValue,oldValue){ console.log("isHot被修改了",newValue,oldValue) } } 第二种1234567vm.$watch("isHot",function (newValue,oldValue) { ...

消息的订阅与发布一种组件间通信的方式，适用于任意组件间通信。 使用步骤1.安装pubsub:npm i pubsub-js2.引入:import pubsub from 'pubsub-js'3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。12345678methods:{ demo(data){ ..... }},mounted(){ this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息} 4.提供数据:pubsub.publish(‘xxx’,数据）5.最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅。

浏览器本地存储存储内容大小一般支持5MB左右（不同浏览器可能还不一样）浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。相关API：1.xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2.xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。 3.xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。 4.xxxxxStorage.clear() ...