Nếu các bạn muốn sử dụng Sweet Alert trong Vue để thay thế cái alert Mưa chán mặc định của trình duyệt, hãy sử dụng
npm install -S vue-sweetalert2
Bài này mình dùng thêm boostrap nữa. Tiếp theo là câu lệnh để cài đặt boostrap vào
npm install vue bootstrap-vue bootstrap
Tham khảo thêm
- https. //bootstrap-vue. tổ chức/tài liệu,
- https. //www. npmjs. com/gói/vue-sweetalert2
Như vậy chúng ta đã cài đặt các gói cần thiết cho bài này
Trước khi làm ứng dụng này, các bạn nếu mới chỉ đọc bài này hãy dành chút thời gian đọc những bài trước của mình để có những kiến thức cơ bản về Vue. js, Vue-X [state, getters,mutation,actions] phục vụ cho việc thực thi nhé
Đầu tiên bên ngoài các thư mục có sẵn trong thư mục src khi tạo ứng dụng mới. Mọi người hãy thêm vào một thư mục
vue init webpack your_project_name
6 trong src để sử dụng VueX nhé. Store là gì mời mọi người xem lại bài VueX của mình nhé [ https. //viblo. asia/p/vuejs-vuex-su-dung-co-ban-jvElayOdlkw]Bước đầu tiên, bên trong tệp chính. js chúng ta phải import tất cả các module trên [bắt buộc phải import mới sử dụng đc nhé]
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store/store.js' // file này mình tạo ở cuối bài nhé
import VueSweetalert2 from 'vue-sweetalert2'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'sweetalert2/dist/sweetalert2.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use[Vuex]
Vue.config.productionTip = false
Vue.use[VueSweetalert2];
Vue.use[BootstrapVue]
Vue.use[IconsPlugin]
new Vue[{
render: h => h[App],
store
}].$mount['#app']
Mình sẽ tạo ra một Component chứa tất cả các thứ liên quan đến Todo và đặt trong các component có tên là TodoList. vue
{{ count }}
Add task
Danh sách trống
{{ item.title | capitalize }}
x
Bạn có {{ allTasks }} task
Task còn lại: {{ notDone }}
Task đã xong: {{ Done }}
Click vào task để sửa, ấn Enter để submit
- script
const LOCAL_STORAGE_KEY = 'todo-app'
export default {
name: 'ToDoList',
data: function[] {
return {
toDos: this.$store.state.toDos,
newTodo: this.$store.state.newToDo,
editting: this.$store.state.editting
}
},
methods: {
Add [] {
this.$store.dispatch['addTask', this.newTodo]
},
Delete [item] {
this.$swal.fire[{
title: 'are you sure?',
icon: 'warning',
showCancelButton: true
}].then[[result] => {
if[result.isConfirmed] {
this.$store.dispatch['deleteToDo', item]
this.$swal['Done it']
}
}]
},
edit [item] {
this.editting = item;
},
doneEdit [] {
this.$swal['Done']
this.editting = null;
}
},
computed: {
notDone [] {
return this.$store.getters.notDone
},
Done [] {
return this.$store.getters.Done
},
allTasks [] {
return this.$store.getters.allTasks
},
count [] {
return this.$store.getters.count
}
},
filters: {
capitalize: function [value] {
if [!value] return ''
value = value.toString[]
return value.charAt[0].toUpperCase[] + value.slice[1]
}
},
watch: {
toDos: {
deep: true,
handler [newValue] {
localStorage.setItem[LOCAL_STORAGE_KEY, JSON.stringify[newValue]]
}
}
}
}
Bên trong thư mục cửa hàng mình sẽ chia thành các mô-đun tương ứng với các hành động, getter, đột biến và tệp quan trọng nhất là cửa hàng. hành động js
// store/actions.js
export default {
addTask [{commit}, newToDo] {
commit['addTask', newToDo]
},
deleteToDo [{commit}, item] {
commit['deleteToDo', item]
},
doneEdit [{commit}, item] {
commit['doneEdit', item]
}
}
$ npm install -g vue-cli
0$ npm install -g vue-cli
1Quan trọng nhất chúng ta nhập tất cả các mô-đun vào cửa hàng. js
$ npm install -g vue-cli
2Bài này mình đang sử dụng localStorage, các bạn cứ hiểu nó là một kho lưu trữ ngay trên trình duyệt của bạn để khi tải lại trang sẽ không bị mất dữ liệu. Kết quả khi chạy
vue init webpack your_project_name
7PHẠM HIẾU @pviethieu
Theo dõi
2. 2K 92 31
Đã đăng vào ngày 25 tháng 9 năm 2020 8. 45 SA 5 phút đọc
4. 4K
2
3
- Report
- Add to series of me
Bài đăng này đã không được cập nhật trong 2 năm
open start
Loạt series của mình đã giới thiệu và đi qua những kiến thức cơ bản về Vue. js, VueX. Học phải đi đôi với hành động. Hôm nay mình xin được hướng dẫn mọi người tạo app To Do đơn giản như hình bên dưới, kết hợp những kiến thức cơ bản trong series để chúng ta quen với việc sử dụng Vue kết hợp với VueX nhé. No Start nhé.
npm install vue bootstrap-vue bootstrap
1Nếu các bạn muốn sử dụng Sweet Alert trong Vue để thay thế cái alert Mưa chán mặc định của trình duyệt, hãy sử dụng
npm install -S vue-sweetalert2
Bài này mình dùng thêm boostrap nữa. Tiếp theo là câu lệnh để cài đặt boostrap vào
npm install vue bootstrap-vue bootstrap
Tham khảo thêm
- https. //bootstrap-vue. tổ chức/tài liệu,
- https. //www. npmjs. com/gói/vue-sweetalert2
Như vậy chúng ta đã cài đặt các gói cần thiết cho bài này
Trước khi làm ứng dụng này, các bạn nếu mới chỉ đọc bài này hãy dành chút thời gian đọc những bài trước của mình để có những kiến thức cơ bản về Vue. js, Vue-X [state, getters,mutation,actions] phục vụ cho việc thực thi nhé
Đầu tiên bên ngoài các thư mục có sẵn trong thư mục src khi tạo ứng dụng mới. Mọi người hãy thêm vào một thư mục
vue init webpack your_project_name
6 trong src để sử dụng VueX nhé. Store là gì mời mọi người xem lại bài VueX của mình nhé [ https. //viblo. asia/p/vuejs-vuex-su-dung-co-ban-jvElayOdlkw]Bước đầu tiên, bên trong tệp chính. js chúng ta phải import tất cả các module trên [bắt buộc phải import mới sử dụng đc nhé]
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store/store.js' // file này mình tạo ở cuối bài nhé
import VueSweetalert2 from 'vue-sweetalert2'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'sweetalert2/dist/sweetalert2.min.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use[Vuex]
Vue.config.productionTip = false
Vue.use[VueSweetalert2];
Vue.use[BootstrapVue]
Vue.use[IconsPlugin]
new Vue[{
render: h => h[App],
store
}].$mount['#app']
Mình sẽ tạo ra một Component chứa tất cả các thứ liên quan đến Todo và đặt trong các component có tên là TodoList. vue
{{ count }}
Add task
Danh sách trống
{{ item.title | capitalize }}
x
Bạn có {{ allTasks }} task
Task còn lại: {{ notDone }}
Task đã xong: {{ Done }}
Click vào task để sửa, ấn Enter để submit
- script
const LOCAL_STORAGE_KEY = 'todo-app'
export default {
name: 'ToDoList',
data: function[] {
return {
toDos: this.$store.state.toDos,
newTodo: this.$store.state.newToDo,
editting: this.$store.state.editting
}
},
methods: {
Add [] {
this.$store.dispatch['addTask', this.newTodo]
},
Delete [item] {
this.$swal.fire[{
title: 'are you sure?',
icon: 'warning',
showCancelButton: true
}].then[[result] => {
if[result.isConfirmed] {
this.$store.dispatch['deleteToDo', item]
this.$swal['Done it']
}
}]
},
edit [item] {
this.editting = item;
},
doneEdit [] {
this.$swal['Done']
this.editting = null;
}
},
computed: {
notDone [] {
return this.$store.getters.notDone
},
Done [] {
return this.$store.getters.Done
},
allTasks [] {
return this.$store.getters.allTasks
},
count [] {
return this.$store.getters.count
}
},
filters: {
capitalize: function [value] {
if [!value] return ''
value = value.toString[]
return value.charAt[0].toUpperCase[] + value.slice[1]
}
},
watch: {
toDos: {
deep: true,
handler [newValue] {
localStorage.setItem[LOCAL_STORAGE_KEY, JSON.stringify[newValue]]
}
}
}
}
Bên trong thư mục cửa hàng mình sẽ chia thành các mô-đun tương ứng với các hành động, getter, đột biến và tệp quan trọng nhất là cửa hàng. hành động js
// store/actions.js
export default {
addTask [{commit}, newToDo] {
commit['addTask', newToDo]
},
deleteToDo [{commit}, item] {
commit['deleteToDo', item]
},
doneEdit [{commit}, item] {
commit['doneEdit', item]
}
}
$ npm install -g vue-cli
0$ npm install -g vue-cli
1Quan trọng nhất chúng ta nhập tất cả các mô-đun vào cửa hàng. js
$ npm install -g vue-cli
2Bài này mình đang sử dụng localStorage, các bạn cứ hiểu nó là một kho lưu trữ ngay trên trình duyệt của bạn để khi tải lại trang sẽ không bị mất dữ liệu. Kết quả khi chạy
vue init webpack your_project_name
7Liên kết github. https. //github. com/hieuv-2320/todo-vuejs
Tổng kếtQua bài viết này mong mọi người có thể tận hưởng được những kiến thức đã đọc về Vue. js VueX cơ bản trong series của mình để có thể tạo ra một ứng dụng nhỏ , có thể phục vụ việc lưu công việc thường ngày cho mọi người. Mọi người có thể phát triển và sửa đổi lại để bổ sung thêm nhiều chức năng, thực hiện thêm về VueJS để ứng dụng được nó một cách thuần thục nhé. Bài viết và ứng dụng này của mình không tránh khỏi sai sót do mình cũng mới quen với VueJS. Nếu có ý kiến đóng góp, vui lòng để lại phía dưới bình luận nhé. Cảm ơn mọi người đã theo dõi bài viết. Hẹn gặp lại mọi người trong bài viết tới