Các mẫu và nội suy Vue.js

Vue.js sử dụng một ngôn ngữ tạo khuôn mẫu là một tập hợp siêu HTML. Bất kỳ HTML nào cũng là một mẫu Vue.js hợp lệ và thêm vào đó, Vue.js cung cấp hai thứ mạnh mẽ: nội suy và chỉ thị.

Vue.js sử dụng một ngôn ngữ tạo khuôn mẫu là một tập hợp siêu HTML.

Bất kỳ HTML nào cũng là một mẫu Vue.js hợp lệ và thêm vào đó, Vue.js cung cấp hai thứ mạnh mẽ:phép nội suychỉ thị.

Đây là mẫu Vue.js hợp lệ:

<span>Hello!</span>

Mẫu này có thể được đặt bên trong một thành phần Vue được khai báo rõ ràng:

new Vue({
  template: '<span>Hello!</span>'
})

hoặc nó có thể được đưa vào mộtThành phần tệp đơn:

<template>
  <span>Hello!</span>
</template>

Ví dụ đầu tiên này rất cơ bản. Bước tiếp theo là làm cho nó xuất ra một phần của trạng thái thành phần, chẳng hạn như tên.

Điều này có thể được thực hiện bằng cách sử dụng nội suy. Đầu tiên, chúng tôi thêm một số dữ liệu vào thành phần của mình:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

và sau đó chúng ta có thể thêm nó vào mẫu của mình bằng cú pháp dấu ngoặc kép:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

Một điều thú vị ở đây. Xem cách chúng tôi vừa sử dụngnamethay vìthis.data.name?

Điều này là do Vue.js thực hiện một số liên kết nội bộ và cho phép mẫu sử dụng thuộc tính như thể nó là cục bộ. Khá tiện dụng.

Trong một thành phần tệp duy nhất, đó sẽ là:

<template>
  <span>Hello {{name}}!</span>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

Tôi đã sử dụng một hàm thông thường trong quá trình xuất của mình. Tại sao không phải là một hàm mũi tên?

Điều này là do trongdatachúng tôi có thể cần truy cập một phương thức trong phiên bản thành phần của mình và chúng tôi không thể làm điều đó nếuthiskhông bị ràng buộc với thành phần, vì vậy không thể sử dụng các hàm mũi tên.

Chúng ta có thể sử dụng hàm mũi tên, nhưng sau đó tôi cần nhớ chuyển sang hàm thông thường trong trường hợp tôi sử dụngthis. Tốt hơn là chơi nó an toàn, tôi nghĩ.

Bây giờ, trở lại nội suy.

{{ name }}gợi nhớ về nội suy mẫu Mustache / Handlebars, nhưng nó chỉ là một lời nhắc trực quan.

Trong khi ở những công cụ tạo khuôn mẫu đó, chúng khá “ngu ngốc”, nhưng trong Vue, bạn có thể làm được nhiều hơn thế, nó linh hoạt hơn.

Bạn có thể dùngbất kỳ biểu thức JavaScript nàobên trong các phép nội suy của bạn, nhưng bạn chỉ giới hạn trong một biểu thức:

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue cung cấp quyền truy cập vào một số đối tượng toàn cục bên trong các mẫu, bao gồm Toán học và Ngày tháng, vì vậy bạn có thể sử dụng chúng:

{{ Math.sqrt(16) * Math.random() }}

Tốt nhất là tránh thêm logic phức tạp vào các mẫu, nhưng thực tế Vue cho phép nó mang lại cho chúng ta sự linh hoạt hơn, đặc biệt là khi thử mọi thứ.

Trước tiên, chúng ta có thể thử đặt một biểu thức vào mẫu, sau đó di chuyển biểu thức đó sang một thuộc tính hoặc phương thức được tính toán sau đó.

Giá trị được bao gồm trong bất kỳ phép nội suy nào sẽ được cập nhật khi có sự thay đổi của bất kỳ thuộc tính dữ liệu nào mà nó dựa vào.

Bạn có thể tránh phản ứng này bằng cách sử dụngv-oncechỉ thị.

Kết quả luôn luôn thoát, vì vậy bạn không thể có HTML trong đầu ra.

Nếu bạn cần có một đoạn mã HTML, bạn cần sử dụngv-htmlchỉ thị thay thế.

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


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