Tạo ứng dụng đầu tiên của bạn với Vue.js

Nếu bạn chưa từng tạo ứng dụng Vue.js, tôi sẽ hướng dẫn bạn thực hiện nhiệm vụ tạo một ứng dụng và hiểu cách thức hoạt động của nó. Ứng dụng chúng tôi sẽ xây dựng đã hoàn thành và đó là ứng dụng mặc định của Vue CLI

Nếu bạn chưa từng tạo ứng dụng Vue.js, tôi sẽ hướng dẫn bạn thực hiện nhiệm vụ tạo một ứng dụng và hiểu cách thức hoạt động của nó.

Ví dụ đầu tiên

Đầu tiên, tôi sẽ sử dụng ví dụ cơ bản nhất về việc sử dụng Vue.

Bạn tạo một tệp HTML có chứa

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

và bạn mở nó trong trình duyệt. Đó là ứng dụng Vue đầu tiên của bạn! Trang phải hiển thị thông báo “Hello World!” thông điệp.

Tôi đặt các thẻ script ở cuối phần nội dung để chúng được thực thi theo thứ tự sau khi DOM được tải.

Những gì mã này làm là, chúng tôi khởi tạo một ứng dụng Vue mới, được liên kết với#examplephần tử làm mẫu của nó (thường được định nghĩa bằng cách sử dụng bộ chọn CSS, nhưng bạn cũng có thể chuyển vào HTMLElement).

Sau đó, nó liên kết mẫu đó vớidatavật. Đó là một đối tượng đặc biệt lưu trữ dữ liệu mà chúng ta muốn Vue hiển thị.

Trong mẫu, đặc{{ }}thẻ cho biết đó là một số phần của mẫu động và nội dung của nó sẽ được tra cứu trong dữ liệu ứng dụng Vue.

Xem trên Codepen

Bạn có thể xem ví dụ này trên Codepen:https://codepen.io/flaviocopes/pen/YLoLOp

Codepen

Codepen hơi khác so với việc sử dụng tệp HTML thuần túy và bạn cần định cấu hình nó để trỏ đến vị trí thư viện Vue trong cài đặt Pen:

Pen settings

Ví dụ thứ hai: ứng dụng mặc định Vue CLI

Hãy nâng cấp trò chơi một chút. Ứng dụng tiếp theo mà chúng tôi sẽ xây dựng đã hoàn thành và nóứng dụng mặc định Vue CLI.

Vue CLI là gì? Đó là một tiện ích dòng lệnh giúp tăng tốc độ phát triển bằng cách tạo khung ứng dụng cho bạn, với một ứng dụng mẫu tại chỗ.

Có hai cách bạn có thể nhận được ứng dụng này.

Sử dụng Vue CLI cục bộ

Đầu tiên là cài đặtVue CLItrên máy tính của bạn và chạy lệnh

vue create <enter the app name>

Sử dụng CodeSandbox

Một cách đơn giản hơn mà không cần phải cài đặt bất cứ thứ gì là truy cậphttps://codesandbox.io/s/vue.

CodeSandbox là một trình soạn thảo mã thú vị cho phép bạn xây dựng ứng dụng trên đám mây, cho phép bạn sử dụng bất kỳ gói npm nào và cũng dễ dàng tích hợp với Zeit Now để dễ dàng triển khai và GitHub để quản lý việc lập phiên bản.

Liên kết mà tôi đặt ở trên sẽ mở ứng dụng mặc định Vue CLI.

Cho dù bạn chọn sử dụng Vue CLI cục bộ hay thông qua CodeSandbox, hãy kiểm tra chi tiết ứng dụng Vue đó.

Cấu trúc tệp

Bên cạnhpackage.json, chứa cấu hình, đây là các tệp có trong cấu trúc dự án ban đầu:

index.html
src/App.vue
src/main.js
src/assets/logo.png
src/components/HelloWorld.vue

`index.html`

Cácindex.htmltệp là tệp ứng dụng chính.

