废话不多说直接上代码，注释在代码中写的都很清晰：
一、Vue基本指令与双向数据绑定：
1、要想实现标签中的值和setup中的值同时变化必须绑定的是一个响应式对象。
2、将基本数据类型转化为响应式对象用ref（）
3、将对象转化为响应式对象用reactive（）
4、无论是函数还是变量，想让其作用在标签上就必须在setup函数中注册。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vue3.0.0.17.js"></script>
<!- 切换手机模式时显示可能会比较小，用该配置缓解这个问题 -->
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<div id="app">
<!-- 1、指令一 v-text 用途与{
{}}是一致的-->
<div v-text="message1"></div>
<!-- 2、v-html -->
<div v-html="message2"></div>
<!-- 3、v-bind指令： -->
<a v-bind:href="url">点我跳转</a><br />
<!-- v-bind指令：可以直接简化为： -->
<a :href="url">点我跳转</a><br />
<!-- 4、[]动态替换标签的属性名，替换上面的href -->
<a v-bind:[attr]="url">我是切换的</a>
<!-- 5、标签内部都是可以进行js表达式的替换的 -->
<div v-text="message1==''?'是空':'非空'"></div>
<!-- 6、v-on事件监听： -->
<div v-on:click="tap1">点我弹窗1</div>
<!-- 简写 -->
<div @click="tap1">点我弹窗2</div>
<!-- 7、条件渲染 -->
<div v-if="flag===1">1</div>
<div v-else-if="flag===2">2</div>
<div v-else>3</div>
<!-- 8、遍历：（）内部属性的顺序不能变，例：遍历数组时第一个item就表示元素，第二个就是index -->
<!-- 遍历数组： -->
<ul>
<li v-for="(item,index) of list">{
{index}}--{
{item}}</li>
</ul>
<!-- 遍历对象： -->
<ul>
<li v-for="(value,key,index) of obj">{
{index}}--{
{key}}--{
{value}}</li>
</ul>
<!-- 9、双向数据绑定 -->
<input v-model="inputValue" />{
{inputValue}}
<!-- 基本属性的响应式对象 -->
<input v-model="inputValue" /> <button @click="refFun">提交</button>
<!-- 对象的响应式对象 -->
<input v-model="inputValue1.age" />
<button @click="reactiveFun">提交</button>
</div>
</body>
<script>
// 相当于导包，ES6新特性，表示从Vue中导出createApp
//1、需要挂在Vue对象，所以要先导出这个模块
//2、ref,reactive用于将变量变为响应式对象
const { createApp, ref, reactive } = Vue;
//写好之后一定要在setup中注册才能在标签中使用
const message = "one";
const message1 = "two";
const message2 = "<div style = 'color:red'>three</div>";
const url = "https://www.baidu.com";
const attr = "target";
const flag = 1;
const list = ["one", "two", "three"];
const obj = {
title: "小王子",
des: "超好看",
color: "blue",
};
//双向绑定的响应式对象
const inputValue = ref(10); //ref将基本数据类型转化为响应式对象
const inputValue1 = reactive({
age: 20,
}); //reactive将对象转化为响应式对象
//2、创建vue对象
const app = {
//setup函数是vue的一个入口函数
//1、内部无论是变量还是函数都需要return之后才能使用否则无法使用
//2、setup函数内部无法使用 data 和 methods 的变量和方法
//3、setup函数是同步的，不能是异步的
setup() {
//写完函数也要去注册
function tap1(e) {
console.log(e);
alert("您已点击！");
}
function refFun() {
alert(inputValue.value);
}
function reactiveFun() {
alert(inputValue1.age);
}
return {
message,
message1,
message2,
url,
attr,
tap1,
flag,
obj,
list,
inputValue,
inputValue1,
refFun,
reactiveFun,
};
},
};
//3、将Vue对象与标签对应挂载
// 采用#是因为CSS的id选择器要用#,采用class可以使用 ”.名称“
createApp(app).mount("#app");
</script>
<style></style>
</html>
二、事件监听函数watch与computed：
事件监听函数类似于设计模式中的观察者模式，当监听的值发生变化时就会执行一些逻辑。
1、watch：
1、当我们监听一个对象时有两种方法。第一种时监听整个对象，第二种是监听对象的某一个属性。
2、当监听整个对象时，不管修改了对象下的哪一个属性都会触发watch
3、当监听对象下的某一个值时，只有当该对象的监听属性值发生了变化才会触发watch函数。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vue3.0.0.17.js"></script>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
</head>
<body>
<div id="app">
<!-- 1、watch事件监听：监听单个基本数据类型 -->
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" /><br />
{
{firstName}}--{
{lastName}} <br />
<!-- 1、watch事件监听：监听一个对象 -->
<input type="text" v-model="name.firstName" />
<input type="text" v-model="name.lastName" /><br />
{
{firstName}}--{
{lastName}}
</div>
</body>
<script>
//导入对应的函数
const { createApp, ref, reactive, watch, computed } = Vue;
//1、基本数据类型案例：
const firstName = ref("");
const lastName = ref("");
//2、监听对象案例：
const name = reactive({
firstName: "",
lastName: "",
});
//创建vue对象
const app = {
setup() {
//watch参数：第一个参数是监听的对象或一个函数，第二个是执行的逻辑。
//1、监听响应式对象(基本数据类型，单一属性)
watch(firstName, (newVal, oldVal) => {
console.log("现在的值" + newVal);
console.log("变化之前的值" + oldVal);
});
//2.1、监听某一个对象：
watch(name, (newVal, oldVal) => {
console.log("现在的值" + newVal);
console.log("变化之前的值" + oldVal);
});
//2.2、监听一个对象下的某一个值：（对象，里有很多属性）
watch(
() => name.firstName,
() => {
console.log("我变了");
}
);
return {
firstName,
lastName,
name,
};
},
};
//3、将Vue对象与标签对应挂载
createApp(app).mount("#app");
</script>
</html>
2、computed函数：
与watch相似，都是在监听值或对象的变化，当其变化后，执行一些逻辑。但computed更侧重于结果，computed函数内部不能写复杂的业务逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vue3.0.0.17.js"></script>
<meta
charset="utf-8"
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
</head>
<body>
<div id="app">
<!-- computed -->
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" /><br />
<div>{
{fullName}}</div>
</div>
</body>
<script>
//导入对应的函数
const { createApp, ref, reactive, watch, computed } = Vue;
//基本数据类型
const firstName = ref("");
const lastName = ref("");
//创建vue对象
const app = {
setup() {
//计算函数，()=>不写{}
//返回结果是只读，不能进行修改
//computed函数与watch相似，都是监听函数，会对内部的所有变量进行事件监听
//不管firstName.value还是lastName.value值发生变化都会触发，相当于之前对name的监听
const fullName = computed(() => firstName.value + lastName.value);
return {
firstName,
lastName,
fullName,
};
},
};
//3、将Vue对象与标签对应挂载
createApp(app).mount("#app");
</script>
</html>
3、computed与watch的区别：
1、watch的目的是执行业务逻辑，因为computed内部不能写{}。更关注变量的变化
2、computed的目的是得到一个属性值。关注最终得到的结果。
三、Vue中的组件：
Vue中一切皆组件，所以组件化编程在Vue中用途十分重要，下面我们来介绍一下Vue的组件。
1、组件模板：
<template>
书写写组件内容
</template>
<script>
export default {
name: "组件名称",
props: {}, //父组件传来的值
setup(props, context) {
//1、props用于读取props(父组件传来的值)内部的属性值
//2、context用于为父组件传递值
return {
};
},
};
</script>
<style>
</style>2、组件编写案例：
父组件会为子组件传递一个图片，然后子组件要接收这个图片并且显示出来。
子组件：
1、如果要接收参数，则卸载props内部
2、name属性表示组件导出时的名称
3、props内接收的值是only类型，类似与后端中的引用类型，只能读不能改
<!-书写组件的逻辑-->
<template>
<div v-text = "name"></div>
</template>
<script>
export default {
//组件导出的名字
name: "swiper",
// props: ["text"], //只有一个值,并且无约束
//也可以接收一个对象,并且对其进行约束
props: {
name: {
//只能是String类型,并且默认值是''
type: String,
default: "",
},
obj: {
type: Object,
},
},
setup(props, context) {
//获取name的值
console.log(props.name);
//获取对象中的值：
console.log(props.obj.name);
return {
};
},
};
</script>
<style>
</style>
引用子组件的父组件：
1、注意参数传递问题，传递的参数默认都是字符串，修改这一规则用v-bind绑定。
使用步骤：
1、import导入组件。
2、components注册组件。
3、使用组件。
<template>
<!-- 当我们传值的时候,只要不是字符串,都要用 : 来传值,否则默认都是字符串类型 -->
<!-- 传递的是数字类型的1 -->
<swipers :name="1" />
<!--传递的是字符串 -->
<swipers name="1" />
<!--传递对象 -->
<swipers :obj="{ name: 'aaa' }" />
</template>
<script>
//导入组件
import swiper from "./components/swiper.vue";
export default {
name: "App",
components: {
swipers: swiper, //注册组件,标签叫什么还是从这决定的
},
setup() {
return {
};
},
};
</script>
<style>
</style>
四、动态组件：
对于下图，当我们点击订单列表和 C端用户列表时，我们想让url不变，改变的只是显示数据的组件。即下面两个功能只是在进行组件的切换，而非url的改变。
<component is=' '/>用于对组件的切换，指定要显示哪一个组件。
1、is是当前显示的组件。
2、想用动态绑定就要使用 :is=" "来绑定。
keep-alive属性讲解：
1、keep-alive的存在是为了保证数据的不丢失，刚刚的案例中我们从keepAc切换到keep之后之前输入框的内容就会消失，当我们不想让数据框内部的内容消失就可以使用该组件将其包裹起来。
2、当我们直想让个别组件有或这样的效果可以使用 include 和 exclude 来指明哪些组件使用，哪些组件不使用。
效果显示：
完整代码：
<template>
<div id="App">
<button @click="onChange('keep')">点我切换到keep</button> <br />
<button @click="onChange('keepAc')">点我切换到keepAc</button><br />
<keep-alive>
<component :is="currentCom" />
</keep-alive>
</div>
</template>
<script>
import { ref } from "vue";
import keep from "./components/keep.vue";
import keepAc from "./components/keepAc.vue";
export default {
name: "App",
components: {
keep,
keepAc,
},
setup() {
//只有响应式兑现才能实现双向数据绑定：
const currentCom = ref("keep");
//更改组件函数
function onChange(event) {
currentCom.value = event;
}
//将函数和对象注册
return {
currentCom,
onChange,
};
},
};
</script>
<style>
</style>