Vue数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- Vue中有两种数据绑定方式
1、单向绑定(v-bind):数据只能从data流向页面
2、双向绑定(v-model):数据可以从data流向页面也可以从页面流向data
备注:双向绑定一般都应用再表单元素上,因为只有表单元素具有数据属性。
-->
<!-- 完成数据绑定 -->
<div id="nav">
<!-- 单项数据绑定仅仅为vue实例 -->
单向数据绑定:<input type="text" v-bind:value="name" /><br />
双向数据绑定:<input type="text" v-model:value="name" /><br />
<!-- 简写 -->
单向数据绑定:<input type="text" :value="name" /><br />
双向数据绑定:<input type="text" v-model="name" />
</div>
<div id="root">
<hr/>
<h1>第二指定容器写法:{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#nav',
data: {
name: '张三',
}
})
const v = new Vue({
data:function(){
return {
name:"李斯何许人也"
}
}
})
console.log(v);
setTimeout(()=>{
v.$mount("#root")
},1000)
</script>
</body>
</html>