Vue模板语法

插值语法

在前面用到过这个，也介绍了内能放一些什么东西。

用法

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>Hello，{{ name }}</h3>
        <hr/>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            }
        })
    </script>
</body>
</html>

指令语法

插值语法有一定的局限性，例如我要动态修改 a 标签的 href 属性，如果使用插值语法，会报错。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <a href="{{ url }}">我要博客</a>
        <hr/>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                url: 'https://blog.igma.ink'
            }
        })
    </script>
</body>
</html>

注意看控制台的 DOM 结构，a 标签的 href 属性并不是我设置的变量，这时我们要用指令语法设置 href。

指令语法：v-bind，也可以直接使用 :

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>指令语法</h1>
        <a v-bind:href="url">我要博客</a>
        <a :href="url">我要博客</a>
        <hr/>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                url: 'https://blog.igma.ink'
            }
        })
    </script>
</body>
</html>

总结

插值语法

功能：用于解析标签体内容
写法：，xxx 是 JavaScript 表达式，且可以直接读取 Vue 实例中 data 内的所有数据。

指令语法

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等……）
写法：v-bind:href="xxx"，xxx 是 JavaScript 表达式。

插值语法 ​

指令语法 ​

总结 ​

插值语法 ​

指令语法 ​

插值语法

指令语法

总结

插值语法

指令语法