为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第一天 vue2.5入门

标签:
Vue.js

学习课程名称:vue2.5入门
章节名称:Vue基础语法
讲师:Dell


课程内容

  1. 创建一个Vue实例
  2. 挂载点、模板、实例
  3. 实例中的数据、事件、方法
  4. 属性绑定和双向数据绑定
  5. 计算属性和监听器
  6. v-if v-show v-for

创建Vue实例

var vm = new Vue({
            el: '#app', 
            data: { 
                msg: '欢迎学习Vue!' 
            }
        })

双向数据绑定

vue是采用数据劫持配合发布者-订阅者的模式的方式,通过Object.defineProperty()来劫持各个属性的getter和setter,在数据变动时,发布消息给依赖收集器(dep中的subs),去通知(notify)观察者,做出对应的回调函数,去更新视图。

计算属性和监听器区别

计算属性:
(1).计算属性是一个函数, 返回的结果是计算属性的结果。
(2).第一次计算的时候会把结果缓存起来。
(3).后续用到计算属性,如果计算属性中用到的数据没有发生变化,则会读取缓存的结果, 不会重新计算。反之重新计算,并更新值到缓存中

注意:
每次计算的结果缓存的时候,都会重新创建一个变量保存结果。

监听器:
(1).当我们定义一个侦听器的时候,侦听器与data中的属性同名,当属性的值发生改变的时候,侦听器被触发执行。

注意:
一个侦听器对应data中的一个属性,当属性发生变化时触发侦听器的执行。

v-if 🆚 v-show
实现本质方法区别
v-show本质就是标签display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了

性能
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

用法
v-if更灵活


图片描述图片描述图片描述

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消