数据绑定：v-bind，v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据绑定</title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="root">
单向绑定1: <input type="text" v-bind:value="name" >
<br>
双向绑定1: <input type="text" v-model:value='name'>
<br />
<!--简写-->
单向绑定: <input type="text" :value="name" />
<br/>
双向绑定: <input type="text" v-model="name" />
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:'游坦之'
}
})
</script>
</body>
</html>
（效果图）
el和data的两种方式
el的两种方式
<body>
<div id='root'>
<h1>你好,{{name}}</h1>
</div>
<div id='root2'>
<h1>你好,{{name}}</h1>
</div>
<!--第一种，el挂载-->
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data:{
name:'游坦之',
}
})
<!--第二种，利用mount挂载-->
const v = new Vue({
data:{
name:'江湖'
}
})
v.$mount('#root2');
</script>
</body>
data的两种表示方式
<body>
<div id='root'>
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
//第一种
/* data:{
name:"江湖"
} */
/*第二种：利用函数的方式*/
data:function(){
return{
name:"游坦之"
}
},
/* 简写成为 */
/* data(){
return {
name:'江湖'
}
} */
})
</script>
</body>
