Don't talk nonsense and go directly to the code, the comments are clearly written in the code:
1. Vue basic instructions and two-way data binding:
1. If you want to change the value in the label and the value in the setup at the same time, you must bind a responsive object.
2. Convert basic data types into responsive objects with ref()
3. Convert the object into a responsive object with reactive()
4. Whether it is a function or a variable, if you want it to act on the label, you must register it in the setup function.
<!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>
2. Event monitoring functions watch and computed:
The event listener function is similar to the observer pattern in the design pattern, and some logic will be executed when the value of the listener changes.
1、watch：
1. There are two methods when we listen to an object. The first is to monitor the entire object, and the second is to monitor a certain property of the object.
2. When monitoring the entire object, no matter which property under the object is modified, the watch will be triggered
3. When monitoring a certain value under the object, the watch function will be triggered only when the value of the object's monitoring property changes.
<!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 function:
Similar to watch, they are all listening for changes in values or objects, and when they change, execute some logic. But computed focuses more on results, and complex business logic cannot be written inside computed functions.
<!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. The difference between computed and watch:
1. The purpose of watch is to execute business logic, because {} cannot be written inside computed. Pay more attention to changes in variables
2. The purpose of computed is to get an attribute value. Focus on the end result.
3. Components in Vue:
Everything in Vue is a component, so component programming is very important in Vue. Let's introduce the components of Vue.
1. Component template:
<template>
书写写组件内容
</template>
<script>
export default {
name: "组件名称",
props: {}, //父组件传来的值
setup(props, context) {
//1、props用于读取props(父组件传来的值)内部的属性值
//2、context用于为父组件传递值
return {
};
},
};
</script>
<style>
</style>2. Component writing case:
The parent component will pass an image to the child component, and then the child component will receive the image and display it.
Subassembly:
1. If you want to receive parameters, uninstall props inside
2. The name attribute indicates the name of the component when it is exported
3. The value received in props is only type, similar to the reference type in the backend, which can only be read and cannot be changed
<!-书写组件的逻辑-->
<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>
Refer to the parent component of the child component:
1. Pay attention to the problem of parameter passing. The parameters passed are all strings by default. Modify this rule to bind with v-bind.
Steps for usage:
1. import import components.
2. components register components.
3. Use components.
<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>
4. Dynamic components:
For the picture below, when we click on the order list and C-end user list, we want to keep the url unchanged, and only change the components that display the data. That is, the following two functions are only switching components, not url changes.
<component is=' '/> is used to switch components and specify which component to display .
1. is is the currently displayed component.
2. If you want to use dynamic binding, you must use: is=" "to bind.
Keep-alive attribute explanation:
1. The existence of keep-alive is to ensure that the data is not lost. In the case just now, the content of the input box will disappear after we switch from keepAc to keep. When we don’t want the content inside the data box to disappear, we can use this component Wrap it up.
2. When we want individual components to have or such effects, we can use include and exclude to indicate which components are used and which components are not used.
The effect shows:
Full code:
<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>