vue-0_,v +0#80～0-CSDN博客

本文链接：https://blog.csdn.net/groundhappy/article/details/89106593

参看微信公众号 web前端教程

双大括号是模板语法

{{number}} 表示有一个别的地方定义了number变量

vue就是view viewmodel model模型

可以双向绑定。 model数据改变 view 跟着改变 viewmodel是用来监控的。

同时可以用v-model监听用户输入

<head>
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
<body>
<div id="app">

<input v-model="name">

<p>公众号: {{name}}</p>
</div>
<script>
let vm=new Vue(
{
el:"#app",
data:{name:"webxxxxxx"},
}
);
</script>
</body>
</head>

如上双向绑定这是核心1

view上的数据和model的数据一模一样相互变化。

第二个核心是组件化

<head>
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
<body>
<div id="app">

<input v-model="name">

<p>公众号: {{name}}</p>

<card></card>
<card></card>
<card></card>

</div>

<script>

Vue.component('card',{
template:`
<div>
<h1>test</h1>
<button>button</button>
</div>
`

});


let vm=new Vue(
{
el:"#app",
data:{name:"webxxxxxx"},
}
);


</script>
</body>
</head>

这里用vue 创建了一个组件。

直接创建了3个。

这个就是核心2 组件化。

组件看如何组织。

------今天到此啊

打开一个页面以后body只有

<div id="app"></div> （div是一个块级元素。就是对于文档的分块）

id是唯一标记这个div。同一个网页内只能出现一次。也就是说这个div块的名字叫做 app