1、定义

1.1 官网地址：https://cn.vuejs.org/

                  官网解释为：渐进式JavaScript框架（对原始JS的封装）

1.2 渐进式：
在这里插入图片描述
1.3 具体来说：html中JavaScript常用语句——document.getElementByid("")，为了简化这些语句，建议使用Vue，是前后端分离的架构核心

1.4 前后端分离的交互：Vue(前)———JSON————>Springboot（后）

2、下载VUE.JS

2.1 需要联网的两种方式：

直接向html中导入两种之一（版本对应要一致）
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 无需联网的方式：

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

https://cdn.jsdelivr.net/npm/vue@2

以上两个网址分别对应不同版本，网页搜索下载后导入项目即可、

3、进入实战

Ⅰ、三种输出方式：

3.1.1 代码01：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE01</title>
</head>
<body>
<div id="apa">
{{ ml }}<br/>
<h2>{{bl}}</h2>
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="js/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
	el:"#apa" ,//元素作用：用来指定VUE实例作用范围
	data:{       //数据作用：用来给VUE实例对象绑定一系列数据
		ml:"CSDN欢迎您！",
		bl:"你爱我我爱你 mxbc甜蜜蜜"
	}
});
</script>

运行界面：
在这里插入图片描述

3.1.2 代码02：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE02</title>
</head>
<body>
<div id="app">
{{ml}}<br/>
{{user.name}}<br/>
{{girls[0]}}<br/>
{{users[0].name}}<br/>
{{users[2].age}}<br/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
 var app=new Vue({
	el:"#app",//作用范围
	data:{
		ml:"小李",
		user:{name:"小米",age:33,sex:"男"},//对象属性
		girls:["lia","lee","lisa"],//数组
		users:[
			{name:"张三",age:09,sex:"男"},
			{name:"王五",age:88,sex:"男"},
			{name:"李四",age:02,sex:"女"},
		]//数组对象属性结合
	}
	
})
</script>

运行界面：
在这里插入图片描述
3.1.3 代码03：

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2  v-text="ml">您好</h2><!-- 覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span  v-text="ml"></span>您好</h2><!-- 不会覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述
注意：在网络不好的情况下，{{}}取值会出现插值闪烁，即加载时会出现原始代码，而后者可避免这种情况

3.1.4 代码04：

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span  v-text="ml"></span>您好</h2><!-- 这样就不会覆盖标签内数值 -->
<h2 v-html="ml"></h2>
</div>

运行界面：在这里插入图片描述

<div id="app">
<h2>{{content}}</h2>
<h2 v-text="content"></h2><!--以文本形式输出数值 -->
<h2 v-html="content"></h2><!-- 经过解析超链接后才会输出 -->
</div>
<script src="js/vue.js"></script>
<script>
 var app=new Vue({
	el:"#app",//作用范围
	data:{
		ml:"hello vue",
		age:99,
		content:"欢迎来到<a href='https://www.csdn.net/?spm=1001.2014.3001.5359'>CSDN</a>",
	}
})
</script>