vue2.0初学后我的总结分享

前端小白入门学习Vue.js，若有不对之处，欢迎指出。若有建议，更是感激涕零，在此谢过！

选择学习vue.js框架的缘由

• 性能显著：MVVM开发模式对于传统MVC性能强不少，随处可见，所以单页面框架学习必不可少

• 相对友好：配置型框架，相比而言Vue不是最好，但对经验不甚丰富的开发者相对友好，暂先选择Vue过渡

• 自我反思：web前端发展的狂暴速度带来的汪洋大海不由让刚入行的小白（我），瑟瑟发抖。能够说只会一些jQuery和原生js，最终会被遗弃而苟且于底层外包公司搬砖讨饭。

再说点战斗力感人的

通过近一个月的业余踩坑学习，vue.js算是迈开了第一步有了初步掌握，也作了个小项目。从vue create project项目构建到npm run build打包上线本地服务器，最终pc和移动端都算是跨过去了。但是用HBuilder打包app，本地自建json文档，不知为什么axios请求不到js形成缺乏数据的问题，嗝屁- -

---

之前总听群友说什么vue全家桶，反正我是听都听不懂！

嘿嘿，学习了vue以后，如今不同了。

虽不是科班出身，但也有一颗坚持的心，跪着也要走玩这条路。 由于乔丹代言耐克说： Just do IT！

我认为的Vue全家桶

我的认为不少官方解释听起来很抽象，第一次听的时候都很难理解，因此经常简化理解

1. vue-cli：做用搭建项目的脚手架
2. vue：相应API基础知识
3. vue-router：路由，链接于各个页面
4. vuex：官方解释vuex是vue提供的vue状态管理工具，词汇很高大上，对于小白的我刚开始确实理解有些吃力。个人理解就是解决父子页面和父子组件之间的参数传递相似于cookie的进化版（说通俗点就是处理数据的）
5. axios：做用是请求获取后端接口数据，像是ajax的兄弟

固然我以为全家桶还能够加点料，我所知的element-ui和vant

浅谈一些我常听知识点

• 生命周期钩子

  刚开始很难理解，一脸懵b，啥是钩子？？

  文档里常常说起钩子，后来理解成，生命周期钩子就像是利用生命周期，何时干什么事。 好比请求数据就能够在mounted阶段。

  附上一张图

• 组件化

  组件( Component)：就像孩童爱玩的乐高积木，每个组件能够当作一个积木块。可是可能组件更厉害的是这个积木块能够重复用无数次，只要你须要！而每一个组件都要分别开发，或者是从别人造好的轮子里"借鉴"。

  组件的三个核心概念：

  ​ 这里再亮出一张收藏的图

名称	对应内容
数据绑定	v-bind 缩写为： 前面加了：后面引号的就是表达式了
条件判断	v-if v-else
事件绑定	v-on 缩写为@
事件修饰符5个	.stop阻止冒泡，.prevent阻止默认行为，.capture相反冒泡，.self触发本身范围内事件，.once只触发一次
遍历数组和对象	v-for="irem of list"
计算属性，侦听属性	计算属性能干的侦听属性也能干，反之不行，能用计算属性的必定要用计算属性
双向绑定	v-model 只能用于表单类标签

• 过滤器filter

<div id="app">
        <p>{{msg | filterMsg('疯狂')}}</p>
 </div>
 <script src="vue.js"></script>
 <script> Vue.filter('filterMsg', function (msg,arg) { return msg.replace(/单纯 /g,'帅气'+ arg) }) var vm = new Vue({ el: '#app', data: { msg: '曾经，我也是一个单纯的少年，单纯的不能再单纯。我傻傻的问，谁是世界上最单纯的人' }, }) </script>
复制代码

• axios

  学的还不深，只得拿出一个比较简单的代码块,上文中钩子函数说放在mounted

mounted () {
    axios.get('http://localhost:5000/api/user', {
        params: {
            id: this.id,
            name: this.name,
            email: this.email,
        }
    }).then(response => {
        this.users = response.data
    }).catch(error => {
        console.log(error)
    })
 }
复制代码

• vuex

  vuex是什么？ 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

  new Vue({
    // state 驱动应用的数据源；
    data () {
      return {
        count: 0
      }
    },
    // view 以声明方式将 state 映射到视图；
    template: ` <div>{{ count }}</div> `,
    // actions 响应在 view 上的用户输入致使的状态变化。
    methods: {
      increment () {
        this.count++
      }
    }
  })
  复制代码

附上官方单项数据流理念的简单示意

多个组件或者多个页面数据共享容易破坏，因此要下面的vuex集中式管理数据

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）

• getters：对数据获取以前的再次编译，能够理解为state的计算属性。咱们在组件中使用 $sotre.getters.fun()

• mutations：修改状态，而且是同步的。在组件中使用$store.commit('',params)。这个和咱们组件中的自定义事件相似。

• actions：异步操做。在组件中使用是$store.dispath('')

• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

  vuex暂时还没弄太清，之后再把总结细致写出来

---

最后：

小白短浅总结，但愿发出来不挨打哦！

学的越多发现本身懂得又越少，这是这段时间的感悟。

经过这一阶段的vue探索，初步掌握了vue， ES6也稍有所学。 css预处理器stylus，axios。可是vue的道路才刚开始。长路漫漫，惟前端做伴！

ps：stylus是我用的全部css预处理器中体验最爽的！

为了避免吃最少的经济而又挨最毒的打，加油吧，骚年！