文章正文

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-23:00，若离线请留言！

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

扫码支持

在线客服8:30-23:00，若离线请留言！

热门阅读

支付宝红包，不要错过哦?

    代寻PDF电子书