资讯专栏INFORMATION COLUMN

Web前端-Vue.js必备框架(五)

Keagan / 2341人阅读

摘要:前端必备框架五页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件。生命周期创建阶段更新阶段销毁阶段创建阶段更新阶段,多次执行销毁阶段函数式组件无状态,无实例,没有生命周期,没有上下文。

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数据缓存,响应式的数据类型,减少模板中计算逻辑,依赖固定的数据类型。

{{ reversedMessage1 }}

{{ reversedMessage2 }}

{{ now }}


阅读需要支付1元查看
<