vue3基础知识+基础框架搭建

1.基础知识

1.1 js 的导入导出

#导出

export 内容

export {内容1,内容2}

export default {}

#导入

<script type="moudle">

        import {...} from '...'

</script>

1.2  vue常用指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为html标签绑定属性值，设置href、css样式等
v-if / v-else-if / v-else	条件性的渲染某元素
v-show	根据条件展示某元素，切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件

1.3 vue生命周期

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
updated	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

1.4 Axios请求接口

 

• method：请求方式
• url：请求地址
• data：请求体

1.5 vue文件结构

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 全局样式 */
</style>

• template：相当于html
• script：相当于js
• style：相当于css 

1.6 vue API风格

 1.6.1 选项式API

        选项式 API 是 Vue 2 中引入的编程风格，通过配置对象的不同选项（如 data、methods、computed 等）来组织组件的逻辑。

<template>
  <div>
    <p>{
  { message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Message Updated!';
    }
  }
};
</script>

1.6.2 组合式API

        组合式 API 是在 Vue 3 中引入的新编程风格，通过 setup 函数和 Composition Functions 将逻辑组合在一起，使得逻辑复用更加灵活。 

<template>
  <div>
    <p>{
  { message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue!');
const updateMessage = () => {
  message.value = 'Message Updated!';
};
</script>

• setup下的属性都是响应式属性，访问其内容都要