模板语法

@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>