Vue3從入門到精通(一)

来源:https://www.cnblogs.com/for-easy-fast/archive/2023/06/07/17462728.html
-Advertisement-
Play Games

Vue3簡介 Vue3是Vue.js的最新版本，於2020年9月18日正式發佈。Vue3相比Vue2有很多改進和優化，包括但不限於： 更快的渲染速度：Vue3通過使用Proxy代理對象和優化虛擬DOM演算法等方式，提高了渲染性能。 更小的體積：Vue3的體積比Vue2更小，打包後的文件更小，載入速度更 ...


Vue3簡介

Vue3是Vue.js的最新版本，於2020年9月18日正式發佈。Vue3相比Vue2有很多改進和優化，包括但不限於：

  1. 更快的渲染速度：Vue3通過使用Proxy代理對象和優化虛擬DOM演算法等方式，提高了渲染性能。

  2. 更小的體積：Vue3的體積比Vue2更小，打包後的文件更小，載入速度更快。

  3. 更好的類型支持：Vue3對TypeScript的支持更加友好，提供了更好的類型支持。

  4. 更好的組合式API：Vue3提供了更好的組合式API，使得組件的復用和維護更加方便。

  5. 更好的Tree-shaking支持：Vue3對Tree-shaking的支持更加完善，可以更好地優化打包後的代碼。

總之，Vue3是一個更加優秀的版本，可以幫助開發者更好地構建高性能、易維護的Web應用程式。

Vue API風格

Vue API風格主要有兩種：對象風格和函數風格。

  1. 對象風格

對象風格是Vue 2.x版本的API風格，它將Vue實例作為一個對象，通過對象的屬性和方法來操作Vue實例。例如：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    showMessage: function () {
      alert(this.message)
    }
  }
})
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的代碼中，我們使用對象風格的API來創建Vue實例，設置數據和方法，並通過vm對象來操作Vue實例。

  1. 函數風格

函數風格是Vue 3.x版本的API風格，它將Vue實例作為一個函數，通過函數的參數和返回值來操作Vue實例。例如：

import { createApp } from 'vue'
​
const app = createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
})
​
const vm = app.mount('#app')
​
vm.message = 'Hello World!'
vm.showMessage()

在上面的代碼中，我們使用函數風格的API來創建Vue實例，設置數據和方法，並通過app.mount()方法來掛載Vue實例，然後通過vm對象來操作Vue實例。

總的來說，函數風格的API更加簡潔和易於理解，而且更加符合現代JavaScript的編程風格。因此，Vue 3.x版本的API採用了函數風格。

Vue3開發前的準備

在開始使用Vue3進行開發之前，需要進行以下準備工作：

  1. 安裝Node.js和npm

Vue3需要Node.js和npm的支持，因此需要先安裝它們。可以在Node.js官網下載對應版本的安裝包進行安裝。

  1. 安裝Vue CLI

Vue CLI是Vue.js官方提供的腳手架工具，可以幫助我們快速創建Vue項目。可以使用以下命令全局安裝Vue CLI：

npm install -g @vue/cli

  1. 選擇編輯器

選擇一個適合自己的編輯器進行開發，推薦使用Visual Studio Code，它有很多Vue相關的插件和工具。

  1. 學習Vue基礎知識

在使用Vue3進行開發之前，需要先掌握Vue的基礎知識，包括Vue的核心概念、Vue組件、Vue指令、Vue生命周期等。

  1. 學習TypeScript

Vue3使用TypeScript進行開發，因此需要先學習TypeScript的基礎知識，包括TypeScript的數據類型、介面、類、泛型等。

總的來說，學習Vue3需要一定的前置知識，需要掌握Node.js、npm、Vue CLI、編輯器、Vue基礎知識和TypeScript等知識點。

vue3 項目目錄結構

Vue3項目的目錄結構與Vue2有些不同，主要是因為Vue3使用了新的模塊化系統和TypeScript語言。

以下是一個Vue3項目的典型目錄結構：

