<body>
<div id="app">
<!-- 在vue组件的模板中，可以使用{{}}为标签绑定内容(不能绑定属性) -->
<!-- 绑定的数据可以是data中的数据 -->
<!-- 组件的数据绑定只能针对组件模板生效，模板之外不生效 -->
<h1>{{txt}}</h1>
<p>{{welcome}}</p>
<hr>
<!-- v-model指令，用于数据双向绑定：从数据到界面，从界面到数据。
当组件数据发生变化时，数据会同步到页面上，当页面上的数据被编辑时，也会同步到组件数据上。 -->
<input type="text" v-model="content">
<p>{{content}}</p>
<hr>
<input type="text" v-model="sum1">+
<input type="text" v-model="sum2">=
<!-- {{}} 还可以绑定表达式-->
<span>{{sum1*1+sum2*1}}</span>
<hr>
<input type="text" v-model.number="sum1">+
<input type="text" v-model.number="sum2">=
<span>{{sum1+sum2}}</span>
<hr>
</div>
</body>
<script src="vue.js"></script>
<script>
// vue框架 将整个页面看做是一个组件(页面的根组件),创建vue页面的第一步就是创建根组件。
// new Vue，用于创建一个组件。
let a=2;
new Vue({
// el，设置根组件的挂载点(挂载元素不能是body)，创建根组件需要设置组件的挂载点，根组件初始化时会自动将挂载点元素设置为本组件的模板。
el:"#app",
// data 表示组件数据，是类型对象，对象中以键值对的形式添加数据。
data:{
txt:"hello word",
welcome:"欢迎使用vue.js",
content:"初始值",
sum1:a,
sum2:"",
}
})
</script>