Trang Cheat Vue.js

Các lệnh và hướng dẫn phổ biến bạn sẽ sử dụng trong các phiên viết mã Vue.js hàng ngày của mình

Chỉ thị

Chỉ thị là các thuộc tính được xác định bởiv-tiếp đầu ngữ.

Chỉ thị Sự miêu tả
v-text sử dụng thuộc tính làm giá trị văn bản của phần tử
v-html sử dụng thuộc tính làm giá trị văn bản của phần tử, diễn giải HTML
v-if chỉ hiển thị một phần tử nếu điều kiện là đúng
v-else hiển thị một phần tử thay thế nếu phần trướcv-iflà sai
v-else-if thêm một khối if khác cho mộtv-ifxây dựng
v-show tương tự nhưv-if, nhưng thêm phần tử vào DOM ngay cả khi sai. Chỉ cần đặt nó thànhdisplay: none.
v-for lặp qua một mảng hoặc đối tượng có thể lặp lại
v-on nghe các sự kiện DOM
v-bind cập nhật một cách phản ứng một thuộc tính HTML
v-model thiết lập ràng buộc hai chiều cho các đầu vào biểu mẫu. được sử dụng trong các phần tử biểu mẫu, cập nhật mô hình khi người dùng thay đổi giá trị trường biểu mẫu
v-once chỉ áp dụng thuộc tính một lần và không bao giờ làm mới nó ngay cả khi dữ liệu được truyền thay đổi

v-bindv-oncó định dạng viết tắt:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

Ví dụ củav-if/v-else/v-else-if:

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

Điều kiện

Bạn có thể nhúng một điều kiện vào một biểu thức bằng cách sử dụng toán tử bậc ba:

{{ isTrue ? 'yes' : 'no' }}

Làm việc với các phần tử biểu mẫu

Để cập nhật mô hình khi sự kiện thay đổi xảy ra và không phải bất kỳ lúc nào người dùng nhấn phím, bạn có thể sử dụngv-model.lazyThay vì chỉv.model.

Làm việc với các trường đầu vào,v-model.trimhữu ích vì nó tự động loại bỏ khoảng trắng.

Và nếu bạn chấp nhận một số thay vì một chuỗi, hãy đảm bảo rằng bạn sử dụngv-model.number.

Sửa đổi sự kiện

tôi sử dụngclicknhư một ví dụ, nhưng áp dụng cho tất cả các sự kiện có thể xảy ra

  • v-on:click.nativekích hoạt sự kiện DOM gốc thay vì sự kiện Vue
  • v-on:click.stopdừng truyền sự kiện nhấp chuột
  • v-on:click.passivesử dụngtùy chọn thụ động của addEventListener
  • v-on:click.capturesử dụng chụp sự kiện thay vì sự kiện sôi nổi
  • v-on:click.selfđảm bảo rằng sự kiện nhấp chuột không được tạo ra từ sự kiện con mà trực tiếp xảy ra trên phần tử đó
  • v-on:click.oncesự kiện sẽ chỉ được kích hoạt đúng một lần
  • v-on:submit.prevent: gọievent.preventDefault()trên sự kiện gửi được kích hoạt, được sử dụng để tránh gửi biểu mẫu để tải lại trang

Để biết thêm về cách nhân giống, tạo bọt / bắt, hãy xemHướng dẫn sự kiện JavaScript.

Công cụ sửa đổi sự kiện chuột

  • v-on:click .leftchỉ kích hoạt khi nhấp chuột trái
  • v-on:click .rightchỉ kích hoạt khi nhấp vào nút chuột phải
  • v-on:click .middlechỉ kích hoạt khi nhấp vào nút chuột giữa

Chỉ gửi một sự kiện khi một phím cụ thể được nhấn

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

Công cụ sửa đổi sự kiện bàn phím

Chỉ kích hoạt sự kiện nếu một phím bàn phím cụ thể cũng được nhấn:

  • .ctrl
  • .alt
  • .shift
  • .meta(cmd trên Mac, phím windows trên Win)

v-bind

  • v-bind .propràng buộc một chỗ dựa thay vì một thuộc tính
  • v-bind .camelsử dụng camelCase cho tên thuộc tính
  • v-bind .syncmột đường cú pháp mở rộng thành mộtv-ontrình xử lý để cập nhật giá trị ràng buộc. Xemđiều này.

