这里是《Vue2.0 从零开始学系列?#22987;恰?#30340;第二篇博文,博主小呆是一名互联网非著名的半吊子前端,喜欢学习新技术,受到一些前辈的影响,多少也写过一些?#22987;?#21644;学习心得,但是很遗憾没有一个是成系列的╮(╯▽╰)╭,这次小呆下定决心了,不仅要写一个成品系列文章出来,而?#19968;?#35201;把之前没写完的坑补上,最近一直在学Vue2.0相关的东西,所以就拿它开?#35835;恕?/p>

你能看到这篇文章,?#24471;?#23567;呆没有像之前写?#22987;?#19968;样太监掉(得意~<( ̄ˇ ̄)/),那就继续往下看吧。

上一篇?#22987;?#23567;呆记述了如何安装Vue-cli来搭建项目和运行项目,这一篇?#22987;?#25509;着学习Vue2.0,就先从Vue的组成部分学起咯。


1.What is SPA?

在正式写代码之前,我们首先要明白一些专业术语,理解这些专业术语对我们接下来的学习很有帮助。

我们用Vue.js写的项目一般都是SPA项目,说倒这里可能还有同学不太明白什么是SPA,简单来说,SPA就是俗称的单页应用(Single Page Web Application)。

做过移动端项目的童鞋可能会深有?#20889;ィ阅?#38382;题一?#31508;?#30171;点,而且用诸如Jquery等框架来操作DOM也一直被认为是不友好的。而使用SPA后,可以大大提高 H5 的?#38405;埽?#36798;到接近原生的流畅体验。


2.了解Vue2.0的组件化开发

关于组件这个概念,其实也流传很久了,通俗的讲,积木我们?#25216;?#36807;,同一块积木,既可以用来搭房子,又可以用来搭汽车,这其实就是组件的概念(可?#20174;茫?#25928;率高)。通常我们写页面的时候,不同的页面遇到相同的结构(比如表单结构,button按钮等),我们常见的思路是复制?#31243;?#20294;是这样做的不?#20040;?#23601;是,如果有一天?#20174;?#30340;结构需要改版,那?#27425;?#20204;需要各种页面里面搜索替换,很容易出错,而且效率不高。

而用组件化开发后,我们只需要在每个页面引用组件就可以,组件完全是独立于页面之外的,如需改版,只需改的组件的模板,所有用到这个组件的地方都会更新。这就是组件化开发的?#20040;Α?/p>

Vue2.0就推荐我们用组件化来进行开发,对于SPA来说,我们只有一个根页面index.html,我们通过用.vue结尾的模板,来组装我们的页面,下面我们就?#23548;?#30475;一下我们项目里的Hello Vue是如何展现出来的吧。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

首先是index.html,这个没啥好说的,body文件里面我们放了一个id为app的div,用来当做容器。可能大?#19968;?#24456;惊讶,我们上一篇?#22987;?#20013;,最后运行成功后的项目明明是?#24515;?#23481;的,为什么index.html里面什么都没?#24515;兀?#20808;留个悬念,我们接着看项目目录。

上一篇?#22987;?#20013;我们讲过了src是我们开发的主文件夹,接着我们就要在这里面开始折腾了。打开App.vue文件:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

通过观察,我们可以发现,.vue文件为三个标签构成,templatescriptstyle,其中template标签用来写我们的html,script标签用来写js,style标签用来写css样式。注意:每个template标签下只允许存在一个根元素

<!-- 正确 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
</template>
<!-- 错误 -->
<template>
    <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
    </div>
    <div></div>
</template>

在app.vue模板里,我们有2个东西不认识,一个是<router-view></router-view>标签,一个是export default,暂时先不管他们,一会我们在研究。接着我们来看main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

main.js是我们项目的主入口文件,什么是主入口文件呢,其实就相当于我们人类的大脑啦,这代码一眼看上去很头晕对?#27426;裕?#27809;错,我也是这个感觉,那本教程到此结束ㄟ( ▔, ▔ )?#24076;?#32435;尼??小呆你这个魂淡,不是说好了要写个系列?#22987;?#30340;嘛,就这么放弃的话如何在小萌面前展(yao)现(wu)才(yang)华(wei)呢?)

