Vue3知识总结-1

最新推荐文章于 2024-05-21 02:06:32 发布

z3551906947

最新推荐文章于 2024-05-21 02:06:32 发布

阅读量1k

点赞数 9

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/z3551906947/article/details/138684106

版权

前面学习一段时间的前端，但是没有进行过太多的练习，并且对于里面一些重要的知识点也没有去着重的记忆，所以打算在学习Vue3的时候，做一些笔记，方便后面翻看。这个笔记会对于学习一些做一些，而不是一个整体的部分，整个学习过程也都是跟着视频来做的。

为什么选择Vue

Vue是什么

渐进式的JS框架，易用易学，性能出色，使用场景丰富

为什么学习

最火的
企业中要求
可以提升开发体验
……

Vue简介

提供了一套声明式，组件化的编程模型

渐进式框架

Vue是一个框架也是生态，覆盖了很多前端开发请求。Vue设计非常注重灵活性和“可以被逐步集成”这个特点。可以用不同的方式使用Vue：

无需构建，渐进式增强静态的HTML
任何页面作为Web Components嵌入
单页应用SPA
全栈/服务端渲染（SSR）
开发桌面端等

Vue版本

目前，开发中有2和3，老项目一般是Vue2，新项目是Vue3

Vue API风格

有两种书写风格：选项API和组合式API

选项式API

<script>
export default {
  data(){
    return {
      count: 0
    }
  },
  methods:{
    increment() {
      this.count += 1;
    }
  },
  mounted() {
    console.log(`选项式AIP: The initial count is &{this.count}.`)
  }
}
</script>
<template>
  <button @click="increment">选项式AIP: Count is : {{count}}</button>/
</template>

组合式API

<script setup >
import {ref, onMounted} from 'vue'
const count = ref(0)
function increment(){
  count.value++
}
onMounted(() =>{
  console.log(`组合式AIP: The initial count is &{this.count}.`)
})
</script>

<template>
  <button @click="increment">组合式API:Count is : {{count}}</button>/
</template>

Vue开发前准备

首先需要安装Node.js,然后配置一下就好了。

下面的是运行整个项目

 npm init vue@latest  创建项目
 npm install / cnpm install 安装依赖目录文件夹
 npm run dev   运行整个项目

Vue项目目录结构

模版语法

文本差值

最基本的数据绑定形式是文本差值，使用的是“Mustache”语法（及大括号）

<template>
  <h3> 模版语法</h3>
  <p>{{msg}}</p>
</template>

<script>
export default {
  data(){
    return{
      msg:"神奇的语法"
    }

  }
}
</script>

使用js表达式

每个绑定仅仅支持单一表达式，也就是一段能够被求值的代码，

<template>
  <h3> 模版语法</h3>
  <p>{{msg}}</p>
  <p>{{number + 1}}</p>
  <p>{{ok}}</p>
  <p>{{ok ? 'yes': 'no'}}</p>
  <p>{{msg.split("").reverse().join()}}</p>
  <!--  <p>{{var a = 1}}/p>-->
  <!--  <p>{{if (number > 10) {return 0}}}</p>/-->
</template>

<script>
export default {
  data(){
    return{
      msg:"神奇的语法",
      number: 122,
      ok:true,
    }

  }
}
</script>

原始HTML

双大括号将会将数据差值为纯文本，而不是HTML，如果想插入HTML，需要使用v-html指令

<template>
  <p v-html="rawHtml"></p>
</template>

<script>
export default {
  data(){
    return{
      rawHtml:"<a href='www.baidu.com'>百度</a>"
    }

  }
}
</script>

属性绑定


<template>
  <div v-bind:id="msg" v-bind:class="dynamicClass" >测试</div>
</template>

<script>
export default {
  data(){
    return{
      msg:"active",
      dynamicClass: "appclass",
    }
  }
}

</script>
<style>
.appclass{
  color:red;
  font-weight: bold;
  font_size: 30px;
}
</style>

v-bind指令标识Vue将元素id attribute与dynamicId组件属性保持一致，如果绑定的值是null或者undefind，那么该attribute将会从渲染的元素上移除

