主頁 > 企業開發 > Vue3從入門到精通(一)

Vue3從入門到精通(一)

2023-06-08 09:08:59 企業開發

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 :></div>
</template>
?
<script>
export default {
  data() {
    return {
      className: 'red'
    }
  }
}
</script>

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

除了系結data屬性，還可以系結運算式、計算屬性、甚至是方法的回傳值，例如：

<template>
  <div :></div>
  <div :></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 = https://www.cnblogs.com/for-easy-fast/archive/2023/06/07/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="https://www.cnblogs.com/for-easy-fast/archive/2023/06/07/#" @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 :>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 :>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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554606.html

標籤：其他

上一篇：前端 & 設計師常用圖示資源庫

下一篇：返回列表

標籤雲
其他(160577) Python(38215) JavaScript(25484) Java(18209) C(15237) 區塊鏈(8270) C＃(7972) AI(7469) 爪哇(7425) MySQL(7235) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5873) 数组(5741) R(5409) Linux(5347) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4585) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2434) ASP.NET(2403) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) .NET技术(1983) 功能(1967) HtmlCss(1955) Web開發(1951) C++(1933) python-3.x(1918) 弹簧靴(1913) xml(1889) PostgreSQL(1879) .NETCore(1863) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • Vue3從入門到精通(一)

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

    uj5u.com 2023-06-08 09:08:59 more
  • 前端 & 設計師常用圖示資源庫

    # 1. Iconfont * 阿里傾力打造的矢量圖示管理、交流平臺，設計師將圖示上傳到 iconfont 平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖示轉換為字體，便于前端工程師自由調整與呼叫。 * 地址：Iconfont ![](https://img2023.cnblogs.com ......

    uj5u.com 2023-06-08 09:01:50 more
  • 一定要看的前端codeReview規范指南

    一、前言 針對目錄結構、CSS規范、JavaScript規范、Vue規范 可參照官方給出的 [風格指南](https://v2.cn.vuejs.org/v2/style-guide/index.html) 這里主要總結業務開發中常遇到的代碼問題和實踐，幫助大家后續各自做好codeReview，一些 ......

    uj5u.com 2023-06-08 08:50:46 more
  • h5移動端頁面除錯工具Chii與 weinre 一樣的遠程除錯工具

    與 weinre 一樣的遠程除錯工具，主要是將 web inspector 替換為最新的 chrome devtools frontend. 電腦上跑一個chii服務，把對應的js嵌入h5頁面內，用手機訪問h5頁面，chrome內看chii服務地址即可找到對應管理控制臺 安裝 可以通過 npm 安裝 ......

    uj5u.com 2023-06-08 08:50:40 more
  • 使用THREEJS實作一個可調節檔位、可搖頭的電風扇

    夏天到了，用Three.js實作一個可以搖頭和調節檔位的電風扇。主要使用到Blender處理3D模型，用Vite+Typescript搭建專案框架。 ......

    uj5u.com 2023-06-08 08:50:18 more
  • 深圳前端一年半，投了兩個月簡歷，第一場面試

    ## 背景 > base深圳，一年半經驗，找的初級前端崗位，1-3年，投簡歷兩個月只有兩個面試，這是第一個面試 ## 一面 ### 你對html元素是怎么分類的？ 一開始我愣了一下？搞這么簡單的問題？？？后面又問面試官你是指的id選擇器這些嗎，，還是display：block,inline-bloc ......

    uj5u.com 2023-06-08 08:50:03 more
  • Webpack 插件實作 CSS 樣式尺寸單位轉換

    # Webpack 插件實作 CSS 樣式尺寸單位轉換 ## 實作方式一 ### 插件代碼 以下是撰寫的一個 Webpack 插件，用于將樣式檔案中以 rpx 為單位的值轉換為以 px 為單位的值（換算比率為 1px=2rpx）： ```javascript const pluginName = " ......

    uj5u.com 2023-06-08 08:49:59 more
  • 【前端方案】-表格排序列LRU快取方案

    目標： 排序后的表格列，頁面重繪或者用戶重新登錄后，能夠保持之前的操作排序 完成效果： ![](https://img2023.cnblogs.com/blog/1619281/202306/1619281-20230607121749845-1578551886.gif) 解決方案： 利用loca ......

    uj5u.com 2023-06-08 08:44:42 more
  • js 函式宣告和函式運算式的執行結果

    // var 定義的變數會進行變數提升，宣告被拿到函式或全域作用域的頂端，并輸出 undefined // 函式宣告也會進行提升，var 的變數提升會覆寫函式宣告提升 console.log(" 0 ") var fn = function () { console.log("fn0-1") } f ......

    uj5u.com 2023-06-08 08:44:35 more
  • JS基礎語法(一)

    javascript簡介 javascrpit是是一種輕量級的編程語言，常用于web前端開發。另外js還可以用來寫node.js型別的服務和工具，在測驗web專案的時候需要了解。 變數 js定義變數有3種方式：var、const、let，3者的區別： 在 2015 年以前，使用 var 關鍵字來宣告 ......

    uj5u.com 2023-06-08 08:44:31 more

Copyright © 2010-2020 有解無憂