Vue学习记录

Vue学习记录

1.前提

1. 安装Node.js

2.创建测试项目

1. 在需要创建vue项目的目录下右键打开命令行 输入以下命令

npm create vue@latest

2. 选择命令行中提示的内容 若不需要可以全不选
   

3. VS Code中打开创建的文件夹

4. 打开VS Cosd的终端执行以下两条命令

npm install
npm run dev

5. 运行后打开上图网址会出现下面页面

3.Vue3基础知识（组合式）

1. 模板语法

文本插值，用双大括号

<template><span> {{ msg }}</span>
</template><!-- 语言使用TS -->
<script setup lang="ts">
const msg = "测试"
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped></style>

插入原始HTML，使用v-html指令

<template><!-- 使用v-html需要标签内无内容，若span内有内容则无效 --><span v-html="msg"> </span>
</template><!-- 语言使用TS -->
<script setup lang="ts">
const msg = '<span style="color: red">测试</span>';
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped></style>

Attribute 绑定，绑定属性用v-bind，简写为“：”，如果绑定的为null或undefined，该属性会从渲染的元素上移除。

<template>
<div :id="name1" ></div>
<button :disabled="disabledFlag">测试按钮</button>
<button @click="ChangeDisabledFlag">修改测试按钮属性</button>
<div :="objectOfAttrs"></div>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import{ref} from 'vue'
const name1 = 'div1';//绑定ID属性
const disabledFlag = ref(true);//绑定disabled属性
function ChangeDisabledFlag(){disabledFlag.value = !disabledFlag.value
}
const objectOfAttrs={id:'div2',style: 'width:200px;height:200px;background-color:green',}
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped>
#div1{background-color: brown;width: 200px;height: 200px;
}
</style>

指令Directives 指令是带有v-前缀的特殊attribute，如：v-bind、v-html、v-for、v-on、v-slot、v-if等（v-bind简写":“,v-on简写”@"）。

<template>
<div :id="name1" ></div>
<button :disabled="disabledFlag">测试按钮</button>
<button @click="ChangeDisabledFlag">修改测试按钮属性</button>
<div :="objectOfAttrs"></div>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import{ref} from 'vue'
const name1 = 'div1';//绑定ID属性
const disabledFlag = ref(true);//绑定disabled属性
function ChangeDisabledFlag(){disabledFlag.value = !disabledFlag.value
}
const objectOfAttrs={id:'div2',style: 'width:200px;height:200px;background-color:green',}
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped>
#div1{background-color: brown;width: 200px;height: 200px;
}
</style>

2. 响应式基础

ref() 可以使原始类型和对象类型变为响应式（控制台查看为RefImpl类型），模版中使用时会自动解包不需要写.value，但是在脚本中要用.value对ref对象的值进行读改。

<template><span>Message: {{ msg }}</span>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import { ref} from 'vue';
const msg = ref('Hello ');
msg.value = 'Hello World!';
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped>
</style>

reactive() 只能将对象类型转换为响应式代理（控制台查看类型为Proxy类型）且不可替换整个对象,如果要修改整个对象要使用Object.assign()。

<template><span>名字: {{ msg.name }}</span><br /><span>年龄: {{ msg.age }}</span><br /><button @click="msg.age++">点击年龄加1</button><br /><button @click="ChangeAllMessage">修改整体数据</button>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import { reactive } from 'vue';
const msg = reactive({name: '张三',age: 18,
});function ChangeAllMessage(){Object.assign(msg,{name:'李四',age:20});
}
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped></style>

3. 计算属性

comouted(()=>{}),只有在属性值发生变化才会更新，previous可以用来获取上一个值

<template><span>名字: {{ msg.name }}</span><br /><span>年龄: {{ msg.age }}</span><br /><span>计算值: {{ addage }}</span><br /><button @click="msg.age++">点击年龄加1</button>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import { ref, computed } from 'vue';
const msg = ref({name: '张三',age: 18,
});//计算值大于20返回上一次的结果，不大于20返回age实际值
const addage = computed((previous) => {if (msg.value.age > 20)return previous;elsereturn msg.value.age;
});
</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped></style>

4. v-if

<template>
<div id="div1" v-if="count===1" ></div>
<div id="div2" v-else-if="count===2"></div>
<div id="div3" v-else="count===3"></div>
<button @click="AddValue">Count++</button>
</template><!-- 语言使用TS -->
<script setup lang="ts">
import{ref} from 'vue'
const count= ref(0);
function AddValue(){count.value ++;
}</script><!-- 添加scoped样式只影响当前组件 -->
<style scoped>
#div1{background-color: brown;width: 200px;height: 200px;
}
#div2{background-color: rgb(79, 42, 165);width: 200px;height: 200px;
}
#div3{background-color: rgb(17, 15, 15);width: 200px;height: 200px;
}
</style>

5. v-show

<template>
<div id="div1" v-show="showflag" ></div>
<button @click="AddValue">ChangeValue&l