在Vue.js中创建页面需要以下两步
(1) 创建路由
(2) 新建 vue 页面

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
    }
  ]
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

当用户访问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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

导入代码:import

import 用于导入外部代码，例如：
因为Vue和Router是在package.json中定义的，因此可以直接 import … from 包名引入，否则要加上路径

// 引入 Vue
import Vue from 'vue'
// 引入 Vue 的路由
import Router from 'vue-router'

  

 

  
1
  
2
  
3
  
4
 

在from后面添加@符号，表示的是在本地文件系统中引入文件，@代表源代码目录，一般是 src，@出现之前，我们在编码时也是这样写：

import Hello from '../components/Hello'

  

 

  
1
 

因为大量使用相对路径，这样会导致代码混乱，所以推荐使用@写路径

方便其他代码使用自己：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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

实际中，上面代码是一种简写形式，等同于下面的代码

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

箭头函数=>

main.js加上Vue.prototype.$axios = axios axios.get改为this.$axios.get调用

import axios from 'axios'
//其他vue组件中就可以this.$axios调用使用
Vue.prototype.$axios = axios

  

 

  
1
  
2
  
3
 

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);
    })
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

ES 新增的箭头表示函数，默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window

hash 中同名的 key，value 可以简写

<script>
export default {
  data: function() {
    let title = "你好，世界"
    return {
      title:title
    };
  }
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

可以简写为：

<script>
export default {
  data: function() {
    let title = "你好，世界"
    return {
      title
    };
  }
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

一样的

分号可以省略

var a = 1
var b = 2

  

 

  
1
  
2
 

等同于

var a = 1;
var b = 2;

  

 

  
1
  
2
 

文章来源: blog.csdn.net，作者：周棋洛ყ ᥱ ᥉，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/m0_53321320/article/details/123784533