- 博客(73)
- 收藏
- 关注
RSS订阅原创 Vue-路由对象vue-router的基本使用
监听Hash值的改变切换不同组件hash值改变时触发window.onhashchange = function(){location.hash（获取hash值）}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/vue-2.4.0.js"></script>
2021-01-12 15:32:51
265
原创 Vue-使用axios请求数据
<script src="../lib/axios.min.js"></script><script src="../lib/vue-2.4.0.js"></script><div id="app"> <input type="button" value="Get请求" @click="getInfo"> <input type="button" value="Post请求" @click="postInfo">&
2020-12-29 17:26:45
242
1
原创 Vue-(vue-resource请求数据)，get、post请求，async await使用
<script type="text/javascript" src="../lib/vue-2.4.0.js"></script><script type="text/javascript" src="../lib/vue-resource-1.3.4.js"></script><div id="app"> <input type="button" value="Get请求" @click="getInfo" /> <
2020-12-29 16:41:05
1113
1
原创 Vue-自定义指令（获取焦点、设置字体颜色指令实例）
<div id="app"><label> Id： <input type="text" v-model="id" /></label><label> 品牌： <input type="text" v-model="name" /></label><button type="button" @click="add">添加</button><br /><la
2020-12-23 16:52:57
1293
原创 Vue-过滤器（全局过滤器、私有过滤器）
<div id="app"> <h3>{{msg | strFilter('莫名其妙') | strFilter2}}</h3> <br /> </div><div id="app2"> <h3>{{msg2 | strFilter}}</h3></div>// 自定义一个全局过滤器// .filter('过滤器的名称', 过滤器的处理函数)// 过滤器的处理函数中参数1：
2020-12-23 15:55:03
138
原创 Vue-增加、删除、查询数据并在页面中显示（包含数组的filter方法）
<div id="app"> <label> Id： <input type="text" v-model="id" /> </label> <label> 品牌： <input type="text" v-model="name" /> </label> <button type="button" @click="add">添加</button> <br
2020-12-07 16:37:37
494
原创 解构赋值
//1、两边必须类型一致 let {a,b} = {a: 10, b: 20, c: 30}; console.log(a,b); let [c,d] = [1,2]; console.log(c,d); //2、右边必须符合各类型的书写标准 // let {e,f} = {3,4};//右侧类型格式错误，不是对象 // console.log(e,f); //3、声明和赋值需要同步进行 // let [j,h];//报错 .
2020-12-07 16:33:52
103
原创 Vue(v-if、v-show的使用)
1、v-if 和v-show 只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态2、v-if 是通过实时的创建或移除元素，从而达到元素的显示和隐藏3、v-show 是通过为元素添加或移除 display: none来实现隐藏和显示4、如果元素需要频繁的切换显示和隐藏，使用v-show更合适。如果元素被创建出来之后，可能不会进行状态的切换，使用v-if更合适5、v-show有更高的初始渲染消耗，而v-if有更高的切换消耗<div id="app"> {{flag}} ---
2020-12-07 14:58:59
272
原创 Vue-(v-for循环的使用)
for循环数组、对象数组<div id="app"> <!-- v-for循环数组，(item值每一项) --> <ul> <li v-for="item in list">{{ item }}</li> </ul> <ul> <!-- i 是索引 --> <li v-for="(item,i) in list">{{ item + '=======' + i}}</l
2020-12-07 14:37:14
215
原创 Vue-样式设置（style、class）
class样式.red{ color: red;}.weight{ font-weight: 200;}.border{ border: 1px solid #FFD700;}<div id="app"> <!-- 直接传递一个数组，这里的class要使用v-bind做数据绑定 --> <!-- <h1 :class="['red', 'weight']">这是一个大大的h1</h1> --> <!-- 在数组
2020-12-07 11:48:12
451
原创 Vue-双向数据绑定(v-model)
<div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能实现数据的单向绑定, 从 M 自动绑定到 V，不能实现数据的双向绑定 --> <input type="text" v-bind:value="msg" style="width: 300px;" /> <!-- v-model 实现数据的双向绑定 --> <!-- 只能在表单元素中使用 --> <input
2020-12-07 11:28:24
87
原创 Vue-事件修饰符(.stop、.prepent、.capture、.self、.once)
<div id="app"> <!-- .stop阻止冒泡行为 --> <!-- <div class="innerDiv" @click="innerClick"> <input type="button" value="按钮" @click.stop="btnClick" /> </div> --> <!-- .prevent 阻止默认事件 --> <!-- &
2020-12-07 11:25:06
198
原创 很多元素在ajax请求开始和请求完成时触发相同的事件（ajaxStart()、ajaxComplete()）
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title> <style> .cover { height: 100%; width: 100%; position: absolute; left: 0; top: 0;
2020-09-15 17:24:56
166
原创 模板引擎template
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title></head><body> <h2>模板引擎的使用</h2></body></html><!-- 导入js --><script src="
2020-09-15 17:15:34
250
原创 ajax解析JSON
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title></head><body> <input type="button" value='获取JSON格式的数据'></body></html><script> // 点
2020-09-02 17:14:30
328
原创 JSON的基本用法
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>title</title></head><body> <h2>JSON的基本用法</h2></body><script> /* 1.JSON是一种数据的格式 2.JS
2020-09-02 17:09:39
298
原创 ajax php 解析xml
.responseXML获取数据库返回的XML代码（类似于整个HTML代码，有标签）<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body> <h2>请求XML文件</h2> <input type="button" value="
2020-09-01 17:04:28
129
原创 ajax回调函数onreadystatechange
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title></title></head><body> <input type="button" value="触发" /> <script> document.querySelector('input').onclick
2020-09-01 15:12:54
620
原创 php提交数据 get 提交数据 查询数据 返回给浏览器查询到的数据
1、action属性指定提交数据的地址2、method属性设置提交方式（get或post）3、input标签的name属性，标记需要提交的数据4、php中$GET接收提交过来的数据<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title></head><body>
2020-08-14 18:05:48
371
原创 php查询数据库
inclub ‘数据库地址’;<?php //查询数据库，引入假数据 include 'data_lol_list.php'; //读取数据 /* $heroArr =array( array( "champion_icon"=> "images/1498811286269.jpg", "champion_name"=>"凯隐", ),
2020-08-14 15:06:31
236
原创 php数组的格式
一般数组<?php //中文编码格式 header('content-type:text/html;charset=utf-8'); //定义数组 $foodArr = array('榴莲','臭豆腐炒榴莲','番茄炒西红柿','油炸冰块');//使用array定义数组 //获取数组元素 echo $foodArr[1]; //直接打印数组的所有内容 // echo $foodArr; echo '<br />
2020-08-14 15:03:56
610
原创 filter方法，筛选出符合条件的数组元素
//筛选出偶数组成新的数组 let arr = [1,8,57,6,36,89,23]; let result = arr.filter(function (item) { if(item % 2 == 1){ return false; }else { return true; } }); conso..
2020-07-31 18:03:18
693
原创 result方法，求和求平均值等
let arr = [10,20,30,40,50,60,70]; //求平均数 let result = arr.reduce(function (tmp, item, index) {//temp表示返回值，初始值为第1个元素。item表示每个元素，从第2个开始 if(index == arr.length - 1){ return (tmp + item)/arr.length;//最后一个元素的时候先求和，..
2020-07-31 17:55:21
511
原创 map方法 映射
数组一一对应 let arr = [60,30,70,44,89]; let arr2 = arr.map(function (item) { if(item >= 60){ return "及格"; }else { return "不及格"; } }); console.log(arr,arr2);// [60
2020-07-31 17:54:18
187
原创 ...的作用 收集（剩余参数），展开（数组展开，对象展开）
//剩余参数 function fn(a,b,...c) {//剩余参数只能在最后一个 console.log(a,b,c); } fn(1,2,3,4,5,6,7); fn(1);//最后的剩余参数是一个数组 //数组展开 let arr1 = [1,2,3,4]; let arr2 = [5,6,7]; let arr = [...arr1, ...arr2] console.log(arr);//[1,2,3,.
2020-07-31 17:06:21
390
原创 箭头函数
/*箭头函数 1、function(){ ...... } 简写为()=>{} 2、如果有且仅有一个参数，()也可以不写 如果有且仅有一个语句并且是return，{}也可以不写 function (a){ return a + 2; }可以简写为 a=> a+2; 3、修正this的指向，this始终指向初始的对象 */ // let jso
2020-07-31 16:51:12
173
1
原创 let变量声明 const常量声明
<script> let a = 10;//let 防止重复声明， 可以声明变量，可修改，块级 a = 5; alert(a); const b = 20; b = 30; alert(b);//报错。const 防止重复声明，可以声明常量，不可修改，块级 </script>...
2020-07-29 15:51:57
96
原创 each()方法遍历
$(function () { //each方法遍历对象 $("#ulList>li").each(function (index, element) { console.log(index);//每个li元素对应的索引，按顺序 console.log(element);//每个li元素，按顺序 //每个li元素添加opacity属性 $(element).css("opacity", (index + 1)/10); .
2020-07-16 17:33:56
234
原创 阻止默认跳转、阻止事件冒泡
$(function () { //a标签点击事件 $("#link").on("click",function (e) { alert("a标签被点击了"); // return false;//阻止冒泡事件、阻止默认跳转 // e.preventDefault();//阻止默认跳转事件 e.stopPropagation();//阻止事件冒泡 }); //bady点击事件 $("body").on("clic
2020-07-14 17:16:40
235
原创 offset方法和position方法
* { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; position: relative; margin: 50px; } .son { width: 200px; height: 200px; backgr
2020-07-06 17:27:32
327
原创 点击按钮实现返回顶部
<div class="actGotop"><a href="javascript:;" title="Top"></a></div><script src="jquery-1.12.4.js"></script><script>$(function () { $(window).scroll(function () { if($(window).scrollTop() >= 1000){
2020-07-06 16:21:19
161
原创 JQ获取元素宽度、浏览器可视区域
$(function () { //获取div的宽度 console.log($("div").width());//200数字类型，只获取width console.log($("div").css("width"));//200px字符串类型 console.log($("div").innerWidth());//width+padding console.log($("div").outerWidth());//width+padding+border
2020-07-02 17:43:48
842
原创 JQ---属性操作用attr()方法，属性值为布尔类型时用prop()方法
//样式：在style里面写的，用css来操作。-->//属性：在里面里面写的，用attr方法操作。--><img src="04.gif" alt="突破了" title="对对对"><script src="../jquery/jquery-1.12.4.js"></script><script> $(function () { //css设置、获取样式--->style里面是属性 //设置属性 .
2020-06-19 16:04:14
481
原创 jq---css的设置属性和获取属性操作
<div> <ul> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> </ul></div><script src="../jquery/jquery-1.11.3.js"></script&g
2020-06-18 16:14:27
216
原创 用字符串中可以使用正则表达式的方法，match()、exec()
var str = "移动：10086，联通：10010，电信：10000"; // var array = str.match(/[\d]{5}/); var array = str.match(/[\d]{5}/g);//字符串.match(正则表达式)，匹配符合正则表达式的元素，放在数组中。g表示全局匹配 console.log(array); var email = "zhezhenshimeihao@126.com.cn";
2020-06-12 17:56:57
275
原创 正则表达式---身份证、邮箱、密码、中文名
/* * 元字符： * . 表示的是：除了\n以外的任意的一个字符 * * [] 表示的是范围， [0-9]表示的是0到9之间的任意一个数字 [a-z]表示的是：所有小写字母中的任意一个 [0-9a-zA-Z]表示的是所有的数字或者字母中的一个 * * [] 另一个含义：把正则表达式中元字符的意义去掉，显示本来的意思 [.]就表示一个. * * | 或者 [0-9]|[a-z]表示的是要么是一个数字，要么是一个小写字母 *
2020-06-11 14:30:36
764
原创 给每个按钮分别点赞--闭包
<script>window.onload = function(){ //获取input标签 var btnObj = document.getElementsByTagName("input"); //闭包缓存点赞数的数据 function getValue(){ var value = 1; return function(){ value++; this.value = "点赞（"+value+"）"; }; } //分别给每个按钮注册点击事件
2020-06-04 15:07:08
203
原创 改变this指向---apply、call方法和bind方法
apply的使用语法：函数名字.apply(对象, [参数1,参数2,…]);方法名字.apply(对象, [参数1,参数2,…]);call的使用语法：函数名字.call(对象, 参数1,参数2,…);方法名字.call(对象, 参数1,参数2,…);只要想使用别的对象的方法，并且希望这个方法是当前对象的，那么就可以使用apply或者是call的方法改变this的指向apply和call方法并不在函数这个实例对象中，而是在Function的prototype中。function f1(x,
2020-05-31 13:59:57
214
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人