如何創(chuàng)建一個(gè)vue的項(xiàng)目

以上直接指定了名字

以上后面可以自己填寫(xiě)名字

使用命令：

npm init vue@latest my-vue-project

如何理解main.js里面的內(nèi)容？

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

首先我們可以把鞋vue當(dāng)做是養(yǎng)花，首先我們需要一個(gè)空的花盆，這個(gè)就是從vue中導(dǎo)入createApp也就是得到一個(gè)空的花盆。其次我們需要根，就是從App.vue中導(dǎo)入App，作為根。然后我們要把根插入花盆里面，也就是createApp(App)，最后我們需要把這個(gè)花盆放在固定的位置也就是createApp(App).mount(‘#app’)，mount就是掛載。掛載到index.html里面

Vue 3 的基本知識(shí)

Vue 3 是 Vue.js 的最新版本，帶來(lái)了許多改進(jìn)和新特性，使開(kāi)發(fā)體驗(yàn)更好、性能更高。以下是 Vue 3 的一些基本知識(shí)點(diǎn)：

1. Composition API
   Vue 3 引入了 Composition API，提供了一種新的方式來(lái)組織組件的邏輯。相比于 Vue 2 的 Options API，Composition API 更加靈活，尤其是在代碼復(fù)用和邏輯拆分方面。使用 setup() 函數(shù)可以輕松訪問(wèn)組件的響應(yīng)式數(shù)據(jù)和生命周期鉤子。

   import { ref } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
       const increment = () => {
         count.value++;
       };
       return { count, increment };
     }
   };
   

2. 響應(yīng)式系統(tǒng)的改進(jìn)
   Vue 3 的響應(yīng)式系統(tǒng)得到了全面改進(jìn)，使用 Proxy 實(shí)現(xiàn)數(shù)據(jù)的劫持和響應(yīng)式更新，替代了 Vue 2 中的 Object.defineProperty，從而解決了一些深層次屬性和數(shù)組監(jiān)控的局限性。

3. Teleport
   Teleport 是 Vue 3 中的新特性，它允許你將組件的內(nèi)容渲染到 DOM 樹(shù)中的其他位置，而不局限于父組件的范圍內(nèi)。這對(duì)于創(chuàng)建模態(tài)框、通知等非常有用。

   <teleport to="body">
     <div class="modal">這是一個(gè)模態(tài)框</div>
   </teleport>
   

4. Fragments
   在 Vue 2 中，每個(gè)組件只能有一個(gè)根元素，這有時(shí)會(huì)導(dǎo)致不必要的嵌套。而 Vue 3 支持 Fragments，允許組件返回多個(gè)根元素，從而使得模板更加簡(jiǎn)潔。

5. 更好的 TypeScript 支持
   Vue 3 對(duì) TypeScript 的支持進(jìn)行了優(yōu)化，使得開(kāi)發(fā)者可以更方便地在 Vue 項(xiàng)目中使用 TypeScript，從而提高代碼的可維護(hù)性和可讀性。

6. 性能提升
   Vue 3 通過(guò)虛擬 DOM 的重寫(xiě)和編譯器優(yōu)化，使得渲染性能得到了顯著提升。此外，Vue 3 體積更小，模塊化程度更高。

7. 自定義渲染器 API
   Vue 3 提供了自定義渲染器 API，使得開(kāi)發(fā)者可以將 Vue 用于瀏覽器之外的其他環(huán)境，例如桌面應(yīng)用程序或者游戲開(kāi)發(fā)。

JavaScript 模塊導(dǎo)入導(dǎo)出

默認(rèn)導(dǎo)出與默認(rèn)導(dǎo)入

默認(rèn)導(dǎo)出是指一個(gè)模塊只能導(dǎo)出一個(gè)默認(rèn)值，使用 export default 關(guān)鍵字來(lái)實(shí)現(xiàn)。它適合那些一個(gè)文件只包含一個(gè)主要功能的情況，比如工具函數(shù)。

示例：

文件 greet.js：

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

文件 main.js：

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

在導(dǎo)入時(shí)，可以使用任何名稱來(lái)引用默認(rèn)導(dǎo)出的值。

組合導(dǎo)入與導(dǎo)出

有時(shí)，一個(gè)模塊中既有默認(rèn)導(dǎo)出又有命名導(dǎo)出。我們可以組合導(dǎo)入這兩者：

示例：

文件 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

模塊路徑

模塊路徑可以是相對(duì)路徑、絕對(duì)路徑或包路徑：

• 相對(duì)路徑 (./、../)：用于本地模塊，例如 import module from './file.js'。
• 絕對(duì)路徑 (@)：項(xiàng)目中可以配置路徑別名，如 @ 通常表示 src 文件夾，方便引用。
• 包路徑：用于第三方庫(kù)，如 import _ from 'lodash'，從 node_modules 中查找。

vue3的常用指令

1.v-bind：綁定屬性