Móc vòng đời

  • beforeCreateđược gọi trước khi ứng dụng được tạo
  • createdđược gọi sau khi ứng dụng được tạo
  • beforeMountđược gọi trước khi ứng dụng được gắn trên DOM
  • mountedđược gọi sau khi ứng dụng được gắn trên DOM
  • beforeDestroyđược gọi trước khi ứng dụng bị hủy
  • destroyedđược gọi sau khi ứng dụng bị phá hủy
  • beforeUpdateđược gọi trước khi một thuộc tính được cập nhật
  • updatedđược gọi sau khi một thuộc tính được cập nhật
  • activatedđược gọi khi một thành phần còn tồn tại được kích hoạt
  • deactivatedđược gọi khi một thành phần còn tồn tại bị vô hiệu hóa

Các thành phần tích hợp

Vue cung cấp 5 thành phần tích hợp:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Cấu hình toàn cục của đối tượng Vue

CácVue.configđối tượng có các thuộc tính này, bạn có thể sửa đổi các thuộc tính này khi tạo cá thể:

Bất động sản Sự miêu tả
silent mặc định thành false, nếu đúng thì ngăn chặn nhật ký và cảnh báo
optionMergeStrategies cho phép xác định mộtchiến lược hợp nhất tùy chỉnhcho các tùy chọn
devtools mặc định là true trong quá trình phát triển và false trong sản xuất. Bạn có thể ghi đè các giá trị đó.
errorHandler cho phép thiết lập một chức năng xử lý lỗi. Hữu ích để kết nối Sentry và các dịch vụ tương tự khác
warnHandler cho phép thiết lập chức năng xử lý cảnh báo, tương tự nhưerrorHandler, nhưng để cảnh báo thay vì lỗi
ignoredElements được sử dụng để cho phép Vue bỏ qua các phần tử tùy chỉnh được xác định bên ngoài nó, nhưThành phần Web.
keyCodes cho phép bạn xác định bí danh khóa tùy chỉnh chov-on
performance mặc định thành false. Nếu được đặt thành true, hãy theo dõi hiệu suất của các thành phần Vue trong Browser DevTools.
productionTip mặc định là true. Đặt thành false để tắt cảnh báo “bạn đang ở chế độ phát triển” trong quá trình phát triển trong bảng điều khiển.

Các phương thức của đối tượng Vue

phương pháp Sự miêu tả
Vue.extend cho phép phân lớp đối tượng Vue, để tạo một cấu hình tùy chỉnh
Vue.nextTick xác định lệnh gọi lại sẽ được thực thi sau chu kỳ cập nhật DOM tiếp theo
Vue.set thêm một thuộc tính vào đối tượng
Vue.delete xóa một thuộc tính khỏi đối tượng
Vue.directive đặt (hoặc lấy) một chỉ thị toàn cục
Vue.filter đặt (hoặc lấy) một bộ lọc chung
Vue.component đặt (hoặc lấy) một thành phần chung
Vue.use cài đặt một plugin Vue.js
Vue.mixin thiết lập một hỗn hợp toàn cầu
Vue.compile biên dịch một chuỗi mẫu thành một hàm kết xuất
Vue.version trả về phiên bản Vue hiện được cài đặt

Các tùy chọn được chuyển đến một đối tượng Vue

Khi khởi tạo một đối tượng Vue, bạn truyền vào một đối tượng:

const vm = new Vue({

})

Đối tượng này chấp nhận một số thuộc tính.

Bất động sản Sự miêu tả
data cho phép chuyển một tập hợp dữ liệu phản ứng sẽ được ứng dụng Vue sử dụng. Tất cả các thuộc tính phản ứng phải được thêm vào lúc khởi tạo, bạn không thể thêm các thuộc tính mới sau này.
props đó là một tập hợp các thuộc tính được hiển thị với các thành phần mẹ làm dữ liệu đầu vào.
propsData dữ liệu mặc định cho đạo cụ. Chỉ hữu ích trong quá trình thử nghiệm
methods một tập hợp các phương thức được xác định trên phiên bản Vue
computed như các phương thức, nhưng được lưu trong bộ nhớ cache nội bộ
watch cho phép xem các thuộc tính và gọi một hàm khi chúng thay đổi

