<!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>Document</title>
</head>
<body>
<!-- 表单类元素:form里面 input(text password radio checkbox button reset submit) select textarea -->
<div id="app" >
<!-- 双向数据绑定 一般情况下只针对表单类元素才使用双向 数据绑定 -->
<!-- MMVVM说的就是双向数据绑定模型 m代表model v代表view vm代表的就是Vue的实例化对象 -->
<!-- 双向数据绑定:数据可以从data流向页面 页面数据被更新 也会从页面流向data 当data数据更改以后 又会重新流回页面 -->
<input type="text" v-model="msg">
<p>我爱你{{msg}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
// data可以是对象,也可以是函数
data(){
return{
msg:'china'
}
}
})
</script>
</body>
</html>