1.Vue.js最核心的功能——数据的双向绑定
<html>
<head>
<meta charset="utf-8" />
<title>V-model数据双向绑定练习</title>
<!--通过CDN引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app的根容器-->
<div id="app">
<input type="text" v-model="name" placeholder="請輸入:"/>
<h2>你好，{{name}}</h2>
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
name:'hjgh'
}
})
</script>
</body>
</html>
运行结果如图：
image
2.2 使用v-bind绑定data中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>V-bind练习</title>
<!--通过CDN引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app的根容器-->
<div id="app">
<h2>{{name}}<h2>
<img v-bind:src="cover" />
</div>
<script type="text/javascript">
//实例化一个Vue对象
var app = new Vue({
el:'#app',
data:{
name:'海边理发店',
cover:'img/book1.jpg'
}
})
</script>
</body>
</html>
image
语法糖：v-bind可以写成 ：，
<img :src="cover" /><img v-bind:src="cover" />