├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.ts
├── tests
├── node_modules
├── package.json
├── tsconfig.json
└── README.md

  • public：存放靜態資源文件，如HTML文件、圖片、圖標等。

  • src：存放源代碼文件。

    • assets：存放靜態資源文件，如CSS、圖片、字體等。

    • components：存放Vue組件文件。

    • router：存放Vue Router路由文件。

    • store：存放Vuex狀態管理文件。

    • utils：存放工具函數文件。

    • views：存放頁面組件文件。

    • App.vue：根組件文件。

    • main.ts：入口文件，包括Vue實例的創建和掛載等。

  • tests：存放測試文件。

  • node_modules：存放項目依賴的第三方庫。

  • package.json：存放項目的配置信息和依賴庫信息。

  • tsconfig.json：存放TypeScript編譯器的配置信息。

  • README.md：項目說明文件。

總的來說，Vue3項目的目錄結構與Vue2有些不同，但是基本的結構還是相似的，包括靜態資源文件、源代碼文件、測試文件、依賴庫信息等。

vue3 模板語法

Vue3的模板語法與Vue2的模板語法基本相同，但也有一些變化。以下是Vue3的模板語法：

  1. 插值表達式

Vue3的插值表達式使用{{}}，例如：

<div>{{ message }}</div>

  1. 指令

Vue3的指令使用v-首碼，例如：

<input v-model="message">

常用的指令包括：

  • v-if：條件渲染。

  • v-for：迴圈渲染。

  • v-bind：綁定屬性。

  • v-on：綁定事件。

  • v-model：雙向綁定。

  1. 計算屬性

Vue3的計算屬性使用computed關鍵字，例如：

<template>
  <div>{{ reversedMessage }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

  1. 監聽器

Vue3的監聽器使用watch關鍵字，例如：

<template>
  <div>{{ message }}</div>
</template>
​
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

  1. 生命周期

Vue3的生命周期與Vue2基本相同，但是使用了新的API。例如：

<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'
​
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
    onUpdated(() => {
      console.log('updated')
    })
    onUnmounted(() => {
      console.log('unmounted')
    })
  }
}
</script>

總的來說，Vue3的模板語法與Vue2基本相同，但是使用了新的API，包括computed、watch和生命周期等。

vue3 屬性綁定

在Vue3中，屬性綁定使用v-bind:或簡寫的:，例如：

<template>
  <div :class="className"></div>
</template>
​
<script>
export default {
  data() {
    return {
      className: 'red'
    }
  }
}
</script>

上面的代碼中，:class綁定了一個名為className的data屬性，這個屬性的值為'red'，所以<div>元素會被添加一個class屬性，值為'red'。

除了綁定data屬性，還可以綁定表達式、計算屬性、甚至是方法的返回值。例如：

<template>
  <div :class="isActive ? 'active' : 'inactive'"></div>
  <div :class="getClass()"></div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    getClass() {
      return this.isActive ? 'active' : 'inactive'
    }
  }
}
</script>

上面的代碼中，:class綁定了一個三元表達式和一個方法的返回值，這兩個值都可以被作為class屬性的值。

需要註意的是，在Vue3中，綁定屬性時，可以使用v-bind:或簡寫的:，但是在綁定事件時，必須使用v-on:或簡寫的@。例如：

<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

上面的代碼中，@click綁定了一個handleClick方法，這個方法會在按鈕被點擊時被調用。

vue3 條件渲染

Vue3中的條件渲染和Vue2類似，使用v-if和v-else指令來控制元素的顯示和隱藏。

示例代碼如下：

<template>
  <div>
    <div v-if="show">顯示內容</div>
    <div v-else>隱藏內容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

上面的代碼中，根據show的值來決定顯示哪個<div>元素。

除了v-if和v-else，還有v-else-if可以用來實現多個條件的判斷。

示例代碼如下：

<template>
  <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>未知類型</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      type: 'B'
    }
  }
}
</script>

上面的代碼中，根據type的值來決定顯示哪個<div>元素。

需要註意的是，v-if是惰性的，只有當條件為真時才會渲染元素，否則不會渲染。而v-show則是直接控制元素的顯示和隱藏，不管條件是否為真，元素都會被渲染，只是樣式被設置為display: none。

vue3 列表渲染

Vue3中的列表渲染和Vue2類似，使用v-for指令來遍曆數組或對象，並生成對應的元素。

示例代碼如下：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>

上面的代碼中，使用v-for指令遍歷list數組，並生成對應的<li>元素。

除了數組，也可以遍歷對象，例如：

<template>
  <ul>
    <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>
​
<script>
export default {
  data() {
    return {
      obj: {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
      }
    }
  }
}
</script>

上面的代碼中，使用v-for指令遍歷obj對象，並生成對應的<li>元素。

