文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue基础

1、准备第一个Vue程序

创建vue项目：vue-demo是项目名，可以修改

vue create vue-demo

使用上下键按下图选择选项（最后一步选择npm，yran会报错，别问）
在这里插入图片描述

创建成功！就是这样滴
在这里插入图片描述

运行一下：进入项目，再运行
在这里插入图片描述

运行完成后会出现一个端口
在这里插入图片描述
在网页直接输入
在这里插入图片描述

2、模板语法和v-html

文本：数据绑定最常见的形式就是使用"Mustache"（双大括号）语法的文本插值。
在这里插入图片描述

v-html
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，要使用v-html
在这里插入图片描述

3、v-bind

属性Attribute：Mustache语法不能在HTML属性中使用，可以使用v-bind指令

v-bind:可以简写为:
在这里插入图片描述

在这里插入图片描述

4、使用JavaScript表达式

Vue.js都提供了完全的JavaScript表达式支持
每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
运算：
在这里插入图片描述
三元：
在这里插入图片描述

5、条件渲染v-if

v-if:
用于条件性地渲染一块内容。这块内容只会在指令地表达式返回true值的时候被渲染。

在这里插入图片描述

v-else:
表示v-if的”else块“
在这里插入图片描述
v-show:
true则显示
在这里插入图片描述

6、v-if与v-show的区别

v-if：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
v-show:不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

7、列表渲染v-for

用v-for把一个数组映射为一组元素
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
在这里插入图片描述
维护状态：
当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的keyattribute:
在这里插入图片描述

8、事件处理v-on

监听事件
使用v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时执行一些Javascript。用法为v-on:click="methodName"或使用快捷方法@click=“methodName”
在这里插入图片描述
事件处理方法
v-on可以接收一个需要调用的方法名称
点击按钮查看控制台：
在这里插入图片描述
点击按钮“消息通知”变为“消息已被撤回”
在这里插入图片描述
事件传递参数
在这里插入图片描述
在这里插入图片描述

9、表单输入绑定v-model

v-model指令在表单<input>、<textarea>、<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件来来更新数据，并在某种极端场景下进行一些特殊处理。
点击获取用户名，控制台里可查看

在这里插入图片描述

修饰符：

.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。添加lazy修饰符，从而转为在change事件（回车或失去焦点）之后进行同步。
在这里插入图片描述

.trim
如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符
在这里插入图片描述

二、组件基础

1、单文件组件

Vue单文件组件（又名.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板、逻辑和样式封装在单个文件中。

在这里插入图片描述

加载组件：
1、引入组件
2、挂载组件
3、显示组件：俩种方法

在这里插入图片描述
补充：
1、scoped

在这里插入图片描述
2、组件的组织
通常一个应用会以一颗嵌套的组件树的形式来组织。
一个大盒子里有很多小盒子，小盒子有小小盒子。

2、组件交互prop

Prop能完成组件之间的数据传递，将数据从父组件传递到子组件。
在这里插入图片描述
对传递数量及类型没有限制
例如：String、Number、Boolean、Array、Object、Function
在这里插入图片描述

注意：数组和对象必须使用函数进行返回
上面用<ul>+<li>标签用v-for进行解析

在这里插入图片描述

在这里插入图片描述

3、自定义事件组件互交$emit

$emit自定义事件可以在组件中反向传递数据，

在这里插入图片描述

4、组件的生命周期

⑴、创建时：beforeCreate、created
⑵、渲染时：beforeMount、mounted
⑶、更新时：beforeUpdate、update
⑷、卸载时：beforeUnmount、unmounted

和组件顺序无关，到了一个时期就会调用相应的函数（也就是按照以上的顺序进行调用）
在这里插入图片描述
补充：
在这里插入图片描述
在这里插入图片描述

三、Vue引入第三方

简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。
Swiper开源、免费、强大的触摸滑动插件;
是纯javascript打造的滑动特效插件，面向手机，平板电脑等移动终端；
能实现触屏焦点图、触屏Tab切换·、触屏轮播图切换等常用效果。

官方网址：https://www.swiper.com.cn/
Vue关于swiper相关网址：https://swiperjs.com/vue

案例：基础轮播图
在这里插入图片描述

添加指示器：

1、在<swiper>添加以下内容，按:modules形式加载
在这里插入图片描述
2、引入指示器Pagination及其css
在这里插入图片描述
3、返回
在这里插入图片描述

结果就是点击下面的点点切换到对应的图片
在这里插入图片描述

四、Axios网络请求

Axios是一个基于promise的网络请求库

组件引入（在main.js添加就是全局引入）：import axios from "axios"
另外全局引入还要添加配置，如下可参考：

在这里插入图片描述

使用方式：this.$axios

在这里插入图片描述

1、get请求：

http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php

在这里插入图片描述

在这里插入图片描述

2、post请求：

http://iwenwiki.com/api/blueberrypai/login.php

组件引入：import QueryString from "querystring"

安装依赖：cnpm install --save querystring
在这里插入图片描述
效果：
在这里插入图片描述

3、get、post快捷方案：

get快捷方案：
在这里插入图片描述

post快捷方案：

在这里插入图片描述

4、Axios网络请求封装

