一、需求案例

在页面显示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。

五、表达值作用及嘱咐语

表达式	作用
el	el限制了一个Vue实例接管的区域或者说处理的dom的范围
data	定义一些数据

最后希望大家借助这个例子，能够理解vue.js里面el的作用(el限制了一个Vue实例接管的区域或者说处理的dom的范围)、data的作用(定义一些数据)。

下一篇：（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818

（vue基础试炼_01）使用vue.js 快速入门hello world相关推荐

（vue基础试炼_08）Vue模板语法
文章目录一.插值表达式二.v-text 中不是字符串而是js表达式三.v-html 四.js表达式,可以和字符串拼接五.源码链接一.插值表达式 <!DOCTYPE html> & ...
（vue基础试炼_07）Vue实例生命周期函数
文章目录一.生命周期图示二.常见的生命周期函数三.生命周期函数执行场景四.测试代码五.项目开源地址一.生命周期图示二.常见的生命周期函数常见的生命周期函数执行的时间 beforeCr ...
（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
Vue.js快速入门之八：实现登录功能
系统登录是指用户必须提供满足一定条件的信息后,才可以进入系统.最早系统一般是指用户名和密码,如今,登录方式已多元化,系统一般登录方式有:用户名+密码.二维码扫码登录.第三方授权登录.手机号+短信登录等 ...
Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础能够与后端程序员更加紧密的配合 ...

（vue基础试炼_01）使用vue.js 快速入门hello world

文章目录