Web前端-Vue.js必备框架

Posted 2021-03-30 达达前端小酒馆

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端-Vue.js必备框架相关的知识，希望对你有一定的参考价值。

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

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 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

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

// 淘宝镜像
cnpm install -g vue-cli
vue init webpack Smartisan

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

// 进入项目
cd Smartisan
// 运行我们的项目
npm run dev

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

cnpm install vuex --save

npm install vuex --save

引入Vuex，它是为vue开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，以相应的规则保证状态以一种可预测的方式发生变化。

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

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 ++;
  }
 }
})

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

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

store.commit('increment')

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