1 创建路由
import hello from ‘@/component/Hello’
表示从当前目录下的 components 引入 Hello 文件，@表示当前目录，然后定义一个路由配置
// 引入 Vue import Vue from 'vue' // 引入 Vue 的路由 import Router from 'vue-router' // 作用是引入 Hello 这个component import hello from '../component/Hello' //使用路由 Vue.use(Router) export default new Router({ routes: [ { //路由路径，对应一个 url path: '/hello', //路由别名 ，vue.js内部使用的名称 name: 'Hello', //组件，对应.vue页面的名字 component: Hello } ] })
当用户访问http://localhost:8080/#/hello时，就会渲染./components/Hello.vue 文件，name：'Hello'定义了该路由在 vue.js内部的名称
2 创建一个新的Component
之前在路由中引入了 component ，接下来，就是创建这个文件 📂
<template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: "你好，世界" }; } }; </script> <style> </style>
页面效果
原生 Vue.js的代码存在于 new Vue({……}）中的代码，在Webpack 框架下，都应该放到`export default{……}`代码块中
3 Vue.js中的 ECMAScript
我们使用的不是原生的 “JavaScript”，而是一种新的语言，就是 ECMAScript，严格说，ECMAScript是 JavaScript 的规范
let,var,常量与局部变量
声明本地变量，使用 let 和 var ，两者的区别如下
✨var：可能引起变量提升，或块级作用域的问题
✨let：就是为了解决以上问题存在的
在webpack下的vue.js中使用任何变量，都要使用var或let来声明
常量：
var a = 1; let b = 10; const NAME = '小刘'; console.log(a); console.log(b); console.log(NAME);
导入代码:import
import 用于导入外部代码，例如：
因为Vue和Router是在package.json中定义的，因此可以直接 import … from 包名引入，否则要加上路径
// 引入 Vue import Vue from 'vue' // 引入 Vue 的路由 import Router from 'vue-router'
在from后面添加@符号，表示的是在本地文件系统中引入文件，@代表源代码目录，一般是 src，@出现之前，我们在编码时也是这样写：
import Hello from '../components/Hello'
因为大量使用相对路径，这样会导致代码混乱，所以推荐使用@写路径
方便其他代码使用自己：export default { … }
在每个 vue 文件的<script>中，都会存在 export default { … } 代码，作用是方便其他代码对这个代码进行引用，对于 Vue.js 程序员来说，记住这个写法就可以了
在es6之前，js 没有统一的模块定义
ES中的简写
有时候会发现这样的代码
<script> export default { data() { return { message: "你好，世界" }; }, methods:{ print(){ var a = 1; let b = 10; const NAME = '小刘'; console.log(a); console.log(b); console.log(NAME); } } }; </script>
实际中，上面代码是一种简写形式，等同于下面的代码
<script> export default { data: function() { return { message: "你好，世界" }; }, methods: { print: function() { var a = 1; let b = 10; const NAME = "小刘"; console.log(a); console.log(b); console.log(NAME); } } }; </script>
箭头函数=>
main.js加上Vue.prototype.$axios = axios axios.get改为this.$axios.get调用
import axios from 'axios' //其他vue组件中就可以this.$axios调用使用 Vue.prototype.$axios = axios
methods: { getData(){ this.$axios.get('https://api.uomg.com/api/rand.music') .then(resp=>{ console.log(resp); }) }, getData1(){ this.$axios.get('https://api.uomg.com/api/rand.music') .then(function(resp){ console.log(resp); }) } }
ES 新增的箭头表示函数，默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window
hash 中同名的 key，value 可以简写
<script> export default { data: function() { let title = "你好，世界" return { title:title }; } }; </script>
可以简写为：
<script> export default { data: function() { let title = "你好，世界" return { title }; } }; </script>
一样的
分号可以省略
var a = 1 var b = 2
等同于
var a = 1; var b = 2;
