Vue入坑史,从一个简单的项目说起(vue入门项目推荐)-胡新春个人博客 
Vue入坑史,从一个简单的项目说起(vue入门项目推荐)
 作者:红顏漠  发布时间:2018-01-06 14:29:56  访客:125

最近一直在学习Vue,官方文档也粗略的看过三四遍吧(有的东西老是记不住,可能是老了,开个玩笑)。然后自己写了一个简单的Demo,模拟了iPhone端的微信界面,实现了一个简单的聊天功能。


这里是GitHub的项目地址,目前虽然还是个半成品(有点懒),但对于初学者来说应该会有帮助,因为我也是初学者。使用到的技术栈包括Vue,Vuex,Vue-router,Vue-cli,Pug,Sass等。


这不是一篇纯技术文章,更多的是我自己总结的一些方法和对Vue的理解。


初学者的难题


根据我学习的经历,我觉得对于初学者学习Vue(或React)最大的难题可能就是环境的搭建,尤其是对于没有NodeJS方面经验的人来说。这里我要说一下自己对于学习Vue的一些见解,可供参考。


从Vue-cli开始


vue-cli是官方提供的一个命令行工具,可以一键部署开发环境,这样会省去很多麻烦。另外,通过vue-cli部署的环境可以直接进入到单文件组件的学习,这对以后的学习可能会更有帮助。


如果自己搭建环境,一个webpack的相关配置都可能把你的意志消磨殆尽(webpack我就踩过很多坑),我猜很多学习Vue或React的新手都是死在环境搭建的过程中。初学者应该把注意力集中在Vue本身,等体会到其中的“乐趣”之后再回过头来学习npm和webpack等相关知识可能会更好。


vue-cli使用如下,建议使用cnpm代替npm,具体可自行百度或Google。


# 全局安装 vue-cli
npm install -g vue-cli
# 创建一个基于 Webpack 模板的项目
vue init webpack my-project
# 安装依赖
cd my-project
npm install
# 运行
npm run dev


直接进入到单文件组件开发


Vue可以直接通过script标签引入到HTML文件中,但我不建议这样学习。因为这就违背了学习Vue的初衷,Vue是一个MVVM框架,其核心思想就是分组件开发,组件的复用,组件解耦。


Vue还可以使用字符串模板以及Render渲染来开发组件,其弊端也很明显。字符串模板不支持语法高亮,而且写起来也不直观。Render函数渲染相对比较复杂,而且也不直观。最重要的是他们都无法封装CSS样式,也无法使用预处理器(Pug和Sass)。

单文件组件(.vue后缀名)很好的实现了组件的封装,让组件看起来更像组件。文件结构如下:

<template lang="html">
    <!-- 这里是组件的 HTML 标签 -->
</template>
<script>export default {    // 这里是组件 js 代码}</script>
<style lang="scss" scoped>// 这里是组件的 CSS 样式</style>


选择一款合适的编辑器


我曾经无数次纠结过这个问题:到底是使用Sublime,VS Code,还是Atom?或是WebStorm?百度一下,人们对这些工具也是各执其词,根本毫无可比性,一下子更不知如何选择了(选择困难症,十分痛苦)。现在想想其实也十分可笑,我们完全没必要把时间花在这些无聊的事情上。这些编辑器我在Windows和MacOS中都尝试过,最终还是选择了Sublime阵营。

简单的说一下,选择Sublime一个字快,两个字稳定,三个字插件丰富(假装三个字)。Atom界面最好看,尤其是在MacOS下;VS Code没什么心得,就是不喜欢;WebStorm相当于IDE,笨重但功能齐全,前端初学者神器(也是我的入门工具)。Atom我也是比较看好的,只是闲置在电脑中,暂时没怎么用。


如果你也跟我一样纠结的话,那我建议你选择Sublime,什么也别想,就选它。记住它的一些快捷操作,和一些实用技巧,我相信你会慢慢爱上它的。


Sublime作为前端编辑器,推荐几个好用的插件:

Emmet:前端必备神器;

DocBlockr:统一文档注释的风格;

Babel:支持ES6语法;

Pug:Jade的新叫法,语法高亮;

Sass:支持Sass语法高亮;

Vue Syntax Highlight:Vue必备,语法高亮。

另外推荐一款我在用的主题:Theme - SoDaReloaded。


纵观全局


我一直有一个观点:就是看事物要先看全局,忽略那些繁琐的细节,然后再逐个深究。比如看书要先看目录(虽然我讨厌看书),首先做到心里有数,知道自己在看什么或有没有必要再看下去(比如这篇文章)。


比较重要的几个概念


我不是一个语言表达能力很好的人,不会扯那些概念,我只能尽可能的说一些自己的理解。

这里先说一句,Vue中的this一般都指向当前的Vue实例。也是就说,在哪个组件中使用,this就指向哪个组件。当然,这只是对于组件本身具有的属性和方法而言。


Vue实例


通过Vue开发单页面项目,一个项目就是一个Vue实例(暂且这么理解吧),也就是通过new Vue()语句创建的对象。那么既然有了一个实例,那么要显示出来,就得放入HTML文档中,这就是挂载。对应语法:


new Vue({    // el是实例挂载点,会将根组件替换掉原文档中id为 app 标签
    el: '#app',    // 通过render函数渲染
    render: h => {        // 这里App是根组件
        h(App)
    }
})

// 第二种写法new Vue({    el: '#app',    // 通过字符串模板
    template: '<App />',    components: { App }
})


Vue扩展实例

