模板语法

@Template Syntax

Review

DOM节点/元素组成

标签名：<> 内部的内容

标签属性：值对 name - value pair，值 value 使用单引号或双引号

标签内容：开始标签和结束标签之间的纯文本部分，也可以是其它子元素

<div class="wrap" id="team" style="color: #f40;" data-ind="100" hidden>
    hi,there.
</div>

Overview

基于 HTML 的模板语法 - Template Syntax，使能够声明式地将其组件实例的数据绑定到呈现的 DOM - 数据绑定 data binding

解决数据和元素节点的内容或属性的关联

减少 DOM 操作

根据数据类型，区分：简单数据类型绑定和复杂数据类型绑定

根据数据响应式，区分：静态数据绑定和动态数据/响应式数据绑定

简单逻辑 - 使用 JavaScript 表达式实现数据的2次处理和使用

复杂逻辑 - 使用计算属性完成

Text Interpolation

文本插值表达式

解决数据和元素内容的关联

使用双大括号 {{}}，将数据解释为纯文本

let msg = 'hi,there'
let age = 18
let score = 78
let arr = [1, 2, 3]
let obj = {
    id: 100,
    name: 'gl'
}

<div>msg: {{ msg }} - {{ msg.substring(3) }}</div>
<div>age: {{ age }} - {{ age + 2 }}</div>
<div>score: {{ score >= 60 ? 'pass' : 'fail' }}</div>
<div>arr: {{ arr[0] }} - {{ arr[1] }}</div>
<div>id: {{ obj.id }} - name: {{ obj.name.toUpperCase() }}</div>

Attribute Bindings

解决数据和元素属性的关联

使用 v-bind 指令将数据和 HTML 属性 Attribute 绑定

可以简写为冒号 :

不能使用 {{}}

拼接时，可以使用两个波浪线定义的模板字符串 ``，便于直接使用变量 - 建议

v-bind:attribute = value

:attribute = value

General

常见有：id、href、src、class、style、title

let uid = '20250109'
let url = 'https://glpla.github.io'
// 在线链接 - OK
let src = 'https://glpla.github.io/utils/coffee/coffee0.jpg'
let imgId = 0
// src 无法使用本地链接 - Fail
let img = './assets/logo.svg'

<div :id='uid'>my id</div>
<a :href="url" target="_blank">大树小站</a>
<img :src="src" alt="img" title="bg">
// 使用模板字符串 - 推荐
<img :src="`https://glpla.github.io/utils/coffee/coffee${imgId}.jpg`" alt="img" title="bg">
// 使用嵌套引号 - 不建议
<img :src="'https://glpla.github.io/utils/coffee/coffee' + imgId + '.jpg'" alt="img" title="bg">
// 无效；请检查元素；正确使用，请访问后续内容
<img :src="img" alt="">

Boolean

常见有：hidden、checked、selected、disabled、autoplay、loop、controls

1. 静态数据使用

指定的任何数据包括空串，都会渲染为真

通常仅仅指定属性，表示功能启用；不指定该属性，则不启用

按钮 button - 以下几种写法均表示被禁止

<button disabled="true">submit</button>
<button disabled="false">submit</button>
<button disabled="">submit</button>
<button disabled="123">submit</button>
<button disabled>submit</button>

借助伪类选择器查看效果

button:disabled {
  background-color: red;
}

单选按钮 radio - male 被选中；应该显式指定 value

<input type="radio" name="gender" value="male" checked>male
<input type="radio" name="gender" value="female">female

多选按钮 checkbox - 根据需要指定 value；其它使用同 radio

2. 绑定数据使用

可使用常量关键字 true 或 false、布尔变量或表达式

<button :disabled="true">submit</button>
<button :disabled="false">submit</button>
<button :disabled="isEnable">submit</button>
<button :disabled="age > 20">submit</button>

单选按钮的绑定

let gender = "male"

<input type="radio" name="gender" value="male" :checked="gender=='male'">male
<input type="radio" name="gender" value="female" :checked="gender=='female'">female

src

图片的地址绑定

class

类的绑定

style

内联样式的绑定

Other

v-text：渲染普通文本

v-html：渲染 HTML 元素；但是不建议：在网站上动态渲染任意 HTML 非常危险

let txt = 'hi, there.'
let html = '<p>warning</p>'

<div v-text='txt'></div>
<div v-html='html'></div>

Extension

v-bind 在样式中的应用

静态数据

const color = 'red'

推荐使用响应式数据 - 换肤

const color = ref('red')

在样式中绑定数据

.title{
  color: v-bind(color);
}