模板语法

# 模板语法

最先接触的模板

<div id="demo">
    <h1>Hello {{name.toUpperCase()}}  {{address}}</h1>
</div>

1
2
3

# 插值语法

功能单一，将指定的值，放在指定的位置

插值语法

{{表达式}}

使用位置

在标签体内部，也就是：<> 在这里写 </>

例子

<div id="app">
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
})
</script>

1
2
3
4
5
6
7
8
9
10
11

# 指令语法

v-指令:html标签属性="表达式"

最先接触的指令语法

v-bind:html标签属性="表达式"

简写-> :html标签属性="表达式"

使用位置

在标签属性内部，也就是：< 在这里写></>

例子

<div id="app">
    <h1 v-bind:herf="url">这是一个链接</h1>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12

这里的表达式就是读取Vue实例data中具体的属性。比如表达式为message，读取Vue实例data中的message属性

可以用层级去对应表达式里面的值

<div id="app">
    <h1 v-bind:herf="website.url">这是一个链接</h1>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    website: {
        url: 'www.hincky.com',
    },
  }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

编辑

#Vue #Vue核心