严格来说,通过new Vue()方式创建的实例叫做根实例,而还有一种叫扩展实例。这里引用官方的一句话:所有的 Vue.js 组件其实都是被扩展的 Vue 实例(其实我也是刚刚理解)。

扩展实例创建方式:

const MyComponent = Vue.extend({    // 该对象就相当于 单文件组件中 export 导出的对象
// 这就是为什么说 所有的Vue组件都是被扩展的Vue实例})
// 创建扩展实例const component = new MyComponent()


同样的,Vue扩展实例也需要挂载,其语法与根实例挂载一样:

// 会替换掉 HTML 文档中 id 为 app 的标签new MyComponent({el: '#app'})
// 但是这里不建议这么做,因为这样会与实例挂载点冲突
// 这里仅仅是为了说明扩展实例与 根实例的相似之处


扩展实例一个重要的用法就是在需要的时候才被插入到HTML文档中。比如点击一个按钮,弹出一个模态(modal)框。在我的Demo中,正是通过该方法实现一个加载等待的模态框。通过此方法有一个好处就是,可以将该功能封装成一个Vue插件,需要的时候通过一条指令就可以将组件插入到文档中,不需要预先将组件写入到HTML文档中。方法如下:

// 创建扩展实例let component = new MyComponent()
// 挂载到虚拟DOM中
// 不传递参数,若传递参数会挂载到指定的地方component  = component.$mount()
// 通过原生语法将 扩展实例添加到HTML文档中document.body.appendChild(component.$el)


同样,Vue根实例也可以通过该方式挂载到HTML中。


组件

组件就是扩展的Vue实例(哈哈)。反正记住在Vue中,一切可见的东西(但不限于可见的东西)都是组件,一个Vue实例就是由一大堆组件通过一定的组合和嵌套累积起来的。

学习组件无外乎就是它的创建和使用,通过扩展Vue实例也算是一种创建的方式,另外还有字符串模板和render函数渲染的方式。我一开始就建议直接使用单文件组件,具体请转移官方文档或从GitHub上Clone我的demo查看详情。


生命周期

每个组件都有自己的生命周期,从广义上来说,Vue实例其实也是一个组件。一般常用的几个生命周期钩子:created,mounted,updated,destroyed。mounted基本上用的最多。

所谓的生命周期钩子,就是说组件在特定的时刻会自动触发该事件,执行对应的函数。


学习Vue的基本思想

程序员,其实大部分时间是用于思考的。建立一种思想,一种思维方式很重要。这也是我现在一直在努力做的事。

学习一个框架,就要站在它的角度去思考问题。而Vue是一种MVVM模式的框架,所以有必要先理解什么是MVVM?然后再去思考Vue的基本原理,它能做什么?又是如何做到的?为什么要使用Vue?可以去看一下官方文档:Vue与其他框架的对比。


什么是MVVM

M就是Model(模型),V就是View(界面),MVVM也是就说通过模型的改变来更新界面,然后通过界面的一些行为事件又来作用于模型。当然,这只是从字面上来解释。要更好的体会到Vue的MVVM思想,我建议去学习Vuex。


之前,我们使用jQuery或原生JS要想更改界面上的内容,首先必须找到对应的DOM节点,然后通过直接操作DOM的语句来改变界面上的内容。而MVVM的思维方式就是:一个模型对应一个界面,界面的状态和显示的内容完全取决于它对应的模型。而我们只需改变模型,后台(Vue)就会通过某种机制自动去更新界面。


什么是MVC

顺便谈一下MVC设计模式,它其实是出现在MVVM之前,其中的C是指Controller(控制器)。MVC的基本思想就是:模型与界面之间的通信都是通过中间的控制器实现的。所以它的缺陷就是控制器层需要处理大量的业务逻辑代码,不利于开发和维护。


Vue的基本原理

我没有研究过Vue的源码,也解释不出来它是怎么实现的?毕竟我们是使用框架,通过它来提高开发效率,没必要太过于深究,否则就失去了使用它的意义(大神请忽略之)。记住一句话:我们是站在巨人的肩膀上开发的。如果什么都要去深究其原理,那还不累死?


Vue的核心是组件,一切可以看见的东西都是由组件构成。然后通过把不同的组件组合和嵌套在一起,最终组成了一个根组件,也就是App。根组件会挂载到Vue的根实例中,而Vue根实例本身也相对于一个组件,然后又挂载到真实的HTML文档中。对应的语句也就是main.js文件中的语句。

new Vue({    
// 该属性会 将Vue实例挂载到 真实的HTML中
    el: '#app',    
// App 就是根组件,被挂载到Vue实例中
    render: h => h(App)
})


本文来自:https://www.jianshu.com/p/56ba7488a4af



适合初学者学习Vue+WebPack的小项目


勾三股四的vue+webpack实战:http://jiongks.name/blog/just-vue/

用Vue构建一个Notes App:https://coligo.io/learn-vuex-by-building-notes-app/

Notes App中文版:https://segmentfault.com/a/11...

Vue60分钟系列:http://www.cnblogs.com/keepfool/p/5619070.html

webpack配合vue.js实现完整的单页面demo:https://segmentfault.com/a/11...

使用Vue.js和Vuex实现购物车场景:http://xlbd.me/vue-vuex-shopp...
Vue+Vuex制作微信公众号App:http://gold.xitu.io/entry/577...

Vue+Vuex构建单页应用:https://segmentfault.com/a/11...

Vue实战之账单组件:https://segmentfault.com/a/11...


3645345.png

点评一下


程序:HXC博客v2.0 主题:HXC博客前端Funs主题    基于CodeIgniter框架构建
博客平稳运行2年+