当前位置：首页 > news >正文

vue3的基本指令以及对js的导入和导出

news 2025/9/23 11:40:06

如何创建一个vue的项目

在这里插入图片描述
以上直接指定了名字

以上后面可以自己填写名字
使用命令：

npm init vue@latest my-vue-project

如何理解main.js里面的内容？

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

首先我们可以把鞋vue当做是养花，首先我们需要一个空的花盆，这个就是从vue中导入createApp也就是得到一个空的花盆。其次我们需要根，就是从App.vue中导入App，作为根。然后我们要把根插入花盆里面，也就是createApp(App)，最后我们需要把这个花盆放在固定的位置也就是createApp(App).mount(‘#app’)，mount就是挂载。挂载到index.html里面
在这里插入图片描述

Vue 3 的基本知识

Vue 3 是 Vue.js 的最新版本，带来了许多改进和新特性，使开发体验更好、性能更高。以下是 Vue 3 的一些基本知识点：

Composition API
Vue 3 引入了 Composition API，提供了一种新的方式来组织组件的逻辑。相比于 Vue 2 的 Options API，Composition API 更加灵活，尤其是在代码复用和逻辑拆分方面。使用 setup() 函数可以轻松访问组件的响应式数据和生命周期钩子。
```
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return { count, increment };}
};
```
响应式系统的改进
Vue 3 的响应式系统得到了全面改进，使用 Proxy 实现数据的劫持和响应式更新，替代了 Vue 2 中的 Object.defineProperty，从而解决了一些深层次属性和数组监控的局限性。
Teleport
Teleport 是 Vue 3 中的新特性，它允许你将组件的内容渲染到 DOM 树中的其他位置，而不局限于父组件的范围内。这对于创建模态框、通知等非常有用。
```
<teleport to="body"><div class="modal">这是一个模态框</div>
</teleport>
```
Fragments
在 Vue 2 中，每个组件只能有一个根元素，这有时会导致不必要的嵌套。而 Vue 3 支持 Fragments，允许组件返回多个根元素，从而使得模板更加简洁。
更好的 TypeScript 支持
Vue 3 对 TypeScript 的支持进行了优化，使得开发者可以更方便地在 Vue 项目中使用 TypeScript，从而提高代码的可维护性和可读性。
性能提升
Vue 3 通过虚拟 DOM 的重写和编译器优化，使得渲染性能得到了显著提升。此外，Vue 3 体积更小，模块化程度更高。
自定义渲染器 API
Vue 3 提供了自定义渲染器 API，使得开发者可以将 Vue 用于浏览器之外的其他环境，例如桌面应用程序或者游戏开发。

JavaScript 模块导入导出

默认导出与默认导入

默认导出是指一个模块只能导出一个默认值，使用 export default 关键字来实现。它适合那些一个文件只包含一个主要功能的情况，比如工具函数。

示例：

文件 greet.js：

export default function greet() {console.log("Hello, World!");
}

文件 main.js：

import greet from './greet.js';
greet(); // 输出: Hello, World!

在导入时，可以使用任何名称来引用默认导出的值。

组合导入与导出

有时，一个模块中既有默认导出又有命名导出。我们可以组合导入这两者：

示例：

文件 utils.js：

export default function logMessage(msg) {console.log(msg);
}
export const PI = 3.14;

文件 main.js：

import logMessage, { PI } from './utils.js';
logMessage(`The value of PI is ${PI}`); // 输出: The value of PI is 3.14

模块路径

模块路径可以是相对路径、绝对路径或包路径：

相对路径 (./、../)：用于本地模块，例如 import module from './file.js'。
绝对路径 (@)：项目中可以配置路径别名，如 @ 通常表示 src 文件夹，方便引用。
包路径：用于第三方库，如 import _ from 'lodash'，从 node_modules 中查找。

vue3的常用指令

1. `v-bind`：绑定属性

v-bind 是 Vue 中最常用的指令之一，通常用于绑定 HTML 标签的属性，例如 class、style 等。在模板中，你可以简化 v-bind 为 :，例如：

<div id="app"><img :src="imageSrc" alt="Vue Logo">
</div><script>
import { createApp } from 'vue';createApp({data() {return {imageSrc: 'https://vuejs.org/images/logo.png'};}
}).mount('#app');
</script>

在上面的例子中，v-bind:src 被简化为 :src，它会动态地将数据对象中的 imageSrc 属性绑定到 img 标签的 src 属性上。

在 Vue 3 中，创建实例的方式与 Vue 2 不同。这里使用了 createApp 方法来创建应用实例，并将其挂载到具有 id="app" 的元素上。data 方法返回一个数据对象，其中 imageSrc 保存了图片的 URL，用于在模板中动态绑定到 img 标签的 src 属性上。
在这里插入图片描述

2. `v-model`：双向绑定

v-model 是用于双向绑定表单控件的指令，能够让数据和视图实时同步。来看下面的例子：

<div id="app"><input type="text" v-model="message" placeholder="请输入内容"><p>你输入的内容是：{{ message }}</p>
</div><script>
const { createApp } = 'vue';createApp({data() {return {message: ''};}
}).mount('#app');
</script>

在这个例子中，输入框的值和 message 属性通过 v-model 实现了双向绑定，当用户在输入框中输入内容时，p 标签中的内容也会实时更新。
其实就是：
当你在输入框中输入内容时，message 变量会实时更新。
如果 message 变量在代码中被修改，输入框的内容也会自动更新。

`:model和v-model`的区别

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister":model="registerData" :rules="rules"><el-form-item><h1>注册</h1></el-form-item><el-form-item prop="username"><el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username" ></el-input></el-form-item><el-form-item prop="password"><el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input></el-form-item><el-form-item prop="rePassword"><el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input></el-form-item>

总结:model 和 v-model的区别如下：

作用对象：

:model：用于绑定表单组件（如 <el-form>）的整体数据对象。
v-model：用于绑定具体表单项（如 <el-input>）的单个数据字段，实现双向绑定。

使用场景：
:model：适用于像 <el-form> 这样需要管理整体数据的组件，通常绑定整个表单的数据对象。
v-model：适用于具体的输入控件，如 <input>, <el-input>，直接绑定并更新单个字段的值。

功能：
:model：提供表单数据的整体引用，以便组件内部处理表单项。
v-model：实现单个输入框的双向数据绑定，简化表单项的值更新。
在这里插入图片描述

3. `v-if`、`v-else`、`v-else-if`：条件渲染

v-if、v-else 和 v-else-if 用于根据条件渲染元素。

<div id="app">手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> <span v-else>29.9</span>
</div><script  type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'张三',level:3}}}}).mount("#app")//控制html元素</script>

