<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue学习</title>
<script src="../lib/vue2/vue.js"></script>
</head>
<body>
<div id="app">
<a :href="url">{{msg}}</a><br/>
<a v-bind:href="url">{{msg}}</a>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
data: {
msg:'去百度',
url:'https://www.baidu.com'
}
})
</script>
</body>
</html>
模板语法分为两部分,一种是写在标签内部的,叫做插值语法,用 {{}} 包裹。可以写任何合法的js表达式。
一种是写在标签属性的,叫做vue指令,以 v- 开头。这里演示了一个v-bind,简写为 : ,用于绑定vue实例中的数据到html标签中的属性值。其值也可以是任何合法的js表达式。
vue提供了一批实用的指令