【Vue2.0學習】—資料綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初識Vue</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中有兩種資料綁定的方式
1、單向綁定 v-bind:資料隻能從data流向頁面
2、雙向綁定 v-model：資料不僅能從data流向頁面，還能從頁面流向data
備注：雙向綁定一般應用在表單類元素上
v-model:value可以簡寫為v-model,因為v-model預設收集的就是value的值
-->
<div id="root">
<!-- 單向資料綁定：<input type="text" v-bind:value="name"><br> 雙向資料綁定： <input type="text" v-model:value="name"> -->
<!-- 簡寫方式 -->
單向資料綁定：<input type="text" :value="name"><br> 雙向資料綁定： <input type="text" v-model="name">
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'Cain'
}
})
</script>
</body>
</html>
【Vue2.0學習】—資料綁定 
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)