22 lines
539 B
Markdown
22 lines
539 B
Markdown
|
## Vue2 模板语法详解
|
|||
|
|
|
|||
|
|
在 Vue2 中，使用双大括号 `{{}}` 的语法称为插值语法（Mustache 语法），它用于在模板中显示数据。
|
|||
|
|
|
|||
|
|
### 基本用法
|
|||
|
|
```html
|
|||
|
|
<h3>你好：{{name}}</h3>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 实现原理
|
|||
|
|
当 Vue 实例创建时，会将 data 对象中的属性转换为 getter/setter，使其成为响应式数据。当数据变化时，视图会自动更新。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
name: "Bunny", // 响应式数据
|
|||
|
|
url: "https://v2.cn.vuejs.org/"
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
```
|