vue3:模板语法

模板语法

所谓模板,是 Vue 中构建视图的地方。

模板的写法基本上和 HTML 是一模一样的,上手无难度。

不过这个之所以被称之为模板,就是因为这个和之前的模板引擎类似,提供了一些不同于纯 HTML 的特性。

文本插值

可以在模板里面使用一对大括号(双大括号、猫须语法),括号内部就可以绑定动态的数据。

vue 复制代码
<template>
  <div>{{ name }}</div>
</template>

<script setup>
const name = 'Steve'
</script>

<style lang="scss" scoped></style>

原始HTML

有些时候,变量的值对应的是一段 HTML 代码,但是普通的文本插值只会将这段 HTML 代码原封不动的输出

例如:

vue 复制代码
<template>
  <div>{{ htmlCode }}</div>
</template>

<script setup>
const htmlCode = '<span style="color:red">this is a test</span>'
</script>

<style lang="scss" scoped></style>

如果想要让上面的 HTML 字符串以 HTML 的形式渲染出来,那么需要指令。

指令是带有 v- 前缀的特殊属性。Vue 提供了一部分内置指令,开发者还可以自定义指令。

Vue 中所有内置的指令:cn.vuejs.org/api/built-i...

这里我们需要用到 v-html 的指令,例如:

vue 复制代码
<template>
  <div v-html="htmlCode"></div>
</template>

<script setup>
const htmlCode = '<span style="color:red">this is a test</span>'
</script>

<style lang="scss" scoped></style>

绑定属性

Vue 中的核心思想,就是将模板中所有的东西都通过数据来控制,除了普通文本以外,属性应该由数据来控制,这就是所谓的属性绑定。

例如:

vue 复制代码
<template>
  <div v-bind:id="id">hello</div>
</template>

<script setup>
const id = 'my-id'
</script>

<style lang="scss" scoped></style>

属性的动态绑定用得非常的多,因此有一种简写形式,直接用一个冒号( : )表示该属性是动态绑定的

vue 复制代码
<template>
  <div :id="id">hello</div>
</template>

<script setup>
const id = 'my-id'
</script>

<style lang="scss" scoped></style>

另外还有一种简写形式,这种形式 Vue3.4 以上版本才能用,如果动态绑定的属性和数据同名,那么可以直接简写:

vue 复制代码
<template>
  <div :id>hello</div>
</template>

<script setup>
const id = 'my-id'
</script>

<style lang="scss" scoped></style>

在 HTML 中,有一类属性是比较特殊的,就是布尔类型属性,例如 disabled,针对这一类布尔属性,绑定的数据不同,会有不同的表现

  • 如果所绑定的数据是真值或者空字符串,该布尔值属性会存在
  • 如果所绑定的数据是假值(null 和 undefined),该布尔值属性会被忽略

有些时候,如果想要绑定多个属性,那么这个时候可以直接绑定成一个对象:

vue 复制代码
<template>
  <div v-bind="attrObj">hello</div>
</template>

<script setup>
const attrObj = {
  id: 'container',
  class: 'wrapper'
}
</script>

<style lang="scss" scoped></style>

使用JS表达式

目前为止,模板可以绑定数据,但是目前数据是什么,模板中就渲染什么。

但是实际上模板中是可以对要渲染的数据进行一定处理的,通过 JavaScript 表达式来进行处理。

vue 复制代码
<template>
  <div>{{ number + 1 }}</div>
  <div>{{ ok ? '晴天' : '雨天' }}</div>
  <div>{{ message.split('').reverse().join('') }}</div>
  <div :id="`list-${id}`">{{ id + 100 }}</div>
</template>

<script setup>
const number = 1
const ok = true
const message = 'hello'
const id = 1
</script>

<style lang="scss" scoped></style>

这里有一个关键点,就是你要区分什么是表达式,什么是语句

vue 复制代码
<!-- 这是一个语句,而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持,请使用三元表达式 -->
{{ if (ok) { return message } }}

有一个简单的判断方法:看是否能够写在 return 后面。如果能够写在 return 后面,那么就是表达式,如果不能那么就是语句。

例如函数调用,其实就是一个表达式

js 复制代码
return test();
vue 复制代码
{{ test() }}

模板沙盒化

模板中可以使用表达式,这些表达式都是沙盒化的,沙盒的意义主要在于安全,这里在模板中能够访问到全局对象,但是由于沙盒的存在,对能够访问到的全局对象进行了限制,只能访问 部分的全局对象

vue 复制代码
<template>
  <div>{{ Math.random() }}</div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

但是如果是不在上述列表中的,则无法访问到:

vue 复制代码
<template>
  <div>{{ Math.random() }}</div>
  <div>{{ Test.a }}</div>
</template>

<script setup>
window.Test = {
  a: 1
}
</script>

<style lang="scss" scoped></style>

在上面的例子中,我们尝试给 window 挂载一个新的全局对象,然后在模板中进行访问,但是会报错:Cannot read properties of undefined (reading 'a')

如果真的有此需求,需要在 window 上挂载一个全局对象供模板访问,可以使用 app.config.globalProperties,例如:

js 复制代码
// main.js
// import './assets/main.css'

import { createApp } from 'vue'
// 引入了根组件
import App from './App.vue'

// 挂载根组件
const app = createApp(App)

// 在这里新增全局对象属性
app.config.globalProperties.Test = {
  a: 'Hello, Global Object!'
}

app.mount('#app')

这是对 Vue 2 中 Vue.prototype 使用方式的一种替代,此写法在 Vue 3 已经不存在了


-EOF-

相关推荐
工业互联网专业19 分钟前
基于springcloud微服务架构的巡游出租管理平台
java·vue.js·spring cloud·微服务·毕业设计·源码·课程设计
╰つ゛木槿30 分钟前
Vue与React区别分析
前端·vue.js·react.js
thinkQuadratic30 分钟前
vue修饰符
前端·javascript·vue.js
不吃香菜的猪30 分钟前
el-dialog实现遮罩层后面的内容也能点击
前端·javascript·vue.js
喜陈42 分钟前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
清风絮柳9 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维9 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
桂月二二12 小时前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
_未知_开摆14 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app