一、需求案例

在页面显示hello world

二、案例实现

2.1. 原始js写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用原始 js 快速入门hello world</title>
</head><body>
<div id="app"></div>
<script>var dom = document.getElementById('app');dom.innerHTML = 'hello world'
</script>
</body>
</html>

效果图

2.2. 怎样使用vue.js ？

序号	说明
①	下载vue.js复制到项目中
②	在页面中引入vue.js 库
③	创建一个Vue实例
④	创建一个受vue管束的div，并在Vue实例的el表达式中，设置受vue.js管束div的id
⑤	在Vue实例的data标签中，设置需要现实的数据
⑥	在div标签中，使用插值表达式将数据渲染出来

在这里插入图片描述

2.3. 使用vue.js 写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用vue.js 快速入门hello world</title><!--引入vue.js库--><script src="vue.js"></script>
</head><body>
<!--vue接管的div-->
<div id="app">{{content}}
</div>
<script>/*创建了一个vue实例*/var app = new Vue({el: '#app',data: {content: 'hello world'}});
</script>
</body>
</html>

在这里插入图片描述

三、案例vue简述？

首先创建一个Vue实例，然后这个是里接收一些配置项，这里el这个配置项指的是Vue实例负责管理的区域，el中的#app指的是id等于app的div标签，所以，当你写 el: '#app’的时候，意思就是说让我的这个Vue实例去接管id等于app的这个dom标签里的所有的内容；在Vue实例中定义的data，相当于定义了一组数据，数据里面有一个content的数据，内容是hello world,而我在我的id等于app的div标签之中，可以通过插值表达式也就是{{}}这种语法，来去调用data里面对应的数据。

四、案例趣味延伸

新增下面这一组div标签和内容，效果又是怎样的呢？
在这里插入图片描述

截图中，新增的div中的数据被原封不动的输出了出来，只有上面的div被替换成了hello world 这是为为什么呢？
原因就在于你的这个Vue实例只接管了app对应的id标签下面所有的内容，而没有接管其他div标签下面的内容，因此，他只能替换id等于app这个dom标签下面的content，而不会替换不受Vue管束的dom标签下面的content。