Vue2.0史上最全入坑教程（中）—

2019独角兽企业重金招聘Python工程师标准>>>

书接上文我们说道，如何利用脚手架（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">![](./assets/logo.png)<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史上最全入坑教程（下）

作者：datura_lj
链接：https://www.jianshu.com/p/2b661d01eaf8
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://my.oschina.net/u/3053883/blog/1835429

Vue2.0史上最全入坑教程（中）—— 脚手架代码详解相关推荐

Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）
2019独角兽企业重金招聘Python工程师标准>>> ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,87 ...
史上最全最详细多种手机主流操作系统详解
史上最全最详细多种主流操作系统详解(经典,值得收藏) 2017-06-09 18:07 操作系统一.手机操作系统 1 Android 谷歌安卓这里写图片描述(https://img-blog.cs ...
新手入门：史上最全Web端即时通讯技术原理详解
前言有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
新手入门贴：史上最全Web端即时通讯技术原理详解
前言有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...
史上最全django安装教程
史上最全django安装教程选择版本首先由于版本兼容性问题,所以需要安装好对应的django,python,mysql版本才能确保今后程序的顺利运行,其兼容性见下表(表来源于博客) 根据上表,我选 ...
Python爬虫人工智能大数据全栈视频史上最全合辑教程分享！
Python爬虫人工智能大数据全栈视频史上最全合辑教程分享! 毫无疑问Python是这两年最火的编程语言,不仅容易上手,且在多个行业都可应用.尤其今年人工智能及大数据的发展,Python将会展现更多的 ...
史上最全PPT制作教程和PPT模板，毕业论文答辩PPT制作方法
史上最全PPT制作教程和PPT模板,毕业论文答辩PPT制作方法每年到毕业季,各位大学毕业生们都在为毕业论文答辩做准备,而毕业论文答辩PPT的制作则是答辩准备当中一项非常重要的工作.因为,答辩委员会不 ...
史上最详细Docker安装最新版Minio 带详解绝对值得收藏！！！让我们一起学会使用minio搭建属于自己的文件服务器！！走上白嫖之路！解决启动了但是浏览器访问不了的原因
让我们一起学会使用minio搭建属于自己的文件服务器!!走上白嫖之路! WARNING: Console endpoint is listening on a dynamic port (34451) ...
vscode win10笔记本蓝屏_史上最详细的win10蓝屏错误代码大全详解
[文章导读] 蓝屏是操作系统为了保护硬件而产生的蓝屏,但蓝屏代码有上百种,有些网友对于蓝屏代码比较头疼,下面小编给大家分享史上最全的蓝屏代码大全. 蓝屏是操作系统为了保护硬件而产生的蓝屏,但蓝屏代码有 ...

Vue2.0史上最全入坑教程（中）—— 脚手架代码详解

Vue2.0史上最全入坑教程（中）—— 脚手架代码详解相关推荐

最新文章

热门文章