![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 95
Vue
Kiwi23333
好好睡觉
展开
-
Vue2(一):初识Vue,模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件相关内容
数据代理:通过一个对象代理另一个对象中属性的操作(读/写)比如下面这个案例,我们可以通过obj2来管理obj1里面的x(读/写)记住这个案例,后面的理解起来可能会容易些//数据代理:通过一个对象代理另一个对象中属性的操作(读/写)//通过obj2来读取或修改obj1里的xget() {console.log('有人要通过obj2读取obj1里的x');},set(val) {console.log('有人要通过obj2修改obj1里的x');})原创 2023-10-16 15:37:02 · 192 阅读 · 1 评论 -
Vue2(二):计算属性、监视属性
定义:要用的属性不存在,要通过Vue中已有属性计算得来。原理:底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。备注:1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。2.如果计算属性要被修改,那必须写set函数去响应修改,原创 2023-11-05 14:56:23 · 421 阅读 · 0 评论 -
Vue2(三):绑定样式、条件渲染、列表渲染、列表过滤、列表排序
这个案例再次体现出计算属性的强大之处,只要get里用到的数据(keyword,sortType)发生改变,get都会重新执行,模板都会重新解析,这个业务逻辑就实现了。2、语法:v-for=“(item, index) in xxx” :key=“yyy”,其中xxx是遍历的目标,yyy是唯一的索引,用于区分每个嘎达。(2)旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM,随后渲染到到页面。数组写法适用于:要绑定多个样式,但是不确定绑定哪几个,就写成数组,省的一个一个绑定。原创 2023-11-05 19:00:00 · 396 阅读 · 0 评论 -
Vue2(四):Vue监测数据的原理
Vue监视数据的原理1.vue会监视data中协有层次的数据。2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或3.如何监测数组中的数据?原创 2023-11-05 14:58:50 · 173 阅读 · 0 评论 -
Vue2(五):收集表单数据、过滤器、自定义指令、生命周期
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理比如价格1999改成1,999等需求,复杂的用计算属性或方法)。语法:或{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"(第二种几乎不用)备注:1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据v-bind: 单向绑定解析表达式, 可简写为 :xxxv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on。原创 2023-11-05 15:00:20 · 117 阅读 · 0 评论 -
Vue2(六):组件化编程
使用创建,其中options和时传入的那个options几乎一样,但也有点区别;(1)el不要写,为什么?最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。备注:使用template可以配置组件结构。(2)data必须写成函数,为什么?避免组件被复用时,数据存在引用关系,比如我父组件要多次复用一个子组件,那如果其中一个子组件做了修改数据操作,其他复用的地方数据也会被修改。看看下面的代码,就明白了//1.data定义为对象,里面的值有人一改,那全都用到底地方都改了。原创 2023-11-05 15:02:01 · 78 阅读 · 0 评论 -
Vue2(七):脚手架、ref属性、props配置项、mixin混入、插件、scoped样式
定义在另一个js文件中,这里定义在mixin.js中methods: {},console.log('混合里的mounted优先调用');可以在另一个js中配置插件,然后通过import引入到main.js中看看下面的代码,复习复习之前的知识//第一个参数是Vue构造函数//后面的参数是使用者传进来的东西123//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})原创 2023-12-11 13:29:58 · 1022 阅读 · 0 评论 -
Vue2(八)TodoList案例
(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:一个组件在用:放在组件自身即可。一些组件在用:放在他们共同的父组件上(状态提升)。(3)实现交互:从绑定事件开始。原创 2023-12-19 10:27:20 · 819 阅读 · 0 评论 -
Vue2(九):浏览器本地存储、组件自定义事件
1、一种组件间通信的方式,适用于:子组件 ===> 父组件2、使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B的标签绑定自定义事件(事件的回调在A中,用来接收数据)。3、绑定自定义事件:<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>......(3)若想让自定义事件只能触发一次,可以使用.once修饰符,或$once方法。this.$emit('atguigu',数据)给谁绑的就找谁触发5、解绑自定义事件。原创 2023-12-19 10:28:14 · 451 阅读 · 0 评论 -
Vue2(十):全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的,而这个用来接收数据的组件实例A都销毁了,回调函数也没了,那这个xxxx自定义事件也就没用了,你留着会污染全局环境(这块儿有点迷糊)这玩意儿用的不多,和全局事件总线写法差不多,但是全局事件总线更好,因为是在Vue身上操作,但是这个的话要引入第三方库,库有很多,比如pubsub-js。,那每次点击编辑按钮,都会添加一次isEdit属性,这样是不太好的,所以要加个判断,添加过了就改成true,没添加过就添加个true。,而且原来的span要隐藏。原创 2023-12-27 11:07:38 · 582 阅读 · 0 评论 -
Vue2(十一):脚手架配置、vue-resource、插槽
这里就用到了作用域插槽,如果数据不在App中了,而在Category.vue中,然后App.vue要用到数据,这时我们就可以在Category.vue中使用slot标签给父组件App传值,写法很像当时父给子传值的props写法,在标签里搞个。比如有那么一天,我们要在页面显示三个类别,每个类别下面有不同的文字,本来是我们把数据传给子组件然后使用v-for遍历生成的文字信息,但是产品经理突然让你把美食类的下面换成图片,电影类下面换成视频,怎么搞。1、优点:可以配置多个代理,且可以灵活的控制请求是否走代理。原创 2023-12-27 11:09:35 · 427 阅读 · 0 评论 -
Vue2(十二):Vuex
注意Vue2一定要安装vuex3,如果是vue3可以直接npm i vuex安装的是vuex4,可以去文件里看下vue的版本是啥,千万别输错了,不然会陷入痛苦的报错……原创 2023-12-27 11:15:18 · 1101 阅读 · 0 评论