【Vue3】模板语法

简介: Vue.js使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层组件实例的数据。所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

🏆今日学习目标:模板语法

😃创作者:颜颜yan_

✨个人格言:生如芥子,心藏须弥

⏰本期期数:第三期

🎉专栏系列:Vue3


前言


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-html="name"></p>


Attribute(属性)


Mustache语法不能在HTML的属性中使用,但是可以使用v-bind指令,v-bind指令用来动态绑定属性的内容。如果绑定的值是null或undefined,那么该属性将不会被包含在渲染的元素上。


<p v-bind:id="dynamicId">v-bind绑定</p>


使用JavaScript表达式


对于所有的数据绑定,Vue.js都提供了完全的JavaScript表达式支持。


<p>{{num+1}}</p>


指令


指令是带有v-前缀的特殊属性,指令属性的值预期是单个JavaScript表达式。当表达式的值发生改变时,将其产生的连带影响,响应式地作用于DOM。如下是几个常用指令。


  • v-on:用于监听DOM事件。
  • v-if:条件渲染指令。
  • v-show:隐藏节点。
  • v-for:列表渲染指令。


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


d80f671be8274ea1b30645b2b7bcffda.gif

目录
相关文章
|
3天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
18 0
Vue3 基础语法
|
6天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
10 0
|
6天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
17 3
|
9天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
23 0
|
9天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
9天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
20 0
|
9天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
26 0
|
9天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
37 0
|
9天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
13 1
|
9天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
17 0