专栏首页达达前端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

官网

效果

表示成功

// 淘宝镜像
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/

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • failure load of Component-preload.js will NOT prevent application loading

    Suppose your application could not be opened when tile is clicked in launchpad, ...

    Jerry Wang
  • 如何写出让同事膜拜的漂亮代码?

    “代码千万行,注释第一行;编程不规范,同事两行泪”;"道路千万条,安全第一条。代码不规范,亲人两行泪。"在技术圈广为盛传,可见代码不规范让程序员们是多么的头痛。...

    Java技术栈
  • apidoc实现API文档自动生成

    现在越来越流行前后端分离,使得前后端解耦。前后端的联系来源于数据接口,所以后端每次实现数据接口后都需要给前端写API接口文档,但是每次手写API...

    逆月翎
  • Django打造大型企业官网(二) 三、项目环境搭建

    zhang_derek
  • Django打造大型企业官网(一) 一、nvm的安装二、gulp的安装和用法

             C:\Users\Administrator\AppData\Roaming\nvm

    zhang_derek
  • 基于ARKit的iOS无限屏实现,还原锤子发布会效果

    通过在越狱环境下修改SpringBoard.app,实现了一个iOS桌面的无限屏模式!

    iOSSir
  • 将JavaScript代码转换为漂亮的SVG流程图——js2flowchart

    js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释...

    IT大咖说
  • 【DP、双指针】647. Palindromic Substrings

    Given a string, your task is to count how many palindromic substrings in this st...

    echobingo
  • ExtAnalysis:一款浏览器插件安全分析框架

    ExtAnalysis是一款功能较为强大的浏览器插件安全分析框架,在它的帮助下,我们可以干这些事情:

    FB客服
  • 编程小知识之 Lua split 函数

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户2615200

扫码关注云+社区

领取腾讯云代金券