tips:
摸板指令后面的字符串是,vue的属性,不是真正的字符串
2,简写:
v-on–>@
v-bind–>:
一、属性绑定
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>属性绑定和双向数据绑定</title>
<script src = "vue.min.js"></script>
</head>
<body>
<div id ="text">
<div v-bind:title="'nihao ' +title">你好呀</div><!--摸板指令后面的字符串不是真的字符串是vue对象中定义的
属性,如果要拼接字符串的话就如同此行-->
<div :title=title>你好呀</div> <!--摸板指令v-bind 可缩写为 : 英文的冒号 v-on: 可缩写为 @ -->
</div>
<script>
new Vue({
el: "#text",
data: {
title: "this is hello world"
}
})
</script>
</body>
</html>
二、双向数据绑定
单项绑定的意思是,数据决定页面,也就是说,后台给什么数据页面就显示什么内容,双向绑定的意思是,页面的显示不止有后台数据决定,也可以通过前台页面决定
代码如下:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>属性绑定和双向数据绑定</title>
<script src = "vue.min.js"></script>
</head>
<body>
<div id ="text">
<input v-model = "content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#text",
data: {
title: "this is hello world",
content: "双向绑定"
}
})
</script>
</body>
</html>