Axios参考文档：https://www.kancloud.cn/yunye/axios/234845
在日常应用过程中，一个项目中的网络请求会很多，此时一般采用的方案是将网络请求封装起来。

在src目录下创建文件夹utils,并创建文件request.js,用来存储网络请求对象axios
在这里插入图片描述

代码截图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

import axios from "axios";
import { config } from "process";
import querystring from "querystring"
import { compile } from "vue";

//对错误的处理方案
const errorHandle = (status,info) => {
    switch(status){
        case 400:
            console.log("语义有误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 403:
            console.log("服务器拒绝访问");
            break;
        case 404:
            console.log("地址错误");
            break;
        case 500:
            console.log("服务器遇到意外");
            break;
        case 502:
            console.log("服务器无响应");
            break;
        default:
            console.log(info);
            break;
    }
}

//通过create创建一个网络请求的一个对象instance
const instance = axios.create({
    //网络请求的公共配置
    //超时时间5秒
    timeout:5000
})

//拦截器最常用:

//1、发送数据之前
//interceptors：拦截器的对象，request请求对象，使用use方法处理拦截器
instance.interceptors.request.use(
    //成功的函数function(){}用箭头函数表示
    config => {
        if(config.method === "post"){
            //post请求需要转换
            config.data = querystring.stringify(config.data)
        }
        //config：包含着网络请求的所有信息
        return config;
    },
    //失败的函数function(){}用箭头函数表示
    error => {
        //调用失败的方法：reject()
        return Promise.reject(error)
    }
)

//2、获取数据之前
//使用response响应对象
instance.interceptors.response.use(
    //成功
    response => {
        //判断状态码status是否为200，200为成功。成功则使用resolve方法返回response；失败则使用reject方法
        //同样是返回response,但接收方式不一样
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
    },
    error => {
        //response代表着错误的信息
        const { response } = error;
        //对错误信息进行处理
        errorHandle(response.status,response.info)
    }
)


//导出instance
export default instance;

request.js：网络请求解决方案
同样在src里新建文件夹api，在api中新建文件path.js和index.js

在这里插入图片描述
path.js放路径
在这里插入图片描述
index.js网络请求方法
在这里插入图片描述
成功获取：
在这里插入图片描述

五、Vue路由配置

在终端安装router

1、Vue引入路由配置

1、在src文件夹中创建以下文件夹及文件
在这里插入图片描述

2、俩个页面vue组件添加<h3>标签
在这里插入图片描述

3、index.js配置独立的路由文件（截图中有配置说明）

在这里插入图片描述
代码：

//引入vue-router路由里的资源createRouter,createWebHashHistory
import { createRouter,createWebHashHistory } from "vue-router"
//引入俩个页面
import HomeView from "../views/HomeView"
import AboutView from "../views/AboutView"

//配置信息中需要页面的相关配置
//创建一个数组承载俩个页面的配置，每个页面配置都是对象类型
//且配置至少包含path路径和component(对应哪个组件)俩个信息
const routes = [
    //home页面
    {
        path:"/",
        name: 'home',
        component:HomeView  //对应home组件
    },
    //about页面
    {
        path:"/about",
        name: 'about',
        component:AboutView //对应about组件
    }
]

//创建router路由
const router = createRouter({
    //history代表访问方式,createWebHashHistory是函数要加()
    history: createWebHashHistory(),
    //把配置放进来
    routes

})

//导出
export default router;

补充一：
在这里插入图片描述

这里的createWebHashHistory可以用createWebHashHistory
home的网址就变成http://localhost:8080/
about就是http://localhost:8080/about
需要后台配合做重定向。否则会出现404问题
原理是H5 pushState()方法

createWebHashHistory的原理是a标签锚点连接

补充二：
为避免卡顿，使用异步加载，一般情况除了首页，其他页面均使用异步加载
在这里插入图片描述

4、在App.vue指定显示入口、指定路由跳转

在这里插入图片描述

5、main.js引入路由到项目
在这里插入图片描述
效果：点击导航跳转
在这里插入图片描述

2、路由传递参数

创建新项目vue-router-demo ：

vue create vue-router-demo

选择手动
在这里插入图片描述

选择三项
在这里插入图片描述
这里是n
在这里插入图片描述
回车就行

案例演示：实现新闻详情页面跳转

1、创建新闻首页NewsView.vue和用来演示的详情页面NewsDetailsView.vue（可以多个详情页面，根据新闻标题，这里三个新闻标题只使用一个详情页面）

在这里插入图片描述
2、配置路由

在这里插入图片描述

3、配置App.vue

在这里插入图片描述

4、在详情页面读取路由携带的参数

在这里插入图片描述

5、在跳转中携带参数

在这里插入图片描述

效果演示：
新闻页面👇

在这里插入图片描述

例如点击百度新闻（其他俩个以此类推）

在这里插入图片描述

六、嵌套路由配置

1、创建子路由要加载显示的页面
案例演示about的子页面👇
在这里插入图片描述
在这里插入图片描述

2、在路由配置文件中添加子路由配置+重定向配置

在这里插入图片描述
3、指定子路由显示位置<router-view></router-view>、添加子路由跳转链接

在这里插入图片描述

演示效果

在这里插入图片描述

# vue.js # javascript # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