需要註意的是，每個v-for都需要指定一個唯一的key屬性，用來標識每個元素的唯一性，以便在更新時能夠正確地識別每個元素。

vue3 通過key管理狀態

在Vue3中，通過key屬性可以管理組件或元素的狀態。當一個組件或元素的key屬性發生變化時，Vue會認為它是一個不同的組件或元素，從而重新渲染它。

示例代碼如下：

<template>
  <div>
    <button @click="toggle">切換</button>
    <div v-if="show" :key="1">顯示內容</div>
    <div v-else :key="2">隱藏內容</div>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

上面的代碼中，使用key屬性來管理<div>元素的狀態。當show變數的值發生變化時，<div>元素的key屬性也會發生變化，從而重新渲染<div>元素。

需要註意的是，key屬性的值必須是唯一的，不能重覆。如果重覆了，會導致Vue無法正確地識別每個組件或元素的狀態，從而導致渲染錯誤。

vue3 事件處理

在Vue3中，事件處理的方式與Vue2相似，可以使用@或v-on指令來綁定事件。不同之處在於，Vue3中取消了.sync修飾符，同時提供了新的修飾符和事件API。

  1. 綁定事件

可以使用@或v-on指令來綁定事件，語法與Vue2相同。示例如下：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的代碼中，使用@click指令來綁定handleClick方法，當按鈕被點擊時，會觸發handleClick方法。

  1. 事件修飾符

Vue3中提供了新的事件修飾符，包括.stop、.prevent、.capture、.self、.once和.passive。示例如下：

<template>
  <div @click.stop="handleClick">Click me</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Div clicked!')
    }
  }
}
</script>

上面的代碼中，使用.stop修飾符來阻止事件冒泡，當div元素被點擊時，不會觸發其父元素的點擊事件。

  1. 動態事件名

在Vue3中，可以使用方括弧來綁定動態事件名。示例如下：

<template>
  <button @[eventName]="handleClick">Click me</button>
</template>
​
<script>
export default {
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

上面的代碼中，使用@[eventName]指令來綁定動態事件名，事件名為eventName的值。

  1. 自定義事件

在Vue3中，可以使用createApp方法的provide和inject選項來實現自定義事件的傳遞。示例如下：

// App.vue
<template>
  <button @click="handleClick">Click me</button>
</template>
​
<script>
import { provide } from 'vue'
import EventBus from './EventBus'
​
export default {
  setup() {
    provide('eventBus', EventBus)
  },
  methods: {
    handleClick() {
      EventBus.emit('customEvent', 'Hello, Vue3!')
    }
  }
}
</script>
​
// EventBus.js
import mitt from 'mitt'
​
const EventBus = mitt()
​
export default EventBus
​
// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>
​
<script>
import { inject } from 'vue'
​
export default {
  setup() {
    const eventBus = inject('eventBus')
    const message = ref('')
​
    eventBus.on('customEvent', (data) => {
      message.value = data
    })
​
    return {
      message
    }
  }
}
</script>

上面的代碼中，使用provide方法將事件匯流排對象EventBus註入到根組件中，然後在子組件中使用inject方法獲取事件匯流排對象，並通過on方法監聽自定義事件customEvent，當事件觸發時，更新message的值。

vue3 事件傳參

在Vue3中，事件傳參的方式和Vue2基本相同，可以使用$event來傳遞事件對象，也可以使用函數來傳遞自定義參數。

示例代碼如下：

<template>
  <div>
    <button @click="handleClick($event, '參數')">點擊</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(event, arg) {
      console.log(event) // 輸出事件對象
      console.log(arg) // 輸出自定義參數
    }
  }
}
</script>

上面的代碼中，使用$event來傳遞事件對象，使用'參數'來傳遞自定義參數。

另外，如果需要在事件處理函數中訪問組件實例，可以使用箭頭函數來綁定作用域，例如：

<template>
  <div>
    <button @click="() => handleClick('參數')">點擊</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick(arg) {
      console.log(this) // 輸出組件實例
      console.log(arg) // 輸出自定義參數
    }
  }
}
</script>

上面的代碼中，使用箭頭函數來綁定作用域，從而在事件處理函數中訪問組件實例。

vue3 事件修飾符

在Vue3中，事件修飾符的使用方式和Vue2基本相同，可以通過在事件名後面添加.修飾符的方式來使用事件修飾符。

