vue 2.0 模板语法

<a href="http://www.bilibili.com">你好，这是bilibili</a>

这样子就把地址写死了。想要地址是动态的,把地址存在vue实例当中

<div id="app">
    <a v-bind:href="url">你好，这是{{name}}</a>
</div>

new Vue({
    el: '#app',
    data:{
        name: 'bilibili',
        url: 'http://www.bilibili.com'
    }
})

v-bind:绑定

这么写v-bind:href="url"引号里的url就当成js表达式去执行了

v-bind把url执行的结果绑定给href

v-bind可以指定任意属性
v-bind简写::

模板语法俩大类插值语法和指令语法
什么时候用插值语法，什么时候用指令语法

• 插值语法往往指定标签体内容
• • 起始标签和结束标签中间所夹着的内容就是标签体
• • 如果你想要放值的地方处于标签体当中你可以用插值语法
• • 功能: 用于解析标签体内容。
• • 写法: {{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
• 指令语法它管理标签属性
• • 功能: 用于解析标签(包括:标签属性、标签体内容、绑定事件…)
• • 举例: v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
• • 备注: vue中有很多的指令,且形式都是: v-???,此处我们只是拿v-bind举个例子。

---

如果

new Vue({
    el:'#root',
    data:{
        name:'hu',
        name: 'chen',
        url: 'http://www.bilibili.com'
    }
})

如果属性重名，它会根据最后写的属性来，浏览器不会报错

可以把数据的结构分为多个层级

new Vue({
    el:'#root',
    data:{
        name:'hu',
        school:{
            name: 'bilibili',
            url: 'http://www.bilibili.com'
        }
    }
})

这样就要修改html中的属性

<a :href="school.url">你好，这是{{school.name}}</a>