发布日期: 2024-07-03

文章字数: 1.5k

阅读时长: 6 分

阅读次数:

前端开发-Vue3

JavaScript-导入导出

JS提供的导入导出机制，可以实现按需导入。
也可以实现批量导入导出。
导入导出的时候，可以使用as重命名。
也可以实现默认导出。

showMessage.js

//简单的展示信息
/* export */ function simpleMessage(msg){
    console.log(msg)
}

//复杂的展示信息
/* export */ function complexMessage(msg){
    console.log(new Date()+": "+msg)
}

//批量导出
export {complexMessage as cm, simpleMessage as sm}

message.html

<body>
    <div id="app">
        <button id="btn">点我展示信息</button>
    </div>
    <script type="module">
        import {cm} from './showMessage.js';
        document.getElementById('btn').onclick = function(){
            cm('我被点击了...');
        }
    </script>	
</body>

Vue

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。

Vue

局部使用vue

快速入门
常用指令
生命周期

快速入门

Vue

常用指令

指令：HTML标签带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

v-for

作用：列表渲染，遍历容器的元素或者对象的属性。

语法：v-for = "(item, index) in items"

参数说明：

items为遍历数组
item为遍历出来的元素
index为索引/下标，从0开始；可以省略，省略index语法：v-for = "item in items"

遍历的数组，必须定义在data中；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind

作用：动态为 HTML 标签绑定属性值，如设置 href, src, style样式等。

语法：v-bind：属性名="属性值"

简化：:属性名="属性值"

v-bind 所绑定的数据，必须在data中定义。

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的。

v-if

语法：v-if="表达式"，表达式的值为 true，显示；false，隐藏。

其他：可以配合 v-esle-if / v-else 进行链式调用条件判断。

v-if 适用于显示与隐藏切换不频繁的场景。

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）。

v-show

语法：v-show="表达式"，表达式值为true，显示；false，隐藏。

原理：基于CSS样式display来控制元素显示与隐藏。

适用于显示与隐藏切换频繁的场景。

v-on

作用：为 HTML 标签绑定事件。

语法：v-on:事件名="函数名"

简写为 @事件名="函数名"

函数需要定义在methods选项内部。

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据。

数据<—->试图

语法：v-model="变量名"

v-model 中绑定的变量，必须在data中定义。

生命周期

指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码。

Vue生命周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。

钩子函数

Axios：Axios对原生的Ajax进行了封装，简化书写，快速开发。

https://www.axios-http.cn/

Axios发送异步请求，使用步骤：

引入Axios的js文件（参考官网）
使用Axios发送请求，并获取相应结果
Axios
method：请求方式，GET/POST…
url：请求路径
data：请求数据(可选)

Axios-请求方式别名(推荐)

为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data [, config]])
Axios别名方式发送请求

整站使用vue

Vue项目构建工具
Vue项目目录结构
Vue项目开发流程
Element-Plus

环境准备

介绍：create-vue是Vue官方提供的最新脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包

依赖环境：NodeJS（nodejs.org）,npm：Node Package Manager，是NodeJS的软件包管理器。

Vue项目创建和启动

创建

创建一个工程化的Vue项目，执行命令：npm init vue@latest

create-vue

安装依赖

进入项目目录，执行命令安装当前项目的依赖：npm install

目录结构

vue目录结构

启动

执行命令：npm run dev，就可以启动vue项目了。

访问项目：打开浏览器，在浏览器地址栏访问http://127.0.0.1:5173就可以访问到vue项目。

Vue项目开发流程

开发流程

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件(SFC,Single-File Components) 。Vue的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里 (*.vue)。

App.vue

Vue项目的入口文件：main.js 。
Vue的单文件组件中包含三个部分（script,template,style）。

API风格

Vue的组件有两种不同的风格：组合式API和选项式API。

选项式API，可以用包含多个选项的对象来描述组建的逻辑，如：data，methods，mounted等。

选项式API(清晰)

<script>
export default {
  data() { //声明响应式对象
    return {
      count: 0
    }
  },
  methods: { //声明方法，可以通过组件实例访问
    increment: function () {
      this.count++;
    }
  },
  mounted() { //声明钩子函数
    console.log('Vue mounted');
  }
}
</script>
<template>
  <button @click="increment">count:{{count}}</button>
</template>

组合式API(灵活)

<script setup>
import { onMounted, ref } from 'vue';
const count = ref(0); //声明响应式变量
function increment() { //声明函数
  count.value++;
}
onMounted(() => { //声明钩子函数
  console.log('Vue Mounted...');
})
</script>
<template>
  <button @click="increment">count:{{count}}</button>
</template>