vue学习之旅

大前端 > web vue
Created At :
Views 👀 :
  1. 让我们开始vue学习之旅
    1. 我们学习下简单的语法知识
    2. Vuex
      1. Getter
      2. Mutation
      3. Action
      4. 项目结构
      5. 了解模块化使用方式
      6. 参考技术胖vue视频进行学习
      7. 具体参考请直接进入官方学习

让我们开始vue学习之旅

前端技术是IT行业发展相当迅猛的一个分支,特别是移动端的迅猛发展,造就了一批批的原生开发的需求,现在人人基本一部手机在手,各类app层次不穷,社会发展之快,开发者众多,越来越多的能人参加进来进行技术的创新和改造,进一步降低人开发者的开发速度，也进一步缓解了开发者脑门的发量速减.前端技术已经慢慢从电脑端移动到手机端了,多端通用的技术越来越得到开发者和公司的青睐,不仅仅可以减低成本,还可以减少工作量。比如当今的两大巨头,安卓和苹果手机，原生开发都需要招聘两个技术人员，分别是android 和ios开发人员，而今，使用多端技术开发,只需要一个人员就可以进行开发了。大公司纷纷推出自己的多端框架,比如facebookt推荐的react native,google 推出的flutter 都是跨端技术,还是国内阿里巴巴，京东，美团 都在探索大前端的发展,而今，对于我这个原生ios开发工程师来说,未来的竞争力是否会越来越窄呢？
现在已经慢慢感受到这种危机感,企业就是为了赚钱,当你创造价值的能力性价比越来越低的时候,也许你离被辞退不远了,或许是你的发展道路越来窄了。
所以多端技术的学习,势在必行！！！！！
最近打算学习vue,这个是个牛逼的国人开发的一个项目,我们来了解下这个框架.
官方解释

1
2
3
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，
不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链
以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

它在github上已经收到了150k颗星星,可见它受欢迎程度,我们学习肯定要学习有竞争力的技术,这样它的技术迭代还会块,如果我们在使用过程中遇到一些问题,肯定很快就解决了.如果一个技术没什么人学习,你使用了它,然后碰到了问题,而后你又不懂这个框架怎么改,忽然这个作者不维护了，那你起不是需要使用其他的技术进行重构了。
不多说了,让我们先从他们的语法说起呢！

vue知识点总览

点击图片

我们学习下简单的语法知识

  • 我们开始简单创建一个实现,展示 “hello”
    详细请看 demo 源码
    直接绑定变量,到时候渲染的时候就可以直接把变量替换进去了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="app">
      {{ message }}
    </div>

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

  • 我们实现一个简单增加删除功能
    新增：input绑定点击按钮,同时在metods实现这个方法

    1
    2
    3
    4
    <input type="text" placeholder="添加任务" class="edit" autofocus v-model='items.content' @keydown.enter='adaTask()'>

    methods: {
               adaTask(){ }

    删除: 将数组的中对象移除就好

    1
    2
    3
    removeList(index){
    				this.list.splice(index,1);
                }

Vuex

Vuex
每一个 Vuex 应用的核心就是 store（仓库）,”store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)
Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Getter

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: ‘…’, done: true }]

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

1
2
3
4
5
6
7
8
9
10
11
12
  const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Action

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    })

项目结构

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

了解模块化使用方式

https://www.jianshu.com/p/a0c11ae01991
熟练记住
dispatch actions, commit mutations

参考技术胖vue视频进行学习

vue指令
demo学习

参考视频如下:
jspang

具体参考请直接进入官方学习

官方地址

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 337950548@qq.com

💰

©2016-2022 想做个"懒"人

Built with Hexo and 3-hexo theme

×

Help us with donation