简写

<div :id="msg" :class="dynamicClass" >测试</div>

布尔值Attribute

根据true/false来决定attribute是否存在于该元素上，disabled是常见的

动态绑定多个值


<template>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind="objectOfAttrs">测试问题呢</div>
</template>

<script>
export default {
  data(){
    return{
      dynamicClass: "appclass",
      isButtonDisabled:false,
      objectOfAttrs:{
        class: "appclass",
        dynamilId: "appid",
      }
    }
  }
}

</script>
<style>
.appclass{
  color:red;
  font-weight: bold;
  font_size: 30px;
}
</style>

条件渲染

类似于条件语句

V-if 用于条件性的渲染，为真的时候就渲染，假的时候不渲染

V-else 可以设计为多个分块

V-show 按照条件显示一个元素的指令

下面是上面这些指令的一些代码示例：

<template>
  <h3>条件渲染</h3>
  <div v-if="flag"> 你们看见我不</div>
  <div v-else> 你还是看看我吧</div>
  <div v-if="type ==='A'">A</div>
  <div v-else-if="type ==='B'">B</div>
  <div v-else-if="type ==='C'">C</div>
  <div v-else>Not a/b/c</div>
  <div v-show="flag">Not a/b/c</div>
</template>
<script>
  export default {
    data(){
      return {
        flag:true,
        type: "D",
      }
    }
  }
</script>

v-if 和v-show

v-if 和 v-show 是 Vue.js 中常用的两个指令，用于条件性地显示或隐藏元素，但它们有一些不同之处。

v-if：
1. v-if 是一种条件渲染指令，用于根据表达式的真假条件来决定是否渲染 DOM 元素。
2. 如果条件为真，元素将被渲染到 DOM 中；如果条件为假，元素将从 DOM 中移除。
3. 当条件为假时，Vue.js 不会渲染或管理该元素及其子元素，因此对性能有一定的提升。

示例：

<div v-if="isVisible"This will only be rendered if isVisible is true</div>

v-show：
1. v-show 也用于根据条件显示或隐藏元素，但与 v-if 不同，它只是简单地切换 CSS 的 display 属性，而不是添加或移除元素。
2. 元素始终被渲染到 DOM 中，只是通过 CSS 控制其显示或隐藏。
3. 当条件为假时，元素的样式为 display: none;，因此元素仍然存在于 DOM 中，可能会对性能产生一定的影响。

示例：

<div v-show="isVisible"This will be rendered but may not be visible</div>

选择使用 v-if 还是 v-show 取决于你的具体需求：

如果你希望在条件为假时从 DOM 中完全移除元素，可以使用 v-if。
如果你希望保留元素的 DOM 结构并且只是简单地控制其显示或隐藏状态，可以使用 v-show。

列表渲染

使用v-for指令去渲染一个数组渲染一个列表，需要使用item in items这样的特殊语法

<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>
</template>
<script>
  export default {
    data(){
      return{
        names:["实验室","大学","小学"]
      }
    }
  }
</script>

复杂数据

大多数情况下，渲染的都是网络请求，json格式

<template>
  <h3>列表渲染</h3>
  <p v-for="item in result">
    <p>{{item.title}}</p>
<!--   / <img src="item.avator">-->
  </p>
</template>
<script>
  export default {
    data() {
      return {
        result: [
          {
            "id": 123,
            "title": "中药",
            "avator": "http://^",
          },
          {
            "id": 124,
            "title": "西药",
            "avator": "http://^",
          },
          {
            "id": 125,
            "title": "中西药",
            "avator": "http://^",
          },
        ]

      }
    }
  }
</script>

V-for 可以有数组的下标，并且可以使用of来代替in

<p v-for="(item, index) in names">{{ item}}-{{index}}</p>

V-for与对象

可以用来遍历对象

<template>
  <h3>列表渲染</h3>

  <p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p>
</template>
<script>
  export default {
    data() {
      return{
        user:{
          name: "123",
          age: 13,
        }
      }
    }
  }
</script>