Vue 应用的功能是根据 customer 的 level 属性动态显示不同的价格。
v-if 指令：条件渲染，判断 customer.level 的值来决定显示哪个价格。
v-if="customer.level >= 0 && customer.level <= 1"：当 customer.level 的值在 0 到 1 之间时，显示价格 9.9。
v-else-if="customer.level >= 2 && customer.level <= 4"：当 customer.level 的值在 2 到 4 之间时，显示价格 19.9。
v-else：如果 customer.level 超出以上范围（即大于 4），显示价格 29.9。
在页面上，根据 customer.level 的值会动态显示不同的价格。

4. `v-for`：列表渲染

v-for 指令用于遍历数组或对象，渲染出多个元素。

<div id="app"><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</div><script type="module">// 导入 Vue 模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';// 创建 Vue 应用实例createApp({data() {return {items: [{ id: 1, name: '苹果' },{ id: 2, name: '香蕉' },{ id: 3, name: '橘子' }]};}}).mount('#app'); // 挂载到带有 id="app" 的元素
</script>

在这个例子中，v-for 遍历了 items 数组，每个 li 标签显示数组中的一个元素。
在这里插入图片描述
v-for="(item, index) in items"：

items 是遍历的数组，需要在组件的data函数中定义。
item 是遍历过程中当前的元素。
index 是元素的索引，从 0 开始。index 是可选的，可以省略。
:key通常会选择数据中能唯一标识该条数据的属性作为 key 的值（如数据项的 id，而不是索引值index）。确保 key 在同一级列表中独一无二。

为什么要使用：key？

案例：
如果不增加:key，当我们使用复选框删除某一个商品的时候，列表中的复选框状态被错误地复用到了其它商品上。其本质原因在于，没有 key 导致 Vue 在更新列表时无法准确定位删除前后 DOM 节点的对应关系，进而错误地重用、更新或保留了一些组件状态（包括复选框选中状态）。

<template><view class="out"><view class="item" v-for="(item,index) in goods"><checkbox></checkbox><text class="title">{{item.name}}</text><text class="del" @click="remove(index)">删除</text></view></view>
</template><script setup>
import { ref } from 'vue';const goods = ref([{id:1,name:"小米"},{id:2,name:"菠萝"},{id:3,name:"华为"},{id:4,name:"OPPO"}]);
function remove(index){console.log(index);goods.value.splice(index,1);
}
</script><style>.out{padding: 10px;.item{padding: 10px 0;.del{color: #c00;margin-left: 30px;}}}
</style>

如果我们增加:key的话，那么我们选中复选框进行删除的时候，复选框不会再次绑定另一个商品

<template><view class="out"><view class="item" v-for="(item,index) in goods"><checkbox></checkbox><text class="title">{{item.name}}</text><text class="del" @click="remove(index)">删除</text></view></view>
</template>

当你给 v-for 增加 :key 属性（例如使用 item.id）后，就能确保每一条数据与 DOM 元素之间有明确的一对一关系。删除某个商品后，Vue 能清楚地知道是哪个节点要被移除，哪个节点是新加入的，从而在更新时不会出现状态混乱。这样就能保证复选框在删除对应商品后正确地消失、而不会「莫名其妙」绑定到别的商品上。

同样需要注意的是，我们在使用:key的时候需要选择一个唯一的值，如果选择的是index作为key的话，那么跟不写:key的作用是一样的

5. `v-on`：事件绑定

v-on 用于监听 DOM 事件，并在触发事件时执行相应的 JavaScript 代码。v-on 可以简化为 @。

<div id="app"><button @click="sayHello">点击我</button>
</div><script type="module">// 导入 Vue 模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';// 创建 Vue 应用实例createApp({methods: {sayHello() {alert('你好，Vue!');}}}).mount('#app'); // 挂载到带有 id="app" 的元素
</script>

在这个例子中，当用户点击按钮时，sayHello 方法被调用，弹出提示框 “你好，Vue!”。
在这里插入图片描述

6. `v-show`：显示/隐藏

v-show 与 v-if 类似，用于显示或隐藏元素，但它的实现方式是通过控制 display 样式。

 <div id="app">手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> <span v-else>29.9</span><br/>手链价格为:  <span v-show="customer.level>=0 && customer.level<=1">9.9</span>  <span v-show="customer.level>=2 && customer.level<=4">19.9</span> <span v-show="customer.level>=5">29.9</span></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'张三',level:3}}}}).mount("#app")//控制html元素</script>