文章正文

Vue前端技术栈

【文章】2020-04-23

简介Vue前端技术栈

Vue前端技术栈

  • npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。

  • ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。

  • vue-cli:Vue的脚手架工具,用于自动生成Vue项目的及文件。

  • vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。

  • vuex:Vue提供的状态管理工具,用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。

  • element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。

  • Axios                  ajax

  • vue: 一套构建用户界面的渐进式框架。


Vue.js核心概念

1. 数据驱动

2. 双向数据绑定

3. 组件化开发


Vue.js文件认识

包含三大主要部分:模板<template>、脚本<script>、样式<style>

image.png

运行结果:

image.png


备注:

Vue 组件主要内容:

Data(数据),

mounted(挂载完成之后执行的动作),

computed(计算属性),

methods(方法事件)

 

Vuex主要内容:

State                 数据存储器

Actions              动作

Mutations         转变

 

数据闭合环

1.Vue component

    $store.dispatch(‘singal’)

2.vuex actions

    Actions[‘singal’] -> comit(‘sinal’, data)           异步操作

3.Vuex mutations

    Mutations[‘sinal’] -> 把数据放入state          同步操作(数据转换)

4.Vue component

 监听state的变化,重新渲染dom


打赏支持

感谢您的支持,加油!

打开微信扫码打赏,你说多少就多少

找书费时,联系客服快速查找!

扫码支持

在线客服8:30-22:30,若离线请留言!

获取教程,请联系在线客服!

扫码支持

在线客服8:30-22:30,若离线请留言!

热门阅读

找PDF电子书,太费时间?

  • 微信扫描二维码,让客服快速查找。
  • 在线客服8:30-22:30,若离线请留言!

    PDF电子书