其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
https://cn.vuejs.org/
说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API，而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue，而是使用全局构建版的 Vue
<script src="https://unpkg.com/vue@3"></script>目录
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
1、基本用法
2、内容渲染
2.1 组合式
2.2 选项式
3、响应式
3.1 组合式
3.2 选项式
4、计算属性
5、属性绑定
6、JS表达式
7、条件渲染
8、事件绑定
9、列表渲染
10、双向绑定
11、双向绑定案例
1、基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<h1>{{web.title}}</h1>
<h1>{{web.url}}</h1>
</div>
</body>
<script>
//将Vue 对象中的createAPP reactive 属性赋值给createApp reactive
const {createApp,reactive}=Vue //解构语法
//创建一个Vue应用程序
createApp({
// 组合式API的setup 用于设置响应式数据和方法
setup() {
const web=Vue.reactive({ //创建一个响应式的数据对象web，里面包含title和url两个属性
title:"HNUCM",
url:"www.hnucm.edu.cn"
})
//返回数据
return{
msg:"success",
web
}
}
}).mount('#app')//将Vue 应用程序挂载到app元素上
</script>
<script>
//什么是解构：从一个数组或者对戏那个中把值提取出来赋给新的变量
//数组解构
const number=[1,2,3]
const [one,two,three]=number
console.log(one,two,three)
//对象解构
const person={
name:"fanhuling",
age:20
}
const {name,age}=person
console.log(name,age)
//函数参数解构
function introduce({name,age}){
console.log(`My name is ${name},I am ${age} years old`)
}
introduce(person)
</script>
</html>
2、内容渲染
2.1 组合式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 文本插值表达式 -->
<p>{{username}}</p>
<p>{{age}}</p>
<p>{{desc}}</p>
<!-- v-html指令 ：显示HTML内容 -->
<p v-html="desc"></p>
</div>
</body>
<script>
//将Vue 对象中的createAPP reactive 属性赋值给createApp reactive
const {createApp,reactive}=Vue //解构语法
//创建一个Vue应用程序
createApp({
// 组合式API的setup 用于设置响应式数据和方法
setup() {
const username="fanhuiling"
const age=20
const desc='<a href ="www.baidu.com">百度一下</a>'
//返回数据
return{
username,age,desc
}
}
}).mount('#app')//将Vue 应用程序挂载到app元素上
</script>
</html>2.2 选项式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 文本插值表达式 -->
<p>{{username}}</p>
<p>{{age}}</p>
<p>{{desc}}</p>
<!-- v-html指令 ：显示HTML内容 -->
<p v-html="desc"></p>
</div>
</body>
<script>
const vm={
data:function(){
return{
username:"fanhuiling",
age:20,
desc:'<a href="www.baidu.com">百度一下</a>'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</html>
3、响应式
3.1 组合式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="incretement">增加</button>
<p>{{count}}</p>
<p>{{state.counter}}</p>
</div>
</body>
<script>
const {createApp,reactive,ref}=Vue
//ref 适用于基本类型（字符串、数字、布尔值）
//reactive 适用于对象、数组等复合类型
createApp({
// 组合式API的setup 用于设置响应式数据和方法
setup() {
const count=ref(0)
const state=ref({counter:0})//将ref 改为reactive后，counter会和count一起增加
//箭头函数
const incretement = ()=>{
count.value++;
state.counter++;
}
return{
count,incretement,state
}
}
}).mount('#app')//将Vue 应用程序挂载到app元素上
</script>
</html>
3.2 选项式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button onclick="incretement">增加</button>
<p>{{count}}</p>
</div>
</body>
<script>
const vm={
data:function(){
//const count=Vue.ref(0)
return{
count:1
}
},
methods: {
incretement(){
this.count++;
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</html>
4、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{add()}}</h1>
<h1>{{add()}}</h1>
<h1>{{sum}}</h1>
<h1>{{sum}}</h1>
</div>
</body>
<script>
const {createApp,reactive,ref,computed}=Vue
//ref 适用于基本类型（字符串、数字、布尔值）
//reactive 适用于对象、数组等复合类型
createApp({
// 组合式API的setup 用于设置响应式数据和方法
setup() {
const data = reactive({
x:10,
y:20
})
//无缓存的方法
const add=()=>{
console.log("add")
return data.x+data.y;
}
//有缓存的方法
//计算属性：根据依赖响应式数据变化来决定是否重新计算
const sum=computed(()=>{
console.log("sum")
return data.x+data.y
})
return {
data,add,sum
}
}
}).mount('#app')//将Vue 应用程序挂载到app元素上
</script>
</html>
5、属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div :style="{width:h,height:h,backgroundColor:bgc}"></div>
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const w=ref('500px');
const h=ref('500px');
const bgc=ref('red');
// 返回数据
return {
w,h,bgc
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html> 
6、JS表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{number+1}}</p>
<p>{{ok ?'True':'False'}}</p>
<!-- 翻转字符串：先以，分割为数组，数组翻转，然后在结合 -->
<p>{{msg.split('').reverse().join('')}}</p>
<p :id="'list-'+id"></p>
<p>{{user.name}}</p>
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const number=0;
const ok=ref(true);
const msg="ABC"
const id=3
const user={name:"fanhuiling"}
return {
number,ok,msg,id,user
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html>
7、条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="flag=!flag">开关</button>
<!-- v-if 当为false时，会从真实dom删除 -->
<p v-if="flag">请求成功，被v-if控制</p>
<p v-show="flag">请求成功，被v-show控制</p>
<p v-if= "type === A">类型A</p>
<p v-else-if="type === B">类型B</p>
<p v-else>不是A和B</p>
</div>
</body>
<script>
//将Vue 对象中的createAPP reactive 属性赋值给createApp reactive
const {createApp,reactive,ref}=Vue //解构语法
//创建一个Vue应用程序
createApp({
// 组合式API的setup 用于设置响应式数据和方法
setup() {
const flag=ref(true)
const type=ref("C")
return{
flag,type
}
}
}).mount('#app')//将Vue 应用程序挂载到app元素上
</script>
</html>
8、事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>count的值为：{{count}}</p>
<button v-on:click="addCount">+1</button>
<button @click="addCount">+1</button>
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const count=ref(0)
const addCount=()=>{
count.value++;
}
// 返回数据
return {
count,addCount
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html>
9、列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 添加数据 -->
<input type="text" v-model="name"/>
<button @click="addUser"> 添加</button>
<ul>
<li v-for="user in userlist">
姓名：{{user.name}}
</li>
<li v-for="user,index in userlist" :key="user.id">
<input type="checkbox"/>索引：{{index}}
姓名：{{user.name}}
</li>
</ul>
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const userlist=reactive([
{id:1,name:"Tom"},
{id:2,name:"Jerry"},
{id:3,name:"mary"}
])
const nextId=ref(4)
const name=ref('')
const addUser=()=>{
userlist.unshift({
id:nextId.value,
name:name.value
})
name.value="";
nextId.value++;
}
// 返回数据
return {
userlist,nextId,name,addUser
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html>
10、双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg" placeholder="输入文本"/>
<p>{{msg}}</p>
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const msg=ref(测试)
// 返回数据
return {
msg
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html> 
11、双向绑定案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 导入vue.js的脚本文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>文本框：{{data.text}}</h3>
<h3>单选框：{{data.radio}}</h3>
<h3>复选框：{{data.checkbox}}</h3>
<h3>下拉框：{{data.select}}</h3>
<h3>记住密码：{{data.remember}}</h3>
<!-- 单向数据绑定时，数据发生变化视图会自动更新，
但是手动修改input的值，数据不会自动更新 -->
单向数据绑定：<input type="text" :value="data.text"/><br>
<!-- 双向数据绑定，当数据发生变化时，视图会自动更新，
手动修改input的值，数据也会自更新 -->
双向数据绑定：<input type="text" v-model="data.text"/><br>
<br><br>
<input type="radio" v-model="data.radio" value="1">听音乐
<input type="radio" v-model="data.radio" value="2">写代码
<br><br>
<input type="checkbox" v-model="data.checkbox" value="a">听音乐
<input type="checkbox" v-model="data.checkbox" value="b">写代码
<input type="checkbox" v-model="data.checkbox" value="c">刷B站
<br><br>
<select v-model="select">
<option value="" >请选择</option>
<option value="A" >听音乐</option>
<option value="B" >写代码</option>
<option value="C" >刷B站</option>
</select>
<br><br>
<input type="checkbox" v-model="data.remember">记住密码
</div>
</body>
<script>
// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactive
const { createApp, reactive, ref } = Vue; // 解构赋值语法
// 创建一个 Vue 的应用程序
createApp({
// 组合式API 的 setup 用于设置响应式数据和方法
setup() {
const data=reactive({
text:'fanhuiling' ,//文本框
radio:"",
checkbox:[],
select:"",
remember:false //单个复选框--功能是记住密码
})
// 返回数据
return {
data
}
}
}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script>
</html>
