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;
  else
    return 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