vue基础-白红宇

<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>