模板语法

@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 的模板语法，使能够声明式地将其组件实例的数据绑定到呈现的 DOM 上，也称数据绑定 data binding

减少 DOM 操作

可以使用简单的 JavaScript 表达式实现数据的2次处理和使用

复杂的逻辑请使用计算属性或方法获取

根据数据是否是响应式，数据绑定分：静态数据绑定和响应式数据绑定

更多信息，请访问模板语法 - Template Syntax

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

可以使用模板字符串 ``，便于直接使用变量

Text Interpolation

文本插值表达式

使用双大括号 {{}}，会将数据解释为纯文本，解决数据和元素内容的关联

支持简单的数据处理；建议使用计算属性完成

简单数据类型绑定和复杂数据类型绑定

let msg = 'hi,there'
let age = 18
let score = 78
let obj = {
    id: 100,
    name: 'gl'
}

<div>msg: {{ msg }}</div>
<div>handle with msg: {{ msg.substring(3) }}</div>
<div>age: {{ age }}</div>
<div>handle with age: {{ age + 2 }}</div>
<div>score: {{ score >= 60 ? 'pass' : 'fail' }}</div>
<div>id: {{ obj.id }} - name: {{ obj.name }}</div>

Attribute Bindings

使用 v-bind 指令将数据和 HTML的属性 Attribute 绑定，解决数据和元素属性的关联；可以简写为冒号 :

不需要使用 {{}}

v-bind:attribute = value

:attribute = value

Normal

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

let uid = '20250109'
let url = 'https://glpla.github.io'

<div :id='uid'>my id</div>
<a :href="url" target="_blank">大树小站</a>

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>

单选按钮，male被选中

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

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

内联样式的绑定

CSS函数属性绑定

background-image 等使用了 url()、linear-gradient() 等等 CSS 函数的属性

静态使用 - 仅可以引用 public 中的资源

<div style="background-image: url('/imgs/lg.jpg');">hi,there</div>

动态绑定使用 - 同图片的使用

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>