Ví dụ về xác định dữ liệu, phương thức và thuộc tính được tính toán:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • elđặt phần tử DOM nơi phiên bản gắn kết. Nó có thể là Bộ chọn CSS hoặc HTMLElement
  • templatelà một mẫu, được biểu diễn dưới dạng một chuỗi, sẽ thay thế phần tử được gắn kết
  • rendercách khác để xác định mẫu, bạn có thể xác định mẫu bằng cách sử dụng chức năng kết xuất
  • renderErrorđặt một đầu ra thay thế khi hàm được gắn vàorenderthất bại

Nội dung ví dụ Vue

  • directivestập hợp các lệnh để liên kết với thể hiện Vue
  • filterstập hợp các bộ lọc để liên kết với phiên bản Vue
  • componentstập hợp các thành phần để liên kết với thể hiện Vue

Tùy chọn thành phần Vue

  • parentchỉ định phiên bản gốc
  • mixinsthiết lập một mảng các đối tượng mixin
  • extendsmở rộng thành phần khác

Các tùy chọn đối tượng Vue khác

  • nameđặt tên cho thành phần cho phép bạn gọi nó, hữu ích trong việc gỡ lỗi hoặc khi bạn cần thêm đệ quy một thành phần trong mẫu của nó
  • functionalnếu đúng, hãy đặt thành phần là không trạng thái (khôngdata) và instanceless (khôngthis), làm cho nó nhẹ hơn
  • modelcho phép tùy chỉnh thuộc tính được sử dụng trong các sự kiện, hữu ích, chẳng hạn như khi tương tác với biểu mẫu
  • commentsmặc định thành false. Nếu được đặt thành true, hãy giữ lại các nhận xét HTML được đưa vào các mẫu

Thuộc tính phiên bản

Cho một thể hiện của Vue, được lưu trữ thành một biếnconst vm = new Vue(/*...*/), bạn có thể kiểm tra và tương tác với nó.

Thuộc tính của một phiên bản Vue

  • vm.$datađối tượng dữ liệu được liên kết với phiên bản
  • vm.$propsđạo cụ mà phiên bản đã nhận được
  • vm.$elphần tử DOM mà phiên bản được liên kết với
  • vm.$optionsđối tượng được sử dụng để khởi tạo thể hiện Vue
  • vm.$parentcá thể mẹ
  • vm.$rootcá thể gốc (nếu đây là cá thể gốc, nó trỏ đến chính nó)
  • vm.$childrenmột loạt các trường hợp trẻ em
  • vm.$slotsmột mảng các vị trí được liên kết có trong mẫu
  • vm.$scopedSlotsmột mảng các vị trí có phạm vi liên quan
  • vm.$refsmột đối tượng có chứa một thuộc tính cho mỗi phần tử được trỏ bởi mộtrefthuộc tính được xác định trong mẫu
  • vm.$isServertrue nếu phiên bản Vue đang chạy trên máy chủ (hữu ích trong kết xuất phía máy chủ)
  • vm.$attrsmột đối tượng thuộc tính được cung cấp cho thành phần nhưng không được định nghĩa là đạo cụ
  • vm.$listenersmột đối tượng củav-ontrình nghe sự kiện được chỉ định cho thành phần

Dữ liệu phương pháp

  • vm.$watchthiết lập một trình theo dõi các thay đổi thuộc tính trong dữ liệu Vue. Nó cũng có thể theo dõi các thay đổi giá trị bên trong các đối tượng
  • vm.$setthiết lập một tài sản
  • vm.$deletexóa một tài sản

Sự kiện

  • vm.$emitkích hoạt một sự kiện tùy chỉnh trênvmVue instance
  • vm.$onlắng nghe một sự kiện tùy chỉnh trênvmVue instance
  • vm.$oncegiống$on, nhưng chỉ nghe một lần
  • vm.$offloại bỏ một trình nghe sự kiện khỏi phiên bản Vue

Phương pháp vòng đời

  • vm.$mountgắn kết một phiên bản Vue trên một phần tử DOM, trong trường hợp nó chưa được gắn kết
  • vm.$forceUpdatebuộcvmVue instance để kết xuất lại. Không buộc các thành phần con phải kết xuất.
  • vm.$nextTickchấp nhận một cuộc gọi lại và lên lịch cho chu kỳ cập nhật DOM tiếp theo
  • vm.$destroyhủy ứng dụng và xóa tất cả các thành phần con, trình quan sát và người nghe

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: