VUE基本使用方式

VUE组件

vue的组件是以.vue来结尾，每个组件由三部分呢组成：

结构：<template>：只有一个根元素：由它生成HTML代码

样式：<style>：编写CSS，控制页面的展示效果；全局样式，影响所有组件，局部样式只作用于当前组件

逻辑：<scipt>：编写js代码，控制模板的数据来源和行为

文本插值

• 作用：用来绑定 data 方法返回的对象属性

• 用法： {{插值表达式}}

<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age > 60 ? '老年' : '青年' }}</h1>
    </div>
</template>
<script>
    export default {
        data() {
            return { name: '张三', age: 30 };
        }
    };
</script>

属性绑定

• 作用：为标签的属性绑定 data 方法中返回的属性

• 用法： v-bind: xxx ，简写为 :xxx

<template>
    <div>
        <div><input type="text" v-bind:value="name"></div>
        <div><input type="text" :value="age"></div>
        <div><img :src="url"/></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            name: '王五',
            age: 20,
            src: 'https://www.itcast.cn/2018czgw/images/logo2.png'
        };
    }
}
</script>

事件绑定

• 作用：为元素绑定对应的事件

• 用法： v-on: xxx ，简写为 @ xxx

<template>
    <div>
      <div>
        <input type="button" value="保存" v-on:click="handleSave"/>
        <input type="button" value="保存" @click="handleSave"/><br>
      </div>
    </div>
  </template>
<script>
export default {
    data(){ return { name: ‘张三’}
    },
    methods: {
        handleSave(){
            alert(this.name)
        }
    }
}
</script>

双向绑定

• 作用：表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方

• 用法： v-model

<template>
    <div>
        <div>
            双向绑定：{{ name }}
            <input type="text" v-model="name" />
            <input type="button" value="改变" @click="handleChange"/>
        </div>
    </div>
  </template>
<script>
export default {
    data(){return {name: '张三'}
    },
    methods: {
        handleChange(){
            this.name = '李四'
        }
    }
}
</script>

条件渲染

• 作用：根据表达式的值来动态渲染页面元素

• 用法： v-if 、 v-else 、 v-else-if

<template>
    <div>
        <div v-if="sex == 1">
            男
        </div>
        <div v-else-if="sex == 2">
            女
        </div>
        <div v-else>
            未知
        </div>
    </div>
  </template>
  
<script>
export default {
    data(){
        return {sex: 1}
    }
}
</script>

axios异步请求

安装命令（在终端命令行中）：

        npm install axios

导入命令

        import axios from 'axios'

API列表：

参数说明：

• url ：请求路径

• data ：请求体数据，最常见的是 JSON 格式数据

• config ：配置对象，可以设置查询参数、请求头信息

解决跨越问题，在vue.config.js文件中配置代理：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 7070,
    proxy:{
      '/api':{
        target:'http://localhost:8080', // 根据需求来下目标路径
        pathRewrite:{                   // 路径重写
          '^/api':''
        }
      }
    }
  }
})