Vue2学习之旅三：基础篇（什么是Vue?何时使用？）

做者：心叶
时间：2018-04-26 15:56

本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V3

Vue2学习之旅系列文章目录

写在前面

本文是对vue以及相关知识的理解，重点不在知识自己上，而是理解这些知识存在的意义。

为何会有这篇文章，主要是考虑有的人可能会感受，说了这么多vue，也会用了，可仍是昏昏的，我的也感受明明白白是很重要的，所以在正式开始以前先好好说清楚。

下面使用按部就班的问答方式进行。

什么是vue?

大体说明

严格的说，vue就是一个JavaScript库，你把他当作一个框架也无伤大雅，反正就是一个提供了不少便捷的前端开发的东西，相似Jquery，不过提供的东西更丰富了。

通过前面的学习你应该感觉出来了，使用他提供的接口或者说规范，反正就是在他规定的世界观里面开发，他会帮你实现你想要的功能，而他的世界里面，仿佛一切都没有原生那么痛苦。

所以，归结到本质仍是浏览器自己语言系列（HTML+CSS+JavaScript）和一些开发技巧，再加上vue的世界观就是vue了。

举例说明

通过上面的文字说明，你可能仍是不想理解我想说什么，下面举一个例子来简单感觉一下：

【需求】页面上有二个输入框（一个用来输入姓名，一个用来输入国籍）和一块用来显示提示信息的地方，提示信息的内容为：【编辑时间】姓名，来自+国籍。提示信息须要根据你的输入随时改变，咱们直接看看vue是如何实现的（本文所有例子都放在以前的【这是页面一】那一页里面，也就是PageOne.vue，菜单更名为：Vue基础部分），看看修改后的PageOne.vue里面的内容：

<template>
    <article>
        <section>
            <header>
                用例一
            </header>
                    姓名：<input type="text" name="name" v-model="name"><br />
                    国籍：<input type="text" name="country" v-model="country"><br />
                    提示信息：{{infoMessage}}
        </section>
    </article>
</template>

<script>
export default {
  data() {
    return {
      name: "心叶",
      country: "中国"
    };
  },
  computed: {
    infoMessage: function() {
      return (
        "【" + new Date() + "】" + this.name + ",来自" + this.country + "!"
      );
    }
  }
};
</script>

<style scoped>
article {
  font-size: 16px;
  padding: 10px;
}
header{
    color:red;
    font-size: 20px;
}
</style>

先看看效果：

在代码里面，主要是template模板里面和script代码须要说明一下：

1.template里面有二个输入框，须要注意的是他们都分别有一个v-model属性，你能够理解这个属性的意思就是这个输入框的值和vue对象里面对应的属性关联起来了，好比姓名输入框，若是vue对象的name属性改变这个值也会跟着改变，反过来同样；

2.template里面的信息显示方法是{{infoMessage}}，就是规定vue对象的infoMessage属性改变，这个地方对应改变；

3.script标签里面，和template对应，先定义了name和country，而后定义infoMessage的时候比较奇怪，其实这个叫计算属性，从代码能够看出来，他是在name或country改变的时候自动修改，固然，前面的日期也从新获取了，所以时间会自动改变。

上面代码的意思具体是什么不是那么重要，重要的是，很明显在开发难度上，这样要比不用vue实现起来容易多了。

vue会帮助咱们干不少事情，上面就是一个例子，而咱们，仅仅须要遵循vue的世界观就能够了（不要想的太复杂）。

理解总结

所以，根据我的的体会，学习vue，或者说学习别的类库或者框架，首先不要去排斥他，先从思想的高度去理解他，而后用几个例子去体会他，接着看看官方文档，最后用一个完整例子试一试就差很少了。

只要入门了，深刻的东西慢慢来，一步步来，你知道他有哪些东西，不会都没事，须要的时候能够想起来就能够了，最重要的仍是核心的东西和经验的积累。

vue的东西不少，也不是一个项目要所有用到，根据需求，搭建适合本身的目录结构。

不管什么时候，都不要忘记思考本质的东西，千万别在各类类库、框架和新技术中迷失方向（忽然想起来前几天看霍金视频里面的一句话：不管生活如何艰苦，都不要忘记仰望星空！）。

何时使用？

何时使用这个问题真的太难了，由于我根本不知道你想干什么。

不过对于这些东西，我想说说本身的体会：

用框架或者类库的好处很明显，而坏处又未尝不是显而易见，你会发现你须要学习不少新的东西，而这些东西仍是一直变更的（好吧，前端本身原本就变的很快），若是出了错误（框架或者类库本身的设计问题），解决起来比较不舒服（简单使用应该遇不到）。

这固然不该该是做者的错，举个例子，若是你不用电脑，就永远不会须要去思考电脑坏了怎么办，固然，你也没法获取电脑提供的服务。

不过，有些人是须要电脑的，有些人可能并不须要，一个简单计算器可能更加方便，至少计算器可比电脑便宜多了，vue也是同样，一个简单项目可能没有使用vue更好。

总结

原本想更系统的说说本身的理解，感受语言功底欠缺，写的有错误的地方，还请帮忙纠正，若是能够给你学习vue或者前端的路上提供思想上的帮助，这篇文件也就有了存在的价值！