Vue（二）：指令语法之v-bind

一、什么是指令语法

vue中模板语法有两大类，第一类是插值语法，第二类就是指令语法。

1.插值语法

插值语法在上一篇“vue的简单使用”中已经提到了。

功能：用于解析标签体的内容

写法：{{XXX}}，XXX为js表达式

2.指令语法

功能：用于解析标签（包括标签属性、标签事件、标签体内容等）

本文来学习指令语法中的v-bind指令，v-bind指令用于绑定标签的属性。

二、v-bind的用法

下面是v-bind的使用示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的模板语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>学生姓名</h1>
            <h3>我的名字是：{{name}}</h3>
            <hr/>
            <h1>课程成绩</h1>
            <h3>{{lesson.name}},{{lesson.score}}</h3>
            <hr/>
            <h1>个人主页</h1>
            <a v-bind:href="url">{{name}}的个人主页1</a>
            <a :href="url">{{name}}的个人主页1</a>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                name: "张三",
                age: 15,
                lesson: {
                    name: "数学",
                    score: 95
                },
                url: "https://www.baidu.com"
            }  
        }) 
    </script>
</html>