vue之数据绑定 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数据绑定</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
vue中有2种数据绑定的方式：
1。单向绑定（v-bind）:数据只能从data流向页面
2。双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1。双向绑定一般都应用在表单类元素上（如input、select等）
2。v-model：value可以简写为v-model，因为model默认收集的就是value值。


-->
<div id="root">
<!--  普通写法-->
  单向数据绑定<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"><br/>


  <h1 v-bind:x="name">你好啊</h1>

  <h1 v-model:x="name">你好啊</h1>
</div>
<script type="text/javascript">
  Vue.config.productionTip=false;
  new Vue({
      el:"#root",
      data:{
          name:"青木"
      }
  })
</script>
</body>
</html>
posted @ 2022-05-29 23:35  King-DA  阅读(226)  评论(0)    收藏  举报