如何创建一个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 的一些基本知识点：

1. 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 };
     }
   };
   

2. 响应式系统的改进
   Vue 3 的响应式系统得到了全面改进，使用 Proxy 实现数据的劫持和响应式更新，替代了 Vue 2 中的 Object.defineProperty，从而解决了一些深层次属性和数组监控的局限性。

3. Teleport
   Teleport 是 Vue 3 中的新特性，它允许你将组件的内容渲染到 DOM 树中的其他位置，而不局限于父组件的范围内。这对于创建模态框、通知等非常有用。

   <teleport to="body">
     <div class="modal">这是一个模态框</div>
   </teleport>
   

4. Fragments
   在 Vue 2 中，每个组件只能有一个根元素，这有时会导致不必要的嵌套。而 Vue 3 支持 Fragments，允许组件返回多个根元素，从而使得模板更加简洁。

5. 更好的 TypeScript 支持
   Vue 3 对 TypeScript 的支持进行了优化，使得开发者可以更方便地在 Vue 项目中使用 TypeScript，从而提高代码的可维护性和可读性。

6. 性能提升
   Vue 3 通过虚拟 DOM 的重写和编译器优化，使得渲染性能得到了显著提升。此外，Vue 3 体积更小，模块化程度更高。

7. 自定义渲染器 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>

v-show 控制文本是否显示，通过点击按钮，isVisible 的值在 true 和 false 之间切换，从而改变文本的显示状态。

结语

这些基本指令是 Vue.js 的核心功能，能够让开发者轻松地实现数据绑定、事件处理、条件渲染等操作。通过这些指令，开发者可以构建出功能强大且动态的用户界面。