【VUE】2.编写自己的第一个模板页面、跳转以及简单的axios请求

Hello Word

写编程绕不开一个关键词：“Hello World！”

那我们也从“Hello World！”开始进行编写，一般我们在创建完成项目之后，打开src/components目录下面会存在一个预设的HelloWorld.vue模板，我们启动项目之后输入localhost:8080打开的第一个页面就是这里面的内容

app.vue默认加载了该模板，如果没有引入，我们自己可进行引入

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>{{ msg }}</h2>
    <helloworld></helloworld>
    <router-view/>
  </div>
</template>

此模板的helloworld必须与HelloWorld.vue模板中定义的name值一致，下面是HelloWorld模板代码

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name:'helloWorld',
  data(){
    return{
      msg: 'Hello World!'
    }
  }
}
</script>

我们保存页面，就会看到Hello World的字样

自己的模板

在src目录下，创建views目录（或者直接使用components目录，根据个人习惯）

题外话：推荐使用vscode进行vue开发

新建文件，输入view1.vue，输入以下代码

<template>
    <div >
        <h1>我是View1</h1>
        <a> 我是View1 </a>
    </div>
</template>
 
<script>
    export default {
        name: 'view1',
    }
</script>
 
<style>
</style>    

其中<template>内输入HTML文件，<script>内输入JS代码，<style>输入样式文件

此时我们还是访问不了我们自己的页面，我们还需要设置路由

设置路由需要首先安装Router，如果没有安装使用ctrl+`快捷键调出终端窗口，输入以下命令

cnpm install vue-router --save

如果不确定是否安装，则可以引入后保存，如果报错则表示没有安装，如果没有报错则表示已经安装

如何引入？

新建一个router.js与main.js同级，然后输入以下命令：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    linkActiveClass: 'active',
    // 路由配置
    routes: [
    {
        path: '/view1',
        component: View1
    }
    ]
})

保存后页面访问localhost:8080/#/view1则可以访问到我们自己编写的模板页面

跳转

在views目录下创建一个view2.vue文件，然后输入以下代码

<template>
    <div >
        <h1>我是View2</h1>
        <a> 我是View2 </a>
    </div>
</template>
 
<script>
    export default {
        name: 'view2',
    }
</script>
 
<style>
</style>    

修改router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1'
import View2 from './views/view2'

Vue.use(Router)
 
export default new Router({
    linkActiveClass: 'active',
    // 路由配置
    routes: [
    {
        path: '/view1',
        component: View1
    }, {
        path: '/view2',
        component: View2
    }, {
        path: '/*',
        component: View1
    }
    ]
})

修改app.vue模板

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/view1">Go to view1</router-link>
    <router-link to="/view2">Go to view2</router-link>
    <router-view/>
  </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>

保存后运行

点击不同的按钮则会相应的出现不同的模板

axios

下载安装axios

cnpm install axios --save

安装完成之后，修改main.js，引入axios，添加 Vue.prototype.$ajax = axios，完整main.js代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$ajax = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改view1模板JS，引入axios，代码如下

<template>
    <div >
        <h1>我是View1</h1>
        <a> 我是View1 </a>
    </div>
</template>
 
<script>
import axios from 'axios'

    export default {
        name: 'view1',
        mounted: function () {
            axios.post('/user/ceshi')
            .then(function(response){
                console.log(response);
            })
            .catch(function(response){
                console.log(response);
            })
        }
    }
</script>
 
<style>
</style>    

post后面为接口地址，自此则完成vue的简单操作