vue中的模板语法主要分为差值语法和指令语法

1. 差值语法

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

3. 指令语法

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

 <div id="root">
        <h1>差值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="inter.url">跳转到{{inter.name}}</a>
//在地址前加入v-bind后，引号中的url被视作为js表达式，如果不加v-bind，引号中的url会被视作为字符串； v-bind可以简写为: 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data:{
                name:'jack',
                inter:{
                    name:'百度',
                    url:'http://www.baidu.com'
                }
               
            }
        })
    </script>

数据绑定

1. 单向数据绑定（v-bind）： 数据只能从data流向页面
2. 双向数据绑定（v-model）： 数据不只能从data流向页面，还能从页面流向data

备注

1. 双向数据绑定一般应用在表单类元素上
2. v-model：value可以简写为v-model因为v-model默认收集的就是value值

<div id="root">
        单向数据绑定: <input type="text" name="" id="" :value="name"><br>
        双向数据绑定: <input type="text" name="" id="" v-model="name">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false//阻止vue在启动时生成生产提示
        new Vue({
            el:'#root',//找到对应实例（挂载）
            data:{//用于储存数据，数据供el实例使用
                name:'word',
                address:'北京'
            }
        })
    </script>