文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、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>
、添加子路由跳转链接
演示效果