Vue学习笔记（四、v-bind指令）
v-bind指令是将Vue对象中data变量的值与元素中内容绑定的指令，当元素前面添加“v-bind:”时，该元素内的文本会被作为表达式看待。
参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueBaseCode</title>
</head>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{msg}}++{{msg}}</p>
<h4 v-text="msg"></h4>
<input type="button" value="按钮01" title="mytitle">
<input type="button" value="按钮02" v-bind:title="mytitle">
<input type="button" value="按钮03" :title="mytitle+'简写'">
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Vue的基础代码学习',
msg2:'<h1>这是一个大标题</h1>',
mytitle:'这是一个自定义的title'
}
});
</script>
</body>
</html>对于
<input type="button" value="按钮01" title="mytitle">这一行，“mytitle”实际上是作为字符串解析的，但是对于
<input type="button" value="按钮02" v-bind:title="mytitle">这一行，在title前面添加了“v-bind:”，此时title的值“mytitle”是作为表达式解析的，mytitle被看作是Vue对象中data的一个变量。既然是一个表达式，当然也可以添加一些别的内容，比如mytitle+'简写'之类的，同时，"v-bind:"也可以简写为“:”，如下：
<input type="button" value="按钮03" :title="mytitle+'简写'">