Web前端-Vue.js必備框架（五）

Web前端-Vue.js必備框架（五）

頁面組件，商品列表組件，詳情組件，購物車清單組件，結算頁組件，訂單詳情組件，訂單列表組件。

vue-router 路由
vuex 組件集中管理
webpack
vue-cli

node下載：

http://nodejs.cn/

node-v
使用vue-cli腳手架搭建項目

vue+webpack+es6

https://github.com/vuejs/vue-cli

// 全局下載工具
npm install -g vue-cli
// 下載基於webpack模板項目
vue init webpack Smartisan
cd Smartisan
// 下載項目依賴的所有模塊
npm install
npm run dev

// 淘寶鏡像
cnpm install -g vue-cli

vue init webpack Smartisan

// 進入項目
cd Smartisan
// 運行我們的項目
npm run dev

cnpm install vuex --save

npm install vuex --save

引入Vuex，它是為vue開發的狀態管理模式，採用集中式存儲管理應用的所有組件的狀態，以相應的規則保證狀態以一種可預測的方式發生變化。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    pjtnews: 0,
    count: 1
}

const mutations = {
    add(state) {
        state.count += 1;
    },
    reduce(state) {
        state.count -= 1;
    }
}
export default new Vuex.Store({
    state,
    mutations
});

計算屬性

computed數據緩存，響應式的數據類型，減少模板中計算邏輯，依賴固定的數據類型。

<div>
 <p> {{ reversedMessage1 }} </p>
 <p> {{ reversedMessage2 }} </p>
 <p> {{ now }} </p>
 <button @click="() => $forceUpdate()">update</button>
 <br/>
 <input v-model="message"/>
</div>

<script>
export default {
 data() {
  return {
   message: "hello"
  };
 },
 computed: {
  reversedMessage1: function() {
   return this.message.split("").reverse().join("");
  },
  now: function() {
   return Date.now();
  }
 },
 methods: {
   reversedMessage2: function() {
    return this.message.split("").reverse().join("");
   }
 }
}

偵聽器watch中可以執行任何邏輯。

<temlate>
 <div>
  {{ $data }}
  <br/>
  <button @click="() => ( a += 1 )">a+1</button>
  </div>
<template
<script>
export default() {
 data: function() {
  return {
   a: 1,
   b: { c: 2, d: 3 },
   c: {
     f: {
      g: 4
     }
   },
    h: []
  };
 },
 watch: {
  a: function(val, oldVal){
   this.b.c += 1;
   }
 }
}

// computed watch
computed: {
 add: function() {
   ...
 }
},
watch: {
add: function(val, oldVal) {
 
}
}

// watch
watch: {
 firstName: function(val) {
  this.fullName = val + " " + this.lastName;
 },
 lastName: function(val) {
  this.fullName = this.firstName + " " + val;
 }
}

生命周期

創建階段：

beforeCreate created beforeMount -> render mounted

更新階段：

beforeUpdate -> render updated

銷毀階段：

beforeDestory destroyed

創建階段
beforeCreate
created
beforeMount
render
mounted

更新階段，多次執行
beforeUpdate $forceUpdate
render
updated

銷毀階段：

beforeDestory
destroyed

data
created
beforeMount
render
mounted

updated
beforeUpdate
render
updated
beforeDestory
destroyed

函數式組件：

functional: true

無狀態，無實例，沒有生命周期，沒有this上下文。

指令：

v-text
v-html
v-if
v-else
v-else-if
v-show
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

bind
inserted
update
componentUpdated
unbind

vuex是一個專門為vue.js應用程式開發的狀態管理模式。

狀態管理模式：

new Vue({
 // state
 data() {
  return {
   count: 0
  }
 },
 // view
 template: `<div>{{ count }}<div>`,
 // actions
 methods: {
  increment() {
   this.count ++;
  }
 }
})

// store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')

console.log(store.state.count) // -> 1

State
Getter
Mutation
Action
Module

文檔：

https://vuex.vuejs.org/zh/

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

作者簡介

達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。