一、Hello World
1-1、示例1
![](https://img-blog.csdnimg.cn/direct/d2f92f2fbed8437bb4152dcf57d156fd.png)
1、现有html容器;
2、再有vue实例。
new Vue({});中的{}是配置对象。配置对象是:key:value的格式。
el:element元素。id对应#,class对应.
把容器中变化的数据,交给Vue实例去保管:
![](https://img-blog.csdnimg.cn/direct/8464cf007c7f4452b688c4d078707554.png)
const x多余,去掉即可。
1-2、示例2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--VUEde 引入 cdn方式-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- view层 模板 视图层 -->
<div class="app">
{{message}}
</div>
<script>
// 创建一个Vue的实例
var vm = new Vue({
el: ".app",
// model层:数据模型
data:{
message: "hello world!"
}
});
</script>
</body>
</html>
浏览器展示:
![](https://img-blog.csdnimg.cn/direct/d4e6b4ef7cdb4f44a1bc1b7f6391476b.png)
双向绑定:ViewModel层
![](https://img-blog.csdnimg.cn/direct/a647efdf2efc4c01b59ffbdb43b33dcd.png)
不用刷新页面,就能展示页面信息的变化。vue不改变DOM对象,是虚拟DOM。
1-3、小结
![](https://img-blog.csdnimg.cn/direct/4e5c763e09dd4f4d80a60faf0860f98c.png)
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
二、Hello 案例分析
2-1、一个Vue实例,不能同时接管两个实例
![](https://img-blog.csdnimg.cn/direct/73a6535167ef4ddcaf8a5e36424c03bd.png)
页面展示:
![](https://img-blog.csdnimg.cn/direct/7cea92c210f3423fbc7204cdd2bf5094.png)
只接管第一个实例。
2-2、多个实例不能对应一个容器
![](https://img-blog.csdnimg.cn/direct/4bae16fa34634b02be3d9a0f17d8636e.png)
![](https://img-blog.csdnimg.cn/direct/ecc9d7c066f7403b86ea78f8a2035358.png)
2-3、一个Vue实例对应一个容器
容器和Vue实例的关系是:一一对应!
![](https://img-blog.csdnimg.cn/direct/816d4ccf7ebc4e3ea9e75ab4b41f9d72.png)
三、注意
3-1、Vue的组件简介
以后开发的时候,一个.Vue文件中,只有一个容器,和一个Vue实例。当容器中需要维护的数据很多时,可以如下分配:
用多个组件管理。
3-2、JS表达式 VS JS代码
HTML容器中,并不是Vue实例有什么,容器才能放什么。
![](https://img-blog.csdnimg.cn/direct/138578dc96c442bd81cac34a791edd0e.png)
页面展示:
![](https://img-blog.csdnimg.cn/direct/e1c6c966fd304f5b855f75a323f0cfdb.png)
页面展示:
![](https://img-blog.csdnimg.cn/direct/1ce1defed7004b5fb99233f3b26b0d8a.png)
3-3、小结
![](https://img-blog.csdnimg.cn/direct/ff189f61d7b6471d8c2c0f4d64d48457.png)