Vue模板语法

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。
写法：{{xxx}} ,xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。)
举例：v-bind:href ="xxx" 或简写 :href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <div id="root">
            <h1 >差值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr />
            <h1>指令语法</h1>
            <a v-bind:href="url">百度{{name2}}</a>
            <a :href="url">百度{{name2}}</a>
        </div>
        
    </body>
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            name2:'jack2',
            url:'http://www.baidu.com',
        }
    })
    </script>
</html>

Vue模板语法

Vue模板语法有2大类：

1.插值语法：

2.指令语法：

推荐阅读更多精彩内容