Trong phần thân, nó chỉ bao gồm một phần tử đơn giản:<div id="app"></div>. Đây là phần tử mà ứng dụng Vue sẽ sử dụng để gắn vào DOM.

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
<title>CodeSandbox Vue</title>
</head>
<body>
<div id=“app”></div>
<!-- built files will be auto injected -->
</body>
</html>

`src/main.js`

Đây là tệp JavaScript chính thúc đẩy ứng dụng của chúng tôi.

Đầu tiên, chúng tôi nhập thư viện Vue và thành phần Ứng dụng từApp.vue.

Chúng tôi đặt productionTip thành false, chỉ để tránh Vue xuất ra “bạn đang ở chế độ phát triển”Trong bảng điều khiển.

Tiếp theo, chúng tôi tạo cá thể Vue, bằng cách gán nó cho phần tử DOM được xác định bởi#app, mà chúng tôi đã xác định trongindex.htmlvà chúng tôi yêu cầu nó sử dụng thành phần Ứng dụng.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
components: { App },
template: ‘<App/>’
})

`src/App.vue`

App.vuelà một Thành phần Tệp Đơn. Nó chứa 3 đoạn mã: HTML, CSS và JavaScript.

Điều này thoạt nghe có vẻ lạ, nhưng Các thành phần Tệp Đơn là một cách tuyệt vời để tạo các thành phần độc lập có tất cả những gì chúng cần trong một tệp duy nhất.

Chúng tôi có đánh dấu, JavaScript sẽ tương tác với nó và kiểu được áp dụng cho nó, có thể được xác định phạm vi hoặc không. Trong trường hợp này, nó không có phạm vi, và nó chỉ xuất ra CSS được áp dụng giống như CSS thông thường cho trang.

Phần thú vị nằm ởscriptnhãn.

Chúng tôi nhập khẩu mộtthành phầntừcomponents/HelloWorld.vuetệp mà chúng tôi sẽ mô tả sau.

Thành phần này sẽ được tham chiếu trong thành phần của chúng tôi. Đó là một sự phụ thuộc. Chúng tôi sẽ xuất mã này:

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

từ thành phần này, mà bạn thấy tham chiếu đến thành phần HelloWorld. Vue sẽ tự động chèn thành phần đó vào bên trong trình giữ chỗ này.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>
<script>
import HelloWorld from ‘./components/HelloWorld’
export default {
name: ‘App’,
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

`src/components/HelloWorld.vue`

Đây là thành phần HelloWorld, được bao gồm bởi thành phần Ứng dụng.

Thành phần này xuất ra một tập hợp các liên kết, cùng với một thông báo.

Hãy nhớ ở trên chúng ta đã nói về CSS trong App.vue, mà không có phạm vi? Thành phần HelloWorld có CSS trong phạm vi.

Bạn có thể dễ dàng xác định nó bằng cách xemstylenhãn. Nếu nó cóscopedthuộc tính, sau đó phạm vi:<style scoped>

Điều này có nghĩa là CSS được tạo sẽ nhắm mục tiêu thành phần duy nhất, thông qua một lớp được Vue áp dụng một cách minh bạch. Bạn không cần phải lo lắng về điều này và bạn biết CSS sẽ khôngrò rỉđến các phần khác của trang.

Thông báo kết quả đầu ra của thành phần được lưu trữ trongdatathuộc tính của đối tượng Vue và được xuất trong mẫu dưới dạng{{ msg }}.

Mọi thứ được lưu trữ trongdatacó thể truy cập trực tiếp trong mẫu thông qua tên riêng của nó. Chúng tôi không cần phải nóidata.msg, chỉmsg.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
name: ‘HelloWorld’,
data() {
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}
</script>
<!-- Add “scoped” attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

Chạy ứng dụng

CodeSandbox có chức năng xem trước thú vị. Bạn có thể chạy ứng dụng và chỉnh sửa bất kỳ thứ gì trong nguồn để nó được phản ánh ngay lập tức trong bản xem trước.

The Vue App

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