Vue官方文档阅读总结-2

本文概述了Vue.js中模板语法的应用,包括插值、指令、计算属性和条件渲染。讲解了如何处理复杂的逻辑结构,以及如何通过Vue的响应式系统和虚拟DOM优化渲染效率。还介绍了Class与Style绑定和视图与数据模型的同步方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

模板语法
在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够只能地计算出最少需要渲染多少组件,并把DOM操作次数降低到最小。

  1. 插值
    1)可以只用双大括号
    2)可以使用原始HTML —但是需要使用v-html指令
    3)对于attribute需要使用 v-bind指令
    4)也可以直接使用js表达式
    注意:只能使用表达式,而且双大括号里面必须是单个表达式
  2. 指令
    1)定义:带有v-前缀的特殊attribute,用于单个Js表达式(除去for)
    作用: 当表达式的值改变的时候,响应式地作用于DOM
    2)动态参数,可以用方括号括起来的JS表达式作为一个指令的参数
    *注意:*异常时null(用于显性地溢出绑定)
    同时需要小写来命名键名
    3)修饰符 用于指出一个指令应该以特殊方式绑定(需要注意)

计算属性
1)定义: 简化模板中的逻辑
2)用法:建立依赖关系,当被依赖的改变的时候,所有依赖它的绑定也会更新,利用getter
3)计算属性缓存和方法:
计算属性缓存:基于响应式进行缓存,响应式依赖发生变化才重新求值
方法:只要触发重新渲染,调用方法将总会再次执行函数。
4)侦听属性(用于观察和响应Vue实例上的数据变动)
注意:某些数据随着其他数据变动而变动 还是用计算属性。
5) 侦听属性 是需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

总结:这章讲的是面对更多的逻辑结构,应该如何处理。对这种情况下的不同子情况又该如何处理(随着变化/异步开销大)。

Class与Style绑定
目标:操作元素class列表和内联样式的数据绑定。
方法:Vue做了增强,v-bind用于class和style。

条件渲染
注意:
v-if是真正的条件渲染,也是惰性的,直到变成真的,才会渲染条件块
v-show 有更高的初始渲染开销。

列表渲染

  1. 在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

总结:
文本内容就是view层管理的,而model层负责的是管理数据,那么如何保持一致,就是view-model层要做的事情。(自动更新的话 就是MVVM模型)
但是Vue不是一个MVVM框架,没有真正的view-model层,它是通过模板间接语法实现的,也就是通过编译模板,解析出view-model的绑定,然后根据响应式系统和虚拟DOM来实现同步。

渲染过程是:
模板->真实HTML的JS对象表示->调用DOM方法,借用JS对象->生成HTML
(Vue还注入了响应式系统,可以根据数据变化自动更新视图,以及根据视图自动更新数据)

完整渲染过程:
感觉大概跟spring差不多

https://zhuanlan.zhihu.com/p/266966092

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值