Gỡ cài đặt bootstrap vue

Question

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

Làm thôi

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

<template>
    <div class="hello">
    {{ count }}
        <div class="box p-4" >   
            <div class="form-group ml-5 mr-5 row">
                <div class="col-10"> 
                    <input class="form-control" autofocus 
                        v-model.trim="newTodo" 
                        @keyup.enter="Add"  
                        placeholder="Nhập việc cần làm và ấn Enter để thêm"> 
                div>
                <div class="col-2"> 
                    <button @click="Add" class="btn btn-primary">
                        Add task
                    button>
                div>
            div>
            <div>
                <table class="mt-3 listTodo">  
                    <p v-if="toDos.length <= 0"> 
                        Danh sách trống 
                    p>
                    <tr v-for="item in toDos" 
                        :key="item.id" 
                        :class="{completed: item.completed}">
                        <td>
                            <input 
                              class="mark" 
                              type="checkbox"
                              v-model="item.completed"> 
                            <span class="checkmark">
                            span>
                        td>
                        <td>
                            <div class="ok"> 
                                <label @click="edit(item)"> 
                                    {{ item.title | capitalize }} 
                                label>
                                <input v-if="editting == item && item.completed!=true" 
                                    v-model="item.title" 
                                    :class="{}"
                                    @keyup.escape="doneEdit"
                                    @keyup.enter="doneEdit"
                                >
                            div>
                        td>
                        <td width="20%">
                            <a @click="Delete(item)" 
                              title="Xóa" 
                              class="delete badge badge-danger"
                            >
                               x
                            a> 
                        td>
                    tr>
                table> 
                <div class="m-5 text-left" >
                    <b> Bạn có {{ allTasks }} task b>
                    <span class="badge badge-warning">
                        Task còn lại: {{ notDone }} 
                    span> 
                    <span class="badge badge-success"> 
                        Task đã xong: {{ Done }} 
                    span> 
                div>
            div> 
        div>
        <br>
        <span> Click vào task để sửa, ấn Enter để submit span>
    div>
template>

script

<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

1

Quan 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

2

Bà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

7

PHẠ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

Vue. js - Thực hành tạo một ứng dụng Todo List đơn giản với Vue. js và VueX

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é.

nghe nói yarn ổn định và tốc độ hơn npm ). OK, nhấn enter để tiếp tục cài đặt nào --- Constructor directory thì mình đã giới thiệu như bài viết về Component của mình. https. //viblo. asia/p/vuejs-component-ly-thuyet-va-cach-su-dung-Eb85oLbOK2G Tuy nhiên chúng ta sẽ cài đặt thêm VueX để quản lý trạng thái chung cho ứng dụng. .

npm install vue bootstrap-vue bootstrap

1

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

Làm thôi

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

<template>
    <div class="hello">
    {{ count }}
        <div class="box p-4" >   
            <div class="form-group ml-5 mr-5 row">
                <div class="col-10"> 
                    <input class="form-control" autofocus 
                        v-model.trim="newTodo" 
                        @keyup.enter="Add"  
                        placeholder="Nhập việc cần làm và ấn Enter để thêm"> 
                div>
                <div class="col-2"> 
                    <button @click="Add" class="btn btn-primary">
                        Add task
                    button>
                div>
            div>
            <div>
                <table class="mt-3 listTodo">  
                    <p v-if="toDos.length <= 0"> 
                        Danh sách trống 
                    p>
                    <tr v-for="item in toDos" 
                        :key="item.id" 
                        :class="{completed: item.completed}">
                        <td>
                            <input 
                              class="mark" 
                              type="checkbox"
                              v-model="item.completed"> 
                            <span class="checkmark">
                            span>
                        td>
                        <td>
                            <div class="ok"> 
                                <label @click="edit(item)"> 
                                    {{ item.title | capitalize }} 
                                label>
                                <input v-if="editting == item && item.completed!=true" 
                                    v-model="item.title" 
                                    :class="{}"
                                    @keyup.escape="doneEdit"
                                    @keyup.enter="doneEdit"
                                >
                            div>
                        td>
                        <td width="20%">
                            <a @click="Delete(item)" 
                              title="Xóa" 
                              class="delete badge badge-danger"
                            >
                               x
                            a> 
                        td>
                    tr>
                table> 
                <div class="m-5 text-left" >
                    <b> Bạn có {{ allTasks }} task b>
                    <span class="badge badge-warning">
                        Task còn lại: {{ notDone }} 
                    span> 
                    <span class="badge badge-success"> 
                        Task đã xong: {{ Done }} 
                    span> 
                div>
            div> 
        div>
        <br>
        <span> Click vào task để sửa, ấn Enter để submit span>
    div>
template>

script

<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

1

Quan 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

2

Bà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

7

Liên kết github. https. //github. com/hieuv-2320/todo-vuejs

Tổng kết

Qua 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

programming bootstrap

Gỡ cài đặt bootstrap vue

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội