0
点赞
收藏
分享

微信扫一扫

Webpack + Vue.js 实战

鱼满舱 2022-03-30 阅读 63

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

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

举报

相关推荐

0 条评论