v-bind 是 Vue 中最常用的指令之一，通常用于綁定 HTML 標(biāo)簽的屬性，例如 class、style 等。在模板中，你可以簡(jiǎn)化 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 被簡(jiǎn)化為 :src，它會(huì)動(dòng)態(tài)地將數(shù)據(jù)對(duì)象中的 imageSrc 屬性綁定到 img 標(biāo)簽的 src 屬性上。

在 Vue 3 中，創(chuàng)建實(shí)例的方式與 Vue 2 不同。這里使用了 createApp 方法來(lái)創(chuàng)建應(yīng)用實(shí)例，并將其掛載到具有 id="app" 的元素上。data 方法返回一個(gè)數(shù)據(jù)對(duì)象，其中 imageSrc 保存了圖片的 URL，用于在模板中動(dòng)態(tài)綁定到 img 標(biāo)簽的 src 屬性上。

2.v-model：雙向綁定

v-model 是用于雙向綁定表單控件的指令，能夠讓數(shù)據(jù)和視圖實(shí)時(shí)同步。來(lái)看下面的例子：

<div id="app">
  <input type="text" v-model="message" placeholder="請(qǐng)輸入內(nèi)容">
  <p>你輸入的內(nèi)容是：{{ message }}</p>
</div>

<script>
const { createApp } = 'vue';

createApp({
  data() {
    return {
      message: ''
    };
  }
}).mount('#app');
</script>

在這個(gè)例子中，輸入框的值和 message 屬性通過(guò) v-model 實(shí)現(xiàn)了雙向綁定，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，p 標(biāo)簽中的內(nèi)容也會(huì)實(shí)時(shí)更新。

其實(shí)就是：

當(dāng)你在輸入框中輸入內(nèi)容時(shí)，message 變量會(huì)實(shí)時(shí)更新。

如果 message 變量在代碼中被修改，輸入框的內(nèi)容也會(huì)自動(dòng)更新。

:model和v-model的區(qū)別

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister"
               :model="registerData" :rules="rules">
        <el-form-item>
          <h1>注冊(cè)</h1>
        </el-form-item>
        <el-form-item prop="username">
          <el-input :prefix-icon="User" placeholder="請(qǐng)輸入用戶名" v-model="registerData.username" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" type="password" placeholder="請(qǐng)輸入密碼" v-model="registerData.password"></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input :prefix-icon="Lock" type="password" placeholder="請(qǐng)輸入再次密碼" v-model="registerData.rePassword"></el-input>
        </el-form-item>

總結(jié):model 和 v-model的區(qū)別如下：

作用對(duì)象：

:model：用于綁定表單組件（如 <el-form>）的整體數(shù)據(jù)對(duì)象。
v-model：用于綁定具體表單項(xiàng)（如 <el-input>）的單個(gè)數(shù)據(jù)字段，實(shí)現(xiàn)雙向綁定。

使用場(chǎng)景：
:model：適用于像 <el-form> 這樣需要管理整體數(shù)據(jù)的組件，通常綁定整個(gè)表單的數(shù)據(jù)對(duì)象。
v-model：適用于具體的輸入控件，如 <input>, <el-input>，直接綁定并更新單個(gè)字段的值。

功能：

:model：提供表單數(shù)據(jù)的整體引用，以便組件內(nèi)部處理表單項(xiàng)。

v-model：實(shí)現(xiàn)單個(gè)輸入框的雙向數(shù)據(jù)綁定，簡(jiǎn)化表單項(xiàng)的值更新。

3.v-if、v-else、v-else-if：條件渲染

v-if、v-else 和 v-else-if 用于根據(jù)條件渲染元素。

<div id="app">
	手鏈價(jià)格為:  
	<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">
	 //導(dǎo)入vue模塊
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //創(chuàng)建vue應(yīng)用實(shí)例
        createApp({
            data() {
                return {
                    customer:{
                        name:'張三',
                        level:3
                    }
                }
            }
        }).mount("#app")//控制html元素
	</script>

Vue 應(yīng)用的功能是根據(jù) customer 的 level 屬性動(dòng)態(tài)顯示不同的價(jià)格。

v-if 指令：條件渲染，判斷 customer.level 的值來(lái)決定顯示哪個(gè)價(jià)格。

v-if="customer.level >= 0 && customer.level <= 1"：當(dāng) customer.level 的值在 0 到 1 之間時(shí)，顯示價(jià)格 9.9。

v-else-if="customer.level >= 2 && customer.level <= 4"：當(dāng) customer.level 的值在 2 到 4 之間時(shí)，顯示價(jià)格 19.9。

v-else：如果 customer.level 超出以上范圍（即大于 4），顯示價(jià)格 29.9。
在頁(yè)面上，根據(jù) customer.level 的值會(huì)動(dòng)態(tài)顯示不同的價(jià)格。

4.v-for：列表渲染

