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#example
phầ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ớidata
vậ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 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:
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.html
tệ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.html
và 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.vue
là 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 ởscript
nhãn.
Chúng tôi nhập khẩu mộtthành phầntừcomponents/HelloWorld.vue
tệ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 xemstyle
nhãn. Nếu nó cóscoped
thuộ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ữ trongdata
thuộ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ữ trongdata
có 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.
Tải xuống miễn phí của tôiSổ tay Vue
Các hướng dẫn vue khác:
- Tổng quan về Vue.js
- Vue.js CLI: tìm hiểu cách sử dụng nó
- Công cụ dành cho nhà phát triển Vue.js
- Cấu hình mã VS để phát triển Vue
- Tạo ứng dụng đầu tiên của bạn với Vue.js
- Các thành phần tệp đơn của Vue.js
- Các mẫu và nội suy Vue.js
- Chỉ thị Vue.js
- Phương thức Vue.js
- Thuộc tính được tính toán của Vue.js
- Tạo kiểu các thành phần Vue.js bằng CSS
- Người theo dõi Vue.js
- Phương thức Vue so với người theo dõi so với thuộc tính được tính
- Bộ lọc Vue.js
- Các thành phần của Vue.js
- Vue.js Slots
- Đạo cụ thành phần Vue.js
- Sự kiện của Vue.js
- Giao tiếp các thành phần Vue.js
- Vuex, Giám đốc Nhà nước Vue.js
- Vue, sử dụng một thành phần bên trong một thành phần khác
- Vue, cách sử dụng một prop làm tên lớp
- Cách sử dụng SCSS với Vue.js Single File Components
- Sử dụng Tailwind với Vue.js
- Bộ định tuyến Vue
- Tự động hiển thị một thành phần Vue
- Trang Cheat Vue.js
- Lưu trữ dữ liệu Vue vào localStorage bằng Vuex
- Cách áp dụng động một lớp bằng Vue
- Vue, cách sử dụng v-model
- Vue, tại sao dữ liệu phải là một hàm
- Roadmap to become a Vue.js developer in 2020