话不多说，参考官网地址Vue官网集成Vue应用。
一、Vue快速入门
（1）新建HTML页面，引入Vue.js
我这里用的是CDN方式
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>（2）在核心区域创建Vue应用，定义数据模型
```
<script>Vue.createApp({data() {return {message:'Hello World'}}}).mount('#app')
</script>
```
（3）编写视图
```
<body><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
```**说明：**
（1）插值表达式：{{表达式}}。 内容可以是变量、函数调用、算数运算等
（2）创建Vue应用申明的'#app'，表明寻找一个作用域为app的块，并只在该块下生效
（3）核心架构采用mvvm，实现数据和视图的双向绑定
二、常见指令
在HTML标签上带有v-的特殊属性，不同指令代表不同的意义。
>1.v-bind 为HTML标签绑定属性值，比如设置 css 、href等
2.v-model 在表单元素上创建双向数据绑定
3.v-on 为HTML标签绑定事件
4.v-if、v-else-if、v-else 条件判定，符合条件时显示
5.v-show 符合条件时显示，区域在于切换的是display属性的值
6.v-for 列表渲染，遍历容器的元素或者对象的属性
（1）v-bind 为HTML标签绑定属性值，比如设置 css 、href等——href绑定
```
<body><div id="app"><a v-bind:href="url">链接</a><input type="text" v-model="message">{{message}}</div>
</body><script>Vue.createApp({data() {return {message:'Hello World',url:'https://www.baidu.com'}}}).mount('#app')
</script>
```——css绑定
```
<body><div id="app"><div :style="{color:textColor}">aaa</div><input type="text" v-model="message">{{message}}</div>
</body><script>Vue.createApp({data() {return {message: 'Hello World',url: 'https://www.baidu.com',textColor: 'red'}}}).mount('#app')
</script>
```
**注意：**
v-bind可以省略，直接写:href（2）v-model 在表单元素上创建双向数据绑定
```
<body><div id="app"><a :href="url">变化链接，跟随text文本框输入内容</a><input type="text" v-model="url">{{url}}</div>
</body><script>Vue.createApp({data() {return {message: 'Hello World',url: 'https://www.baidu.com',textColor: 'red'}}}).mount('#app')
</script>
```（3）v-on 为HTML标签绑定事件
```<body><div id="app"><input type="button" value="按钮点击" v-on:click="handle()"></div>
</body><script>Vue.createApp({data() {return {message: 'Hello World',url: 'https://www.baidu.com',textColor: 'red'}},methods: {handle(){alert('被点击')}}}).mount('#app')
</script>
```
**注意：**
v-on:click可以简写成@click
（4）v-if、v-else-if、v-else 条件判定，符合条件时显示
```
<span v-if="item.score >=85">优秀</span>
<span v-else-if="item.score >=60">及格</span>
<span v-else style="color: red;">不及格</span>
```（5）v-show 符合条件时显示，区域在于切换的是display属性的值
```
<body><div id="app"><span v-show="show">优秀</span></div>
</body><script>Vue.createApp({data() {return {show:true}}}).mount('#app')
</script>
```
（6）v-for 列表渲染，遍历容器的元素或者对象的属性
```
<tr v-for="(item, index) in users" :key="index"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><span v-if="item.gender ==1">男</span><span v-if="item.gender ==2">女</span></td><td>{{item.score}}</td><td><span v-if="item.score >=85">优秀</span><span v-else-if="item.score >=60">及格</span><span v-else style="color: red;">不及格</span></td>
</tr>
```三、常见指令使用案例
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><table border="1px" cellspacing="0px"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr v-for="(item, index,allitem) in users" :key="index"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><span v-if="item.gender ==1">男</span><span v-if="item.gender ==2">女</span></td><td>{{item.score}}</td><td><span v-if="item.score >=85">优秀</span><span v-else-if="item.score >=60">及格</span><span v-else style="color: red;">不及格</span></td></tr></table></div>
</body><script>Vue.createApp({data() {return {users: [{ name: 'Tom', age: 20, gender: 1, score: 78 },{ name: 'Rose', age: 18, gender: 2, score: 86 },{ name: 'Jerry', age: 26, gender: 1, score: 90 },{ name: 'Tony', age: 30, gender: 1, score: 52 }]}}}).mount('#app')
</script></html>四、Vue生命周期
概念：指一个对象从创建到销毁的整个过程。
一共分为八个阶段
>beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成（钩子）
beforeUpdate 更新前
updated 更新后
beforeDestory 销毁前
destoryed 销毁后
晒一张官网生命周期图
<script>Vue.createApp({data() {return {users: [{ name: 'Tom', age: 20, gender: 1, score: 78 },{ name: 'Rose', age: 18, gender: 2, score: 86 },{ name: 'Jerry', age: 26, gender: 1, score: 90 },{ name: 'Tony', age: 30, gender: 1, score: 52 }],}},mounted() {//生命周期挂载 俗称钩子 发送请求到服务端来获取数据alert('view 挂载完成，发送请求到服务端')},}).mount('#app')
</script>**注意：**
Vue的生命周期都有单独的方法，可以直接声明出来。
主要关注mounted挂载完成，因为这里处理发送请求到服务端请求数据。
特别说明beforeUpdate和updateed，当data被修改时，在dom渲染之前调用befroreUpdate，渲染完成之后调用updated