v-for 指令用于遍歷數(shù)組或?qū)ο?，渲染出多個(gè)元素。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script type="module">
  // 導(dǎo)入 Vue 模塊
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

  // 創(chuàng)建 Vue 應(yīng)用實(shí)例
  createApp({
    data() {
      return {
        items: [
          { id: 1, name: '蘋(píng)果' },
          { id: 2, name: '香蕉' },
          { id: 3, name: '橘子' }
        ]
      };
    }
  }).mount('#app'); // 掛載到帶有 id="app" 的元素
</script>

在這個(gè)例子中，v-for 遍歷了 items 數(shù)組，每個(gè) li 標(biāo)簽顯示數(shù)組中的一個(gè)元素。

v-for="(item, index) in items"：

items 是遍歷的數(shù)組，需要在組件的data函數(shù)中定義。
item 是遍歷過(guò)程中當(dāng)前的元素。
index 是元素的索引，從 0 開(kāi)始。index 是可選的，可以省略。
:key通常會(huì)選擇數(shù)據(jù)中能唯一標(biāo)識(shí)該條數(shù)據(jù)的屬性作為 key 的值（如數(shù)據(jù)項(xiàng)的 id，而不是索引值index）。確保 key 在同一級(jí)列表中獨(dú)一無(wú)二。

為什么要使用：key？

案例：

如果不增加:key，當(dāng)我們使用復(fù)選框刪除某一個(gè)商品的時(shí)候，列表中的復(fù)選框狀態(tài)被錯(cuò)誤地復(fù)用到了其它商品上。 其本質(zhì)原因在于，沒(méi)有 key 導(dǎo)致 Vue 在更新列表時(shí)無(wú)法準(zhǔn)確定位刪除前后 DOM 節(jié)點(diǎn)的對(duì)應(yīng)關(guān)系，進(jìn)而錯(cuò)誤地重用、更新或保留了一些組件狀態(tài)（包括復(fù)選框選中狀態(tài)）。

<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>

如果我們?cè)黾?code>:key的話，那么我們選中復(fù)選框進(jìn)行刪除的時(shí)候，復(fù)選框不會(huì)再次綁定另一個(gè)商品

<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>

當(dāng)你給 v-for 增加 :key 屬性（例如使用 item.id）后，就能確保每一條數(shù)據(jù)與 DOM 元素之間有明確的一對(duì)一關(guān)系。刪除某個(gè)商品后，Vue 能清楚地知道是哪個(gè)節(jié)點(diǎn)要被移除，哪個(gè)節(jié)點(diǎn)是新加入的，從而在更新時(shí)不會(huì)出現(xiàn)狀態(tài)混亂。這樣就能保證復(fù)選框在刪除對(duì)應(yīng)商品后正確地消失、而不會(huì)「莫名其妙」綁定到別的商品上。

同樣需要注意的是，我們?cè)谑褂?code>:key的時(shí)候需要選擇一個(gè)唯一的值，如果選擇的是index作為key的話，那么跟不寫(xiě):key的作用是一樣的

5.v-on：事件綁定

v-on 用于監(jiān)聽(tīng) DOM 事件，并在觸發(fā)事件時(shí)執(zhí)行相應(yīng)的 JavaScript 代碼。v-on 可以簡(jiǎn)化為 @。

<div id="app">
  <button @click="sayHello">點(diǎn)擊我</button>
</div>

<script type="module">
  // 導(dǎo)入 Vue 模塊
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

  // 創(chuàng)建 Vue 應(yīng)用實(shí)例
  createApp({
    methods: {
      sayHello() {
        alert('你好，Vue!');
      }
    }
  }).mount('#app'); // 掛載到帶有 id="app" 的元素
</script>

在這個(gè)例子中，當(dāng)用戶點(diǎn)擊按鈕時(shí)，sayHello 方法被調(diào)用，彈出提示框 “你好，Vue!”。

6.v-show：顯示/隱藏

v-show 與 v-if 類似，用于顯示或隱藏元素，但它的實(shí)現(xiàn)方式是通過(guò)控制 display 樣式。

 <div id="app">

        手鏈價(jià)格為:  <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>

        

        手鏈價(jià)格為:  <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">
        //導(dǎo)入vue模塊
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //創(chuàng)建vue應(yīng)用實(shí)例
        createApp({
            data() {
                return {
                    customer:{
                        name:'張三',
                        level:3
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>

v-show 控制文本是否顯示，通過(guò)點(diǎn)擊按鈕，isVisible 的值在 true 和 false 之間切換，從而改變文本的顯示狀態(tài)。

結(jié)語(yǔ)

這些基本指令是 Vue.js 的核心功能，能夠讓開(kāi)發(fā)者輕松地實(shí)現(xiàn)數(shù)據(jù)綁定、事件處理、條件渲染等操作。通過(guò)這些指令，開(kāi)發(fā)者可以構(gòu)建出功能強(qiáng)大且動(dòng)態(tài)的用戶界面。

到此這篇關(guān)于vue3基本指令以及對(duì)js的導(dǎo)入和導(dǎo)出方法詳解的文章就介紹到這了,更多相關(guān)vue3指令及對(duì)js導(dǎo)入和導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論