![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 75
执久呀
你若盛开,清风自来
展开
-
Vue中的指令与自定义指令
定义一个v-big指令,和v-text功能类似,但会吧绑定的数值放大10倍data: {n:1,},});原创 2023-06-09 08:43:38 · 578 阅读 · 1 评论 -
Vue列表过滤与数据原理
1、vue会监视data中所有层次的数据。2、如何监视对象中的数据?通过setter实现监视,且要在new Vue时就传入要检测的数据。对象中后追加的属性,Vue默认不作响应式处理(没有get set作为监视,vue检测不到数据的变化)或第一个参数target是要添加目标位置,如vm._data.student第二个参数propertyName是要添加的值或者如果前面的是数组,那这个就是索引,第三个参数value是添加的值3、如何监视数组中的数据?调用原生对应的方法对数组进行更新。原创 2023-05-12 08:27:30 · 414 阅读 · 0 评论 -
Vue条件渲染v-if和v-show
2、语法:v-for=" (item,index) in xxx" :key=" yyy" ,in也可以改为of。注意:v-if可以和v-else-if、v-else一起使用,但要求这三个之中不能被打断(中间不能加入其他标签)②旧虚拟DOM中未找到与新的虚拟DOM相同的key。注:使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。Vue中的key中的作用?2、v-else-if='表达式'写法:1、v-if='表达式'3、v-else='表达式'写法:v-show="表达式"原创 2023-05-04 09:02:57 · 541 阅读 · 1 评论 -
Vue组件解析和绑定class样式
2、所有不背Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的执行才是vm或者组件实例对象。-- 绑定class样式--数组写法,适用于:要绑定的样式不确定,名字也不确定-->-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定-->绑定class样式--对象写法,适用于:要绑定的样式确定,名字也不确定,但要决定用不用-1、computed能完成的功能,watch都可以完成。原创 2023-02-05 09:01:00 · 514 阅读 · 1 评论 -
Vue计算属性和监视属性
2、如果计算属性要被修改,那必须写set函数去响应,,且set中要引起计算是依赖的数据发生变化。4、优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。1、Vue自身可以检测对象内部值的改变,但Vue提供的watch默认不可以。1、Vue中的watch默认不见时对象内部值的改变(一层)1、当被监视的属性变化时,回调函数自动调用,进行相关操作。1、计算属性最终会出现在vm上,直接读取使用即可。定义:要用的属性不存在,要通过已有属性计算得来。2、监视的属性必须存在,才能进行监视。原创 2023-02-03 09:48:29 · 564 阅读 · 0 评论 -
Vue中事件修饰符与键盘事件
Vue中的事件修饰符:1、prevent:阻止默认事件;2、stop:阻止事件冒泡;3、once:事件只触发一次;4、capture:使用事件的捕获模式;5、self:只有event.target是当前操作的元素时才触发事件;(只有和当前事件触发的标签一致时才会触发)6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕点完之后不会发生默认事件点完超链接不会发生跳转,因为prevent阻止了a标签的默认事件(跳转)div和button都有show事件,当点击按钮时,button会触发sh原创 2022-12-04 16:02:06 · 2938 阅读 · 2 评论 -
Vue中数据代理与事件处理
2、事件的回调需要配置在methods对象中,配置在data中也可以,但是Vue会给data中的数据做代理,而我们的回调不需要做代理,这就增加了Vue的负担。5、@click="test"和@click="test($event)"效果一致,但是后面的可以传如参数。4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm,或者组件实例对象;存在数据代理,所以可以通过vm直接操作data中的值,_data中的值会跟着变化。在Vue中的data数据,在其对象中以_data形式存在。原创 2022-11-30 15:13:36 · 1505 阅读 · 6 评论 -
Vue中el和data的写法与 MVVM模型
目录el和data的两种写法el的两种写法data的两种写法 data与el的写法小结MVVM模型 MVVM模型小结简写成 1.el有两种写法2、data有两种写法如何选择:目前那种写法都可以,后面组件的时候,data必须使用函数式,否则会报错。3、一个重要的原则:1、M: 模型(Model):对应data中的数据2、V: 视图(View):模版3、VM:视图模型(ViewModel):Vue实例对象 只要是vm对象中有的数据都可以展示出MVVM模型观察发现:原创 2022-11-26 10:49:36 · 737 阅读 · 1 评论 -
Vue的模版代码与数据绑定方式
{{}}访问到的是data层的数据,若要访问school层的name,只需{{school.name}}即可访问。在普通的url指定中,如果直接写{{url}},则会把""里面的值当成字符串,所以应该加上v-bind:href。单向绑定只有data到value的值,就是说,当data中的值发生改变时,value就会发生改变。双向绑定data和value是双向的,data可以到value,value也可以到data。2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。原创 2022-11-23 21:17:10 · 685 阅读 · 0 评论 -
认识Vue
vue是什么?是一套用于构建用户界面的渐进式JavaScript框架。渐进式:vue可以自底向上逐层的应用vue的发展历程vue的特点采用组件化模式,提高代码复用率、且让代码更好维护2、申明式编码,让编码人员无需直接操作DOM,提高开发效率3、使用虚拟算法+diff算法,尽量复用DOM界点原生的存在覆盖和未复用虚拟DOM是首先加载到内存的,采用了diff算法,会将新的虚拟DOM和旧的虚拟DOM进行比较,新的DOM和原来的DOM有相同的部分时,相同的部分在真实的页面会直接复用,不同的会直接添加。原创 2022-11-21 16:19:23 · 738 阅读 · 0 评论