Vue.js基础总结

MVVM ( Model - View - ViewModel )模式包括3个核心部分。·

         Model (模型):由核心的业务逻辑产生的数据对象,例如从数据库取出并做特定处理后得到的数据。

        View (视图):即用户界面。

        ViewModel (视图模型):用于链接匹配模型和视图的专用模型。 数据的双向绑定。 View 和 Model 之间不直接沟通,而是通过 ViewModel 这个桥梁进行交互。


需要掌握的常用内部命令如下。

        (1) dir :显示一个目录中的文件列表。

        (2) cd :进入一个目录。

        (3) md :创建一个目录。

事件修饰符包括:.stop,.self,.capture,..once,.prevent

CDN ,是指内容分发网络。通过构建分布式的内容分发网络,用户可以就近获取所需内容,这样可以提高用户访问的响应速度和命中率。

常用的钩子函数。

        beforeCreate ():在实例创建之前调用。

        created ):在实例创建之后调用,此时尚未开始 DOM 编译。

        beforeMount ():在挂载开始之前调用。

        mounted ():在实例被挂载后调用,这时页面的相关 DOM 节点已被新创建的 vm .$ el 替换。它相当于 JavaScript 中的 window . onload ()方法。

        beforeUpdate ():每次页面中有元素需要更新时,在更新前就会调用 beforeUpdate ()钩子函数。

        updated ():每次页面中有元素需要更新时,在更新完之后就会调用 updated ()钩子函数        

        beforeDestroyO :在销毁实例前调用,此时实例仍然有效。

        destroyed ():在实例被销毁之后调用。

计算属性的 get 存取器与 methods 中定义一个方法。它们之间的如下重要区别:计算属性具有缓存的效果,而方法不具有。
侦听器的基本作用是在数据模型中的某个属性发生变化的时候进行拦截,从而执行指定的处理逻辑。我们通常会在两种场景中用到侦听器。 1.拦截操作        2.耗时操作

"深度侦听",是指当依赖或侦听的属性是一个对象而不是简单类型的值(例如数值、字符串等)时,就会以递归方式侦听对象的所有属性。

当通过下列方法操作或更改数组时,变化可以被侦听到。这些方法包括:
push()        尾部添加
pop()        尾部删除
unshift()        头部添加
shift()        头部删除
splice()        删除、添加、替换
sort()       排序
reverse()        逆序

浏览器产生事件流分为三个阶段。从最外层的根元素 html 开始依次向下,称为"捕获阶段";到达目标元素时,称为"到达阶段";然后依次向上回到根元素,称为"冒泡阶段"。

与按键相关的三个事件:

         keydown :按下键时触发。

        keypress :按下有值的键时触发,而当按下 Ctrl 、 Alt 、 Shift 、 Meta 这样无值的键时,

keypress 事件不会触发。对于有值的键,按下时先触发 keydown 事件,再触发 keypress 事件。         keyup :松开键时触发。

修饰符:.lazy,.number,.trim

Vue.js会尽可能高效地渲染元素,并且通常会复用已有元素而不是重新构造DOM结构

if和show的区别:

        1.v-if是“真正”的条件渲染,因为它会确保在切换过程中条件快内的事件侦听器被销毁和重建。

        2.v-if是“惰性”的,即如果在进行初始渲染是条件为假,则不会渲染,直到条件第一次变为真时,才开始渲染相应的DOM结构。

        3.v-show相对简单,不管初始条件是什么,元素总是会被渲染,并且还会基于CSS的display属性切换。

        4.通常,v-if的切换开销更大,而v-show的初始渲染开销更大。因此,如果切换非常频繁,建议优先使用v-show;而如果在运行时条件很少改变,则使用v-if效果较好。

如果数据项的顺序发生了改变,Vue.js不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置得到正确渲染。

当它们处于同一个节点时,v-for的优先级比v-if高,v-for每次迭代是都会执行一次v-if,这会造成不必要的计算开销。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js过滤器是一种用于对数据进行处理和格式化的功能。在Vue.js中,有两种使用过滤器的方式:全局过滤器和局部过滤器。 全局过滤器可以在Vue实例创建之前定义,并在整个应用程序中使用。例如,在Vue实例创建之前,可以使用Vue.filter()方法定义一个全局过滤器。然后,在模板中使用管道符(|)将数据传递给过滤器进行处理。\[1\]例如,可以定义一个名为addPriceIcon的全局过滤器,用于在价格前添加货币符号: ``` Vue.filter("addPriceIcon", (value) => { return '¥' + value; }) ``` 然后,在模板中使用该过滤器: ``` <p>电脑价格:{{price | addPriceIcon}}</p> ``` 局部过滤器只在特定的Vue实例中可用。可以在Vue实例的filters选项中定义局部过滤器。\[2\]例如,可以在Vue实例的filters选项中定义一个名为addPriceIcon的过滤器: ``` filters: { addPriceIcon(value) { return '¥' + value; } } ``` 然后,在模板中使用该过滤器: ``` <p>电脑价格:{{price | addPriceIcon}}</p> ``` 无论是全局过滤器还是局部过滤器,都可以在模板中使用管道符(|)将数据传递给过滤器进行处理。过滤器可以接受参数,并在处理数据时使用这些参数。\[3\]例如,可以定义一个名为sum的全局过滤器,用于将传入的值加上4: ``` Vue.filter("sum", function(value) { return value + 4; }); ``` 然后,在模板中使用该过滤器: ``` <p>{{message | sum}}</p> ``` 总结起来,Vue.js过滤器是一种用于对数据进行处理和格式化的功能。可以通过全局过滤器或局部过滤器来定义和使用过滤器。无论是全局过滤器还是局部过滤器,都可以在模板中使用管道符(|)将数据传递给过滤器进行处理。过滤器可以接受参数,并在处理数据时使用这些参数。 #### 引用[.reference_title] - *1* *2* [Vue.js过滤器filters](https://blog.csdn.net/m0_61961937/article/details/130302483)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue.js基础-过滤器(filters)](https://blog.csdn.net/Jasmines1993/article/details/79665079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值