vue专栏 02.vue基础语法 01.v-常用 01.双括号语法

# 01.双括号语法

[toc]{type: "ol", level: [3,4]}

### js结构
```js
const app = Vue.createApp({
    data() {
        return {
            msg:'Apple',
            my_site:'https://www.baidu.com',
            my_count:2,
        }
    }
}).mount('#app');
```


### 数据调用
> **在id="app"的标签中使用才会生效**{style="color:goldenrod"}
```html
<div id="app"></div>
```

#### 直接引用
```html
<h3>{{ msg }}</h3>
```

#### 字符拼接
```html
<h3>{{ msg + ' ' + my_site }}</h3>
```

#### 数值运算
```html
<h3>{{ my_count * 2 / 10 }}</h3>
```
![双括号语法](imgs/01.双括号语法.png)