咳咳,开个玩笑啦,像我这么聪明有才华的人,怎么可能这么简单就放弃嘛。仔细看看代码,import,咦,这个词语貌似以前在哪里用过。(o゜▽゜)o☆[BINGO!],想起来了,css里引用其他css样式文件的时候用过:

@import url("CSS文件");

哈哈哈哈~难?#30452;?#22825;才这么聪明,据?#20063;?#27979;,估计这里的import也是引用什么东西用的。不过既然是在js文件里出现的,那应该就是ES6的内容了,经过一番查阅资料,原来这个import是关于原生JS模块化用的。而main.js里的载入模块的代码应该是这样的:

//加载了Vue.js模块,没有用相对路径,所以会根据webpack的配置文件,在node_modules目录下查找
import Vue from 'vue'
//加载了App.vue模块,.vue的后缀可以省略不写(不推荐,防止有重名文件冲突)
import App from './App.vue'
//加载了router目录,如果路径引用的只是某一个目录,会自动寻找该目录下的index.js文件进?#23633;?#36733;,.js后缀也是可以省略不写的(不推荐,防止有重名文件冲突)
import router from './router/index.js'

所以得出结论,import的加载格?#25509;?#35813;是这样的(ES6好像也?#20174;?#36771;么难嘛):

import 模块名称 from 模块路径

既然有了加载,那?#20174;?#20043;对应的肯定有暴露接口的地方,这时我们回头一看之前的App.vue中的script部分内容:

export default {
    name: 'app'
}

export default,就是我们与import相呼应的暴露接口的命令了。更多更详细的关于import和export的用法,请阅?#21015;?#21574;的另一篇专门介绍import和export的?#22987;?a href="http://www.pvmy.icu/studynotes/201702281164.html">《ES6新手入门全过程(二):export和import命令》

关于name属性,小呆此?#36744;?#26410;发现它的作用,去掉name也能正常运行,查了下API,原来是用来方便递归模板调用自身的,而且便于调试。所以我们在模板暴露接口的时候,还是加上name属性比较好。

好,说完import和export,我们接着看下面的代码:

new Vue({
  el: '#app',    //el属性用来把我们的Vue实例?#20197;?#21040;DOM元素上,这里我们?#20197;?#21040;了#app上面
    router,   //加载路由
  template: '<App/>',  //template用来决定Vue使用的模板语言
  components: { App }   //components属性用来告诉Vue我们要使用的模板,这里的App在import时定义过
})

我们通过new Vue来实例化一个Vue.js应用,在实例化 Vue 时,需要传入一个选项对象,这个对象用来配置我们的应用。我们发现上面代码中并不全是以键?#20992;?#30340;形式书写的,?#23633;?#26377;一个单router是什么鬼?其实这是ES6的语法啦:

ES6规定,当引用的变量名和键名相同时,就可以简写,还原回来就是:router: router

这里可能很多人对template的理解一头雾水,小呆跟你们一样,不过小呆自己的理解是这样的(<App/>应该是表明用App.vue的模板语言,也就是等价于<template>,如有?#27426;?#36824;望指出)


结语

好啦,到这里为止第二篇的?#22987;?#23601;记述完啦,?#27604;?#36825;篇?#22987;?#20063;继承了小呆的一贯风格:知识点凌乱,知识点浅显等一堆特点,不过小呆还是希望通过自己的一些方式去帮助一些在前端道路上同行的童鞋们。最后总结一下这篇?#22987;?#20027;要记述的几点知识:

  1. 什么是SPA
  2. .vue模板的组成部分
  3. ES6 import和export
  4. 如何实例化一个Vue应用

关于?#22987;?#20013;的<router-view>标签和man.js文件中的router部分,小呆将会写在下篇?#22987;?#24403;中,敬请期待。