- 博客(149)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 前端进阶Vue框架-----指令的写法
<title>Document</title> <script src="/lib/vue.js"></script></head><body> <div id="box"> <div v-hello>11111</div> </div> <script> // 创建指令 ...
2022-02-22 17:39:51
109
原创 前端进阶Vue框架-----Vue3生命周期
前面的创建和更新周期跟Vue2写法一致，最后的摧毁改变了写法，改变写法如下：摧毁前：beforeUnmount()摧毁后：Unmounted()
2022-02-22 17:35:08
208
原创 前端进阶Vue框架-----Vue3组件的写法
<script src="/lib/vue3.global.js"></script> </head><body> <div id="box"> {{myname}} <navbar myname="aaa"> <div>11111111</div> </navbar> <...
2022-02-22 16:58:33
952
原创 前端进阶Vue框架-----swiper（轮播图）小插件
官网地址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发vant组件官网：Vant 3 - Mobile UI Components built on Vue
2022-02-22 16:35:48
530
原创 前端进阶Vue框架-----组件生命周期
每个组件都会有一个生命周期，创建之前的生命周期只能执行一次<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
2022-02-21 19:25:08
134
原创 前端进阶Vue框架-----过渡效果
<script src="/lib/vue.js"></script> <style> /* 进场动画 */ .xby-enter-active { animation: aaa 1.5s; } /* 出场动画 */ .xby-leave-active { animation: aaa 1.5s reverse; ...
2022-02-21 15:27:29
302
原创 前端进阶Vue框架-----插槽（slot）新版与旧版
旧版：在组件中一般会留有 <slot>插槽，方便修改组件中的一些内容单个插槽：具名插槽：新版：利用<template>标签包裹，两种写法，一个时用全称指向哪个组件，另一种直接用#号指向...
2022-02-19 17:35:38
454
原创 前端进阶Vue框架-----子传父（组件，事件）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
2022-02-18 17:41:00
190
原创 前端进阶Vue框架-----父传子（组件验证，默认属性）
<title>Document</title> <script src="/lib/vue.js"></script></head><body> <div id="box"> <!-- 1.想要定义在内容里显示什么内容，先定义一个数据，然后传到props中接收，再用{{传下来的值}}显示 2.想要让右边的按钮隐藏，可以先动态绑定一个布尔值数据...
2022-02-18 16:18:38
223
原创 前端进阶Vue框架-----局部组件（初始）
<title>Document</title> <script src="/lib/vue.js"></script></head><body> <div id="box"> <xby></xby> <xby></xby> <xby3></xby3> </div&g...
2022-02-18 15:49:25
107
原创 前端进阶Vue框架-----全局组件（初始）
<script src="/lib/vue.js"></script></head><body> <div id="box"> 自定义组件名，不要驼峰命名，不然要用-连接 <xby></xby> <xby></xby> </div> <script> // 定义一...
2022-02-18 13:12:49
171
原创 前端进阶Vue框架-----axios库（get和post）
首先，使用axios想要下载好包。下载地址：axios - npm进入地址直接往下找，找到如图CDN的下载地址然后打开地址保存文件，存在文件中，方便导入 axios.js然后再通过script src="文件的位置" 就导入了、axios介绍：get请求相对的方便了很多 <title>Document</title> <script src="/lib/vue.js"></script> ...
2022-02-17 18:14:47
121
原创 前端进阶Vue框架-----fetch库-get练习案例
<script src="/lib/vue.js"></script> <style> li{ overflow: hidden; list-style: none; padding: 10px; } li img{ float: left; width: 100px; ...
2022-02-17 17:37:49
139
原创 前端进阶Vue框架-----watch（监听）
<script src="/lib/vue.js"></script></head><body> <div id="box"> <input type="text" v-model="mytext"> <button >搜索</button> <ul> <li v-for="item in datal...
2022-02-17 16:12:51
191
原创 前端进阶Vue框架-----计算属性与方法的不同
方法一般会用在事件绑定以及事件处理器上。方法通俗点来说就是个老实人，修改了多少次值就会老老实实执行多少次，但是计算属性不同，要是有重复的代码就会根据缓存去快速执行一次。比如我们现实生活中打代码一样，看到重复的代码会一模一样跟着敲，这就是方法；看到重复的代码直接粘贴复制，这就是计算属性。...
2022-02-17 15:43:58
60
原创 前端进阶Vue框架-----表单控件绑定练习（购物车）
<script src="/lib/vue3.global.js"></script> <style> li{ display: flex; justify-content: space-around; padding: 10px } li img{ width: 100px; } &...
2022-02-16 22:03:44
292
原创 前端进阶Vue框架练习小案例-----模糊查询
方法一：函数表达式 <script src="/lib/vue.js"></script></head><body> <div id="box"> <input type="text" @input="jianting" v-model="mytext"> <button >搜索</button> <ul>
2022-02-15 15:55:08
171
原创 前端进阶Vue框架-----列表渲染及key值设置的底层原理
v-for=" 参数名 in 要渲染的数据名"in和of没有任何的区别 <li v-for="item in datalist"> {{item.ishw}}--</li>key的设置，一般来说在列表渲染的时候都要加上key值。那么为什么要加上key值呢？因为在列表的渲染中太多数据是重复的，所以很不友好，加上key 值就是为了复用，达到最小的代价去更新。key值的设置方法：：key="id"要通过动态绑定，设置一..
2022-02-15 14:59:49
633
原创 前端进阶Vue框架-----条件渲染和包装元素（template）
v-ifv-else-ifv-else <script src="/lib/vue.js"></script></head><body> <div>订单状态</div> <div id="box"> <ul> <li v-for="item in datalist"> {{item.ishw}}--
2022-02-15 14:03:28
289
原创 前端进阶Vue框架-----Vue3模板语法
注意：使用Vue3的时候要导入Vue3的包使用 <script src="/lib/vue3.global.js"></script> </head><body> <div id="box"> {{10+20}} {{name}} </div> <script> var obj = { // 函数式 data(){.
2022-02-15 13:42:31
358
原创 前端进阶Vue框架-----模板语法小案例
<script src="/lib/vue.js"></script></head><body> <div id="box"> <input type="text" v-model="mytest"> <button @click="tianjia()">添加</button> <ul v-show="datalist.l..
2022-02-14 16:02:20
97
原创 前端进阶Vue框架-----模板语法
<script src="/lib/vue.js"></script> <style> .red{ background-color: red; } .yellow{ background-color: yellow; } </style></head><body> <div...
2022-02-14 15:31:50
69
原创 前端进阶Vue框架-----安装指南
进入Vue官网，介绍 — Vue.js 选择版本，复制链接 打开链接，保存到本地文件 再通过<script src="下载的文件名"></script>引入
2022-02-10 23:37:37
164
原创 前端进阶Ajax-----GET和POST请求
<script> // get请求 var xhr = new XMLHttpRequest(); // 需要携带参数 // 因为是GET请求，直接在地址后面进行参数的书写 xhr.open('GET',"http://locahost:888/test/second?name=小不言&age=18",true); xhr.onload = function(){ ...
2022-02-10 16:34:36
173
原创 前端进阶Ajax----步骤
后端返回的是字符串时： <script> // 1.创建一个ajax对象 var xhr = new XMLHttpRequest(); // 2.配置本次的请求信息 // xhr.open(请求方式，请求地址，是否异步) // 请求方式：按照接口文档来进行书写 // 请求地址:按照接口文档来书写 // 是否异步:默认是 true 表示异步请求，选填为 flas ,表...
2022-02-10 15:53:11
206
空空如也
后端有优势但比较喜欢前端该怎么选择？
2021-12-15
大专Java开发会有公司要吗
2021-12-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人