迁安网站建设公司,佛山建网站公司,深圳专业建网站公司排行,门户网站架构#x1f3c6;今日学习目标#xff1a;模板语法 #x1f603;创作者#xff1a;颜颜yan_ ✨个人格言#xff1a;生如芥子#xff0c;心藏须弥 ⏰本期期数#xff1a;第三期 #x1f389;专栏系列#xff1a;Vue3 文章目录前言声明响应式状态插值文本Attribute#xff… 今日学习目标模板语法 创作者颜颜yan_ ✨个人格言生如芥子心藏须弥 ⏰本期期数第三期 专栏系列Vue3 文章目录前言声明响应式状态插值文本Attribute属性使用JavaScript表达式指令总结前言
Vue.js使用了基于HTML的模板语法允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML所以能被遵循规范的浏览器和HTML解析器解析。 在底层的实现上Vue将模板编译成虚拟DOM渲染函数结合响应性系统Vue能够智能地计算出最少需要重新渲染多少组件并把DOM操作次数减少到最少。 参考文档Vue3官网 声明响应式状态
选用选项式 API 时会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上。
插值
文本
数据绑定最常见的形式就是使用Mustache双大括号语法的文本插值Mustache标签会自动替代为对应组件实例中的属性。
p{{num}}/p也可以使用v-once进行一次性插值当数据改变时插值处的数据不会更新也就是一次性渲染。
p v-once{{uname}}/p如果使用{{}}插入一个HTML内容则需要添加v-html指令让插入的HTML内容以HTML的形式进行显示否则会显示字符串。 注意 v-html指令后面需要添加一个string类型来进行赋值。 v-html可以识别HTML代码如果任意使用HTML动态渲染会很容易导致XSS攻击所以要谨慎使用噢
p {{name}}/p
p v-htmlname/pAttribute属性
Mustache语法不能在HTML的属性中使用但是可以使用v-bind指令v-bind指令用来动态绑定属性的内容。如果绑定的值是null或undefined那么该属性将不会被包含在渲染的元素上。
p v-bind:iddynamicIdv-bind绑定/p使用JavaScript表达式
对于所有的数据绑定Vue.js都提供了完全的JavaScript表达式支持。
p{{num1}}/p指令
指令是带有v-前缀的特殊属性指令属性的值预期是单个JavaScript表达式。当表达式的值发生改变时将其产生的连带影响响应式地作用于DOM。如下是几个常用指令。
v-on用于监听DOM事件。v-if条件渲染指令。v-show隐藏节点。v-for列表渲染指令。 总结
以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏持续更新呢~ 咱们下期再见~
