java后端必刷前端知识点二（Vue2.0）

Vue2.0

目录

Vue2.0

1、安装vue脚手架

 2、利用脚手架创建项目

 3、基础讲解

4、axios请求

---

1、安装vue脚手架

npm install -g @vue/cli

 2、利用脚手架创建项目

•  cmd输入命令

vue ui

• 在浏览器打开页面
• 点击创建项目
• 输入项目名，下一步
• 选择手动配置

• 打开Router和vuex

 

•  创建项目

•  项目结构

main.js 前端入口

views放组件

assets静态资源

router路由

 3、基础讲解

• 文本引用

<template>
  <div>
    <h1>{{ name }} {{ age }}</h1>
  </div>
</template>

<script>
const option={
  data: function(){
    return {
      name:'jj',
      age:20
    }
  }
};
export default option;
</script>

• 属性绑定

<template>
  <div>
    <h1>{{ name }} {{ age }}</h1>
    <input type="text" v-bind:value= 'name'>
  </div>
</template>

<script>
const option={
  data: function(){
    return {
      name:'jj',
      age:20
    }
  }
};
export default option;
</script>

v-bind属性绑定，可以省略直接：代替

<input type="text" v-bind:value= 'name'>
<input type="text" :value= 'name'>

• 事件绑定

<template>
  <div>
    <h1>{{ name }} {{ age }}</h1>
    <input type="text" :value= 'name'>
    <input type="button" v-on:click="click">
  </div>
</template>

<script>
const option={
  data: function(){
    return {
      name:'jj',
      age:20
    }
  },
  methods: {
    click(){

    }
  }
};
export default option;
</script>

数据写在data里，事件函数写在methods里

v-on：click也可省略

<input type="button" v-on:click="click">
<input type="button" @click="click">

•     双向绑定

<input type="text" v-model= 'name'>

4、axios请求

• 安装

npm i axios

vue.config.js配置前端代理防止跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,//前端端口
    proxy: {//前端配置代理
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

• 使用

<template>
  <div>
    <div>
      <input type="button" @click="click" value="发送请求">
      <div>{{ res }}</div>
    </div>

  </div>
</template>
<script>
import axios from 'axios'
const option = {
  data: function(){
    return {
      res:""
    }
  },
  methods: {
    async click() {
      this.res= await axios.get('/api/user/1')
    }
  }
};
export default option;
</script>

 

• 自己配置axios

• 重复使用组件

 

 

• mounted :function(){}组件加载完就加载