Vue2.0史上最全入坑教程（中）—— 脚手架代码详解
书接上文我们说道，如何利用脚手架（vue-cli）构建一个vue项目，本回书我们一起来学习分析下代码。
回顾下创建后的项目目录：
说明：在*.vue文件，template标签里写html代码，且template直接子级只能有一个标签。style标签里写样式，script里面写js代码
a. 页面：index.html
这个没什么好说的就是一个简单的html页面，这里id='app'，是为后面的设置vue作用域有关的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datura</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
b. 文件：Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1> <!-- 这里是展示数据中的 -->
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<br>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
data () {
return {
msg: 'Welcome to Your Vue.js App' /* 这里是数据，一定记住数据一定要放data中然后用return返回 */
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> /* scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less */
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
c. 文件：App.vue
<template>
<div id="app">
<router-view></router-view> <!-- 这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link> -->
</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>
d. 文件：main.js
这个js文件是主页面配置的主入口。主要是利用es6的模块化引入模块。
import Vue from 'vue' /* 这里是引入vue文件 */
import App from './App' /* 这里是引入同目录下的App.vue模块 */
import router from './router' /* 这里是引入vue的路由 */
/* eslint-disable no-new */
new Vue({
el: '#app', /* 定义作用范围就是index.html里的id为app的范围内 */
router, /* 引入路由 */
template: '<App/>', /* 给Vue实例初始一个App组件作为template 相当于默认组件 */
components: { App } /* 注册引入的组件App.vue */
})
e. 文件：index.js
这个是配置路由的页面
import Vue from 'vue' /* 引用vue文件 */
import Router from 'vue-router' /* 引用vue路由模块，并赋值给变量Router */
import Hello from '@/components/Hello' /* 英文Hello.vue模版，并赋值给变量Hello,这里是“@”相当于“../” */
Vue.use(Router) /* 使用路由 */
export default new Router({
routes: [ /* 进行路由配置，规定“/”引入到Hello组件 */
{
path: '/',
name: 'Hello', /* 这里的name同上，暂时没发现有什么意思 */
component: Hello /* 注册Hello组件 */
}
]
})
说明：如果需要增加组件那就在components文件下定义xx.vue文件并编写代码即可，如果需要配置路由就要进行在index.js进行路由“路径”配置，还需要点击跳转就要用到<router-link></router-link>标签了。至于后面的过滤器啊，事件啊，钩子函数，ajax等等之类的和vue1.0差不多就不一一叙述，但是会在用到的时候简单说明一下的。我会用下面大约俩个章节来展示一个简单的“小项目”。
Vue2.0史上最全入坑教程（中）—— 脚手架代码详解的更多相关文章
- Vue2.0史上最全入坑教程（下）—— 实战案例
书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...
- Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...
- 史上最全的maven的pom.xml文件详解（转载）
此文出处:史上最全的maven的pom.xml文件详解——阿豪聊干货 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...
- 新手入门：史上最全Web端即时通讯技术原理详解
前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
- 史上最全的maven的pom.xml文件详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)
1. HDFS概述 Hadoop 分布式系统框架中,首要的基础功能就是文件系统,在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统,这个抽象类下面有很多子实现类,究竟使用哪 ...
- 新手入门贴：史上最全Web端即时通讯技术原理详解
关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述.而 ...
- git详细使用教程入门到精通(史上最全的git教程)
Git是分布式版本控制系统,那么它就没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不 需要联网了,因为版本都是在自己的电脑上.既然每个人的电脑都有一个完整的版本库,那多个人如何 ...
- vue2.0项目实战（4）生命周期和钩子函数详解
最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...
随机推荐
- Python import用法以及与from...import的区别
Python import用法以及与from...import的区别 在python用import或者from...import来导入相应的模块.模块其实就是一些函数和类的集合文件,它能实现一些相应的 ...
- Spring框架使用ByName自动注入同名问题剖析
问题描述 我们在使用spring框架进行项目开发的时候,为了配置Bean的方便经常会使用到Spring当中的Autosire机制,Autowire根据注入规则的不同又可以分为==ByName==和 ...
- 什么是 MIME TYPE
首先,我们要了解浏览器是如何处理内容的.在浏览器中显示的内容有 HTML.有 XML.有 GIF.还有 Flash ……那么,浏览器是如何区分它们,决定什么内容用什么形式来显示呢?答案是 MIME T ...
- myeclipse14 破解教程
myeclipse14 破解教程 注意:先不要打开myeclipse,破解完成之后再打开 Myeclipse-2014-GA-破解文件 链接: https://pan.baid ...
- jsp页面判断当前请求的host
需要引入<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> ...
- topology进程结束会不会关闭数据库连接
测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...
- 恭喜"微微软"喜当爹，Github嫁入豪门。
今天是 Github 嫁入豪门的第 2 天,炒得沸沸扬扬的微软 Github 收购事件于昨天(06月04日)尘埃落定,微软最终以 75 亿美元正式收购 Github. 随后,Gitlab 趁势带了一波 ...
- PKUOJ 区间内的真素数
http://bailian.openjudge.cn/tm2018/A/ #include <iostream> #include <math.h> #include < ...
- 如何 在 jQuery 中的 $.each 循环中使用 break 和 continue
jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...
- 解决使用mybatis模糊查询为空的问题
解决方法: 在数据库配置的url后添加?useUnicode=true&characterEncoding=utf-8 参考: https://blog.csdn.net/IT_private ...