常用的事件修飾符包括：

  • .stop：阻止事件冒泡

  • .prevent：阻止事件預設行為

  • .capture：使用事件捕獲模式

  • .self：只在事件目標自身觸發時觸發事件

  • .once：只觸發一次事件

  • .passive：告訴瀏覽器該事件不會調用preventDefault()方法，可以優化頁面滾動性能

示例代碼如下：

<template>
  <div>
    <button @click.stop="handleClick">點擊</button>
    <a href="#" @click.prevent="handleClick">鏈接</a>
    <div @click.capture="handleClick">容器</div>
    <button @click.self="handleClick">點擊</button>
    <button @click.once="handleClick">點擊</button>
    <div @scroll.passive="handleScroll">滾動</div>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleClick() {
      console.log('點擊事件')
    },
    handleScroll() {
      console.log('滾動事件')
    }
  }
}
</script>

上面的代碼中，使用不同的事件修飾符來控制事件的行為。例如，使用.stop修飾符來阻止事件冒泡，使用.prevent修飾符來阻止事件預設行為，使用.capture修飾符來使用事件捕獲模式，使用.self修飾符來只在事件目標自身觸發時觸發事件，使用.once修飾符來只觸發一次事件，使用.passive修飾符來告訴瀏覽器該事件不會調用preventDefault()方法，可以優化頁面滾動性能。

vue3 計算屬性

在Vue3中，計算屬性的使用方式和Vue2基本相同，可以通過在組件的computed選項中定義計算屬性來計算和緩存值。

示例代碼如下：

<template>
  <div>
    <p>商品數量：{{ quantity }}</p>
    <p>商品總價：{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return this.price * this.count
    }
  }
}
</script>

上面的代碼中，使用computed選項來定義計算屬性quantity和totalPrice，分別計算商品數量和商品總價。

在模板中，可以像訪問普通屬性一樣訪問計算屬性，例如{{ quantity }}和{{ totalPrice }}。

需要註意的是，在Vue3中，計算屬性的返回值可以是一個函數，這樣可以實現動態計算屬性。示例代碼如下：

<template>
  <div>
    <p>商品數量：{{ quantity }}</p>
    <p>商品總價：{{ totalPrice }}</p>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      price: 10,
      count: 2,
      discount: 0.8
    }
  },
  computed: {
    quantity() {
      return this.count
    },
    totalPrice() {
      return () => this.price * this.count * this.discount
    }
  }
}
</script>

上面的代碼中，計算屬性totalPrice返回一個函數，這個函數會動態計算商品總價，考慮到折扣可能會變化，因此需要動態計算商品總價。

vue3 class綁定

在Vue3中，可以使用v-bind:class指令來綁定一個對象或數組來動態地設置一個元素的class屬性。

下麵是使用對象語法綁定class的示例代碼：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}
</script>

上面的代碼中，使用:class指令來綁定一個對象，這個對象的屬性名是class名稱，屬性值是一個布爾值，表示是否應用這個class。在這個示例中，如果isActive為true，則會應用active這個class，如果hasError為true，則會應用text-danger這個class。

下麵是使用數組語法綁定class的示例代碼：

<template>
  <div :class="[isActive ? 'active' : '', errorClass]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      errorClass: 'text-danger'
    }
  }
}
</script>

上面的代碼中，使用:class指令來綁定一個數組，這個數組的元素可以是字元串或對象。如果數組元素是字元串，則表示應用這個class；如果數組元素是對象，則表示應用這個對象中的class。

在這個示例中，如果isActive為true，則會應用active這個class，如果errorClass為text-danger，則會應用text-danger這個class。

需要註意的是，在Vue3中，可以使用動態組件來動態渲染不同的組件，這個功能可以使用<component>元素和is特性來實現。示例代碼如下：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">ComponentA</button>
    <button @click="currentComponent = 'ComponentB'">ComponentB</button>
    <component :is="currentComponent"></component>
  </div>
</template>
​
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
​
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

上面的代碼中，使用<component>元素和is特性來動態渲染不同的組件。在這個示例中，點擊ComponentA按鈕會渲染ComponentA組件，點擊ComponentB按鈕會渲染ComponentB組件。

vue3 style 綁定

在Vue3中，可以使用v-bind指令或簡寫的:來動態綁定樣式。

  1. 綁定單個樣式

可以使用對象語法來綁定單個樣式，對象的屬性名為樣式名，屬性值為樣式值。示例如下：

