Xây dựng Components trong Vue.js

Lượt xem:1281
Xây dựng Components trong Vue.js

Components trong Vue.js là một phần rất quan trọng trong việc xây dựng Frontend trong ứng dụng, Có nhiều người suy nghĩ rằng khi kết hợp Laravel + Vuejs thì tại sao không dùng Template của Laravel luôn, thật sự mà nói nói khi bạn tạo kết hợp giữa Laravel + Vuejs thì ứng dụng của bạn rất tuyệt vời tốc độ rất nhanh, bố cục phân chia gọn hơn giúp bạn tùy biến template bất cứ nơi đâu bạn muốn, cả bạn có thể viết css cho từng file riêng biệt rất tuyệt vời phải không nào, và còn nhiều hơn thế nữa là bạn có thể gọi Get URL trả về một json trên component và hiển thị dữ liệu lên template, nhưng bạn phải dùng Axios để làm điều này!....

Khi các bạn bắt đầu làm việc với Vuejs đầu biên bạn phải chuẩn bị cài đặt nodejs  trước nhé! Mình khuyên mấy bạn hãy cài đặt bộ thư viện của Vuejs về luôn để làm ứng dụng nhé

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Sau khi các bạn cài đặt xong bạn sẽ thấy project của bạn như thế này

Các bạn sẽ tạo các file trong thư mục component, mặc định component đã cài đặt các router cần thiết cho bạn sao đó bạn gỏ trong cmd: npm run dev

Và bạn gỏ lên trình duyệt https://localhost:8081 để nhận thấy kết quả của mình nhé. Để tạo các file template component bạn vào thư mực component nhé.

giờ chúng ta tạo một file trong thư mục compnent là Tintuc.vue

//Tintuc.vue
<template>
  <nav class="lists">
    <h4>{{title}}</h4>
    <ul>
       <li><a href="#">Framework Nodejs</a></li>
       <li><a href="#">Framework Angualr V4</a></li>
       <li><a href="#">Framework Vuejs</a></li>
       <li><a href="#">Framework React Native</a></li>
    </ul>
   
  </nav>
</template>

<script>
export default {
  data () {
    return {
      title: 'Danh sách Framework mới nhất'
    }
  }
}
</script>
<style>
.lists{
  width: 390px;
  left: 0;
  top: 0px;
  right: 0;
  margin: auto;
  display: block;
}
.lists>ul>li{
  padding: 8px;
  text-align: center;
  background: rgba(0,145,234,1);
  list-style: none;
  width: 300px;
  border-bottom: 1px solid #fff;
}
.lists>ul>li>a{
  color: #fff;
  text-decoration: none;
}
</style>

Các bạn có thể viết code Css trong template và các bạn sẽ nhận ra một điều css trong tuần file bạn sẽ dễ chỉnh sửa hơn sao này, Sau khi bạn tạo file xong bạn import file này vào index.js, file index.js nằm trong thư mục router nhé mấy bạn

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Tintuc from '@/components/Tintuc'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/tintuc',
      name: 'Tintuc',
      component: Tintuc
    }
  ]
})

sao đó bạn chạy câu lệnh: npm run dev bạn sẽ nhìn thấy ứng dụng mình như sau:

Nếu bạn muốn lấy dữ liệu mà các bạn tùy biến, và sao này bạn có thể Get một URL trả về json cũng được nhé mấy bạn, nếu Get URL trả về json thì các bạn phải sử dung Axios nhé:

<script>
export default {
  data () {
    return {
      title: 'Danh sách Framework mới nhất',
      listframework:[]
    }
  },
  created:function(){
   this.load_framework();
  },
  methods:{
     load_framework(){
        var data =[
          "Framework Nodejs",
          "Framework Angular V4",
          "Framework Vuejs",
          "Framework React Native",
          "Framework Laravel 5.6",
          "Framework CodeIngiter"
        ];
        this.listframework=data;
     }
  }

}
</script>

* Nếu bạn không sử dụng tải module Vuejs về mà bạn muốn sài component thì bạn làm như sao, bạn vào thư mực và chạy câu lệnh: npm install vue, sau khi chạy xong bạn sẽ có một thư mục node_modules và bạn sẽ tìm thấy file vue.min.js nằm trong đường dẫn node_modules/vue/dist/vue.min.js bạn import file này vào file component.html để load gọi thư viện vue.

Giờ bạn tạo file component.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta httpss-equiv="X-UA-Compatible" content="IE=edge">
	<title>Component Vuejs</title>
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<style>
	.lists{
  width: 390px;
  left: 0;
  top: 0px;
  right: 0;
  margin: auto;
  display: block;
}
.lists>ul>li{
  padding: 8px;
  text-align: center;
  background: rgba(0,145,234,1);
  list-style: none;
  width: 300px;
  border-bottom: 1px solid #fff;
}
.lists>ul>li>a{
  color: #fff;
  text-decoration: none;
}
	</style>
</head>
<body>
	<div id="app-component">
		<my-list></my-list>
	</div>
	<script type="text/javascript">
	Vue.component('my-list',{
		template:'<nav class="lists"><ul><li v-for="ds in list2"><a href="#">{{ds}}</a></li></ul></nav>',
		data(){
			return{
				list2:[]
			}
		},
		created:function(){
		   this.load_framework();
		  },
		  methods:{
		     load_framework(){
		        var data =[
		          "Framework Nodejs",
		          "Framework Angular V4",
		          "Framework Vuejs",
		          "Framework React Native",
		          "Framework Laravel 5.6",
		          "Framework CodeIngiter"
		        ];
		        this.list2=data;
		     }
		    }
	});
	new Vue({
		el:"#app-component"
	});
</script>
</body>

</html>

Và kết quả như sau:

Các bạn có thể xem thêm tại:https://vuejs.org/v2/guide/components.html

Danh Sách Videos Ngôn Ngữ Lập Trình Danh Sách Tin tức