vue3.js

可洛不甜

已于 2023-07-10 08:44:51 修改

阅读量853

点赞数 1

文章标签：前端 vue.js

于 2023-07-07 20:27:31 首次发布

本文链接：https://blog.csdn.net/lllsadsa/article/details/131603946

版权

Vue

Vue 是一个前端渐进式开发框架。

不管是 Vue 也好，React 也好还是 angular，这些框架的目的就是代替我们做 dom 操作而已。其实最底层的核心还是 dom 操作

学 vue，需要大家转变一个思想，我们以后就可以不需要直接操作 dom，只需要改变我们的数据，页面就会自动重新渲染。需要大家养成数据驱动的思想

https://cn.vuejs.org/
Vue组合式API与网络封装

《1》在页面中使用 vue.js

从网上下载 vue 文件

《2》vue 常用指令

在 vue 中，所有的以 v-开头的都是指令。可以理解为自定义属性，设置之后可以让我们的标签有一些特别的效果或者内容绑定

v-model

作用是实现输入框和 data 数据的双向绑定，他相当于同时设置了 value 属性和绑定了 input 事件

<body>
  <div id="app">
    <input v-model="searchText" />
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          searchText: "",
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-if

控制 dom 元素显示和隐藏，会直接删除 dom
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

<body>
  <div id="app">
    <div v-if="isShow">if</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          isShow: true
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<body>
  <div id="app">
    <div v-if="isShow">if</div>
    <div v-else>else</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          isShow: false
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-else-if

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

<body>
  <div id="app">
    <div v-if="isShow=='A'">A</div>
    <div v-else-if="isShow=='B'">B</div>
    <div v-else-if="isShow=='C'">C</div>
    <div v-else-if="isShow=='D'">D</div>
    <div v-else>E</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          isShow: "C"
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

v-show

用来按条件显示一个元素
控制 dom 元素显示和隐藏，通过设置 display 属性
v-show 通过控制 display 属性进行 dom 元素的显示和隐藏，这样子性能更好
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

<body>
  <div id="app">
    <div v-show="isShow">show</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          isShow: true
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-if 与 v-show 的区别

v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

注意：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

v-html

与 innerHTML 相同，展示一个富文本内容（rich-text）。就是字符串中包含有 html 标签的文本

<body>
  <div id="app">
    <div v-html="strHtml"></div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          strHtml: `<h1>柚子茶</h1>`,
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-text

与 innerText 的用法相同，都是将字符串放到指定的标签节点中

<body>
  <div id="app">
    <div v-text="strText"></div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          strText: "天天想喝柚子茶",
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-bind

绑定属性，v-bind:可以简写为 :
我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<body>
  <div id="app">
    <div :class="active">asdasd</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          active: {
            red: true,
            blue: false,
            pink: true
          }
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

// 结果是
<div calss="red pink">asdasd</div>

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

<body>
  <div id="app">
    <div :class="[activeClass, errorClass]">asedasas</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          activeClass: 'active',
          errorClass: 'text-danger'
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>
// 结果是
<div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

绑定样式

绑定 class 名字的时候写法很多

绑定一个字符串,就是多个样式名拼接的字符串
绑定一个数组，数组的每一项表示样式名
绑定一个对象，对象的属性名表示样式名，属性值是一个 bool 值。为 true 表示样式生效，为 false 表示样式不生效

v-on

v-on:事件名字，进行事件的绑定。v-on:可以简写为@。在 vue 中绑定事件的时候不需要写 on 关键词

<body>
  <div id="app">
    <button @click="add()"> 点一下</button>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {

        };
      },
      methods: {
        add() {
          alert("触发了");
        }
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

v-for

循环输出一个内容到页面上
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for 基本用法

<body>
  <div id="app">
    // item 是 list 数组的元素，idex 为下标
    <div v-for="(item,index) in list">{{item}}---{{index}}</div>
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
        };
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。
注意此处 n 的初值是从 1 开始而非 0。

<span v-for="n in 10">{{ n }}</span>

《3》vue 中的一些常用 API

计算属性

computed，当依赖的数据改变之后计算一个结果。计算属性是一个值
推荐使用计算属性来描述依赖响应状态的赋值逻辑
计算属性有缓存，会将结果存起来
- 全选和反选
- 购物车

<body>
  <div id="app">
    欢迎{{myComputedName}}回来
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          myname: "tiantian"
        };
      },
      computed: {
        myComputedName() {
          return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1);
        }
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

方法调用

方法调用没有缓存

<body>
  <div id="app">
    欢迎{{myMethodName()}}回来
  </div>

  <script src="vue3.js"></script>
  <script>
    const obj = {
      data() {
        return {
          myname: "youzi"
        };
      },
      methods: {
        myMethodName() {
          return this.myname.substring(0, 1).toUpperCase() + this.myname.substring(1);
        }
      }
    };
    Vue.createApp(obj).mount("#app")
  </script>
</body>

计算属性和方法调用的区别

方法调用需要加括号
计算属性具有缓存功能，依赖的数据不改变不会重新执行
方法调用每一次页面更新都会重新被调用

watch 监听

watch 就是监听一个数据的改变，执行一个回调函数。在这个回调函数的参数中可以获取数据的最新值

一些全局 api

全局 api 就是全局可以直接使用的 API

nexttick

在组件更新之后的下一次回调中执行

refs

获取组件中设置了 ref 属性的 dom 元素

el

获取当前组件的 dom 元素

《4》组件定义和组件传参

组件就是自定义标签的意思

全局组件

定义好之后可以在项目的任意位置使用，而不需要重复注册

局部组件

定义好之后，我们需要在使用的时候进行引入并注册才能使用

组件传参

父传子，使用 props 属性
子传父，使用事件派发
非相关组件之间传参，使用依赖注入或者 vuex 和 pinia 等状态管理插件

插槽

为组件传递一些特殊的内容(比如标签)

常见的有

默认插槽
具名插槽

组件生命周期

生命周期钩子函数，常见的有八个。结合 keep-alive 使用的时候多出来两个，总共十个

可以分为四个阶段：

创建，beforeCreate、created
挂载，beforeMount、mounted
更新，beforeUpdate、updated
销毁，beforeUnmount、unmounted；(vue2 中叫：beforeDestroy,destroyed)

《5》使用

单文件组件

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script>
  export default {
    data() {
      return {
        greeting: 'Hello World!'
      }
    }
  }
</script>

<template>
<p class="greeting">{{ greeting }}</p>
</template>

<style>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>

如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。完整的语法定义可以查阅 SFC 语法说明。

为什么要使用 SFC

使用 SFC 必须使用构建工具，但作为回报带来了以下优点：
- 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
- 让本来就强相关的关注点自然内聚
- 预编译模板，避免运行时的编译开销
- 组件作用域的 CSS
- 在使用组合式 API 时语法更简单
- 通过交叉分析模板和逻辑代码能进行更多编译时优化
- 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
- 开箱即用的模块热更新 (HMR) 支持
SFC 是 Vue 框架提供的一个功能，并且在下列场景中都是官方推荐的项目组织方式：
- 单页面应用 (SPA)
- 静态站点生成 (SSG)
- 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目