<template>
  <div :style="{ color: textColor }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red'
    }
  }
}
</script>

上面的代碼中，使用:style指令來綁定color樣式，樣式的值為textColor的值。

  1. 綁定多個樣式

可以使用對象語法來綁定多個樣式，對象的屬性名為樣式名，屬性值為樣式值。示例如下：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

上面的代碼中，使用:style指令來綁定color和fontSize兩個樣式，樣式的值分別為textColor和fontSize的值。

  1. 綁定樣式數組

可以使用數組語法來綁定多個樣式，數組中的元素為樣式對象。示例如下：

<template>
  <div :style="[baseStyles, customStyles]">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'red',
        fontSize: '16px'
      },
      customStyles: {
        fontWeight: 'bold'
      }
    }
  }
}
</script>

上面的代碼中，使用:style指令來綁定baseStyles和customStyles兩個樣式對象，樣式的值為兩個對象的合併結果。

  1. 綁定樣式對象

可以使用計算屬性來動態綁定樣式對象。示例如下：

<template>
  <div :style="computedStyles">Hello, Vue3!</div>
</template>
​
<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

上面的代碼中，使用計算屬性computedStyles來動態綁定樣式對象，樣式的值為計算屬性的返回值。

付費內容，請聯繫本人QQ：1002453261

本文來自博客園，作者：明志德道，轉載請註明原文鏈接：https://www.cnblogs.com/for-easy-fast/p/17462728.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • WePY基本功能及特性介紹
    ## 背景 > base深圳，一年半經驗，找的初級前端崗位，1-3年，投簡歷兩個月只有兩個面試，這是第一個面試 ## 一面 ### 你對html元素是怎麼分類的？ 一開始我愣了一下？搞這麼簡單的問題？？？後面又問面試官你是指的id選擇器這些嗎，，還是display：block,inline-bloc ...
  • VUE路由傳參的實用方式
    本文講解了VUE項目中路由之間的傳值方式，涉及到的方法都是開發時常用的，希望對大家有多幫助。 1. 方式一：使用router-link標簽 1.1 params 傳參 首先定義好路由 const routes = [ { path : ‘/home’ , component : () => impo ...
  • 記錄--純CSS實現一個簡單又不失優雅的步驟條
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 步驟條是一種用於引導用戶按照特定流程完成任務的導航條，在各種分步表單交互場景中廣泛應用。先來看一下幾個主流前端 UI 框架中步驟條組件的樣子： ElementPlus AntDesign OpenTiny iView 我們可以發現，步驟條 ...
  • Webpack 插件實現 CSS 樣式尺寸單位轉換
    # Webpack 插件實現 CSS 樣式尺寸單位轉換 ## 實現方式一 ### 插件代碼 以下是編寫的一個 Webpack 插件，用於將樣式文件中以 rpx 為單位的值轉換為以 px 為單位的值（換算比率為 1px=2rpx）： ```javascript const pluginName = " ...
  • 【前端方案】-表格排序列LRU緩存方案
    目標： 排序後的表格列，頁面刷新或者用戶重新登錄後，能夠保持之前的操作排序 完成效果： ![](https://img2023.cnblogs.com/blog/1619281/202306/1619281-20230607121749845-1578551886.gif) 解決方案： 利用loca ...
  • js 函數聲明和函數表達式的執行結果
    // var 定義的變數會進行變數提升，聲明被拿到函數或全局作用域的頂端，並輸出 undefined // 函數聲明也會進行提升，var 的變數提升會覆蓋函數聲明提升 console.log(" 0 ") var fn = function () { console.log("fn0-1") } f ...
  • 「AntV」X6開發實踐：踩過的坑與解決方案
    長期更新版文檔請移步語雀([「AntV」X6開發實踐：踩過的坑與解決方案 (yuque.com)](https://www.yuque.com/sxd_panda/antv/x6)) ## 🖼️ | 如何自定義拖拽源？ > 相信你們在開發中更多的需求是需要自定義拖拽源，畢竟自定義的功能擴展性高一些 ...
  • JS基礎語法(一)
    在 Vue2.0中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM元素進行底層操作，這時候就會用到自定義指令。你可以將一些 css樣式抽象到指令中，也可以將一些 js 操作放到指令中去執行。就使用上來說，指令不用像組件一樣需要引入和註冊，註冊後使用非常簡潔方便。對於在項目... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類