- 博客(18)
- 收藏
- 关注
RSS订阅原创 用vue去做全选反选案例
在前面的博客中有一个用js原生代码做的全选反选案例,这次我们用vue看看怎么去实现.其实思路都差不多,就是vue是无法直接操作dom的.1.准备 css样式自己准备一个即可. 用vue指令在终端创建一个项目.2.功能需求: 1.点击全选可以控制小选按钮 2.点击反选按钮可使所有小选按钮变成相反的状态. 3.当所有小选都被选中时全选也被选中,反之有一个小选没被选中时,全选都不会自动选中.3.代码实现 ...
2021-10-21 20:13:00
371
3
原创 vue中的过滤器
提起过滤器肯定不陌生,过滤其实就是转换,在模板字符串中也有过滤器,当然vue中过滤器其实和模板字符串的用法差不多.在vue中,过滤器只能存在于2个地方,一个就是插值表达式中,另一个就是v-bind指令中.vue的过滤器主要有俩种写法,一种是全局过滤器,另一个是局部过滤器.1.全局过滤器 全局过滤器根据字面意思就是在所有vue文件中都可以使用的过滤器.所以全局过滤器肯定是写在了一个和所有vue文件关联起来的一个地方. 在vue下的src里有一个入口文件main....
2021-10-21 18:46:45
559
原创 vue基础----v-on
1.目的 给标签绑定事件2.语法 1.v-on:事件名="要执行的==少量代码==" 2.v-on:事件名="methods中的函数" 3.v-on:事件名="methods中的函数(实参)"3.简写简写: @事件名="methods中的函数"4.代码<p>你要买商品的数量: {{count}}</p><button v-on:click="count = count...
2021-10-18 15:14:42
116
1
原创 vue基础----v-bind
1.目的:给标签的属性设置vue变量的值2. v-bind语法和简写 1.语法:v-bind:属性="vue变量" 2.简写: :属性="vue变量"3.代码<a v-bind:href="url">我是a标签</a><img :src="imgSrc">vue部分:...data:{ url:'连接', imgSrc:'图片的路...
2021-10-18 14:49:44
79
原创 vue指令---插值表达式
1.在我们配置好vue脚手架后会有一个app.vue的文件,我们的html写在这个页面里面即可.2.代码如下: <div> <h1>{{ msg }}</h1> </div>首先看到这个{{}}肯定不陌生,这是我们模板引擎的语法,胡子语法.vue的插值表达式也是这种写法.然后需要一个div盒子,用来装内容,接下来就开始写vue了.<script>new Vue({ el:'div', dat.
2021-10-18 14:19:24
543
1
原创 webpack打包
目录1.webpack的概念?1.webpack的概念?webpack本身是, node的一个第三方模块包, 用于打包代码 .2.webpack能做什么?3.步骤 1.需要安装yarn环境.安装 | Yarn 中文文档https://yarn.bootcss.com/docs/install/#windows-stable 如果不想下载也没事,只是代码运行的命令不同而已/ 2.安装webpack包和webpack-cli包...
2021-10-15 11:51:10
153
2
原创 京东倒计时案例
这个案例是各种网页中都算是比较常见的了,话不多说开始做吧.1.css结构css结构只需要准备三个盒子用来放内容就可以了.//css样式<style>#hour,#minute,#second{ width:100px; height:100px; float:left;}</style>//html页面结构<div id='time'> <div id='hour'></div> &
2021-10-14 14:49:49
391
2
原创 学会这几行代码,用nodejs轻轻松松连接数据库
用node去连接一个数据库有一个必不可少的部分,就是下包,需要用到的包有express,mysql.下好之后就直接导入模块.const express = require('express')const mysql = require('mysql')导入模块后就可以进行连接数据库了const db = mysql.createPool({ host: 'localhost', user: 'root', password: '2203118',
2021-10-13 18:02:52
182
原创 震惊!!!解决接口的跨域问题竟如此简单!!!
在编写get请求或者post请求时总是会遇到跨域问题,导致获取不到数据.解决跨域的方法有俩个,一个是cors,一个是jsonp.这俩个方法相比推荐使用cors,因为jsonp只针对get请求才能解决跨域.这是最常见的跨域报错问题.1.使用cors中间件解决跨域问题1.cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题2使用步骤 安装中间件： npm install cors ...
2021-10-10 19:23:03
367
3
原创 display：none；与visibility：hidden的区别是什么？
1、display:none它不占据空间，对后面的元素布局没有任何影响，visibility:hidden会占据原本的空间，会影响后面元素的布局。这是不加任何样式的三个盒子的排列这是加了display:none的样式,第一个盒子已经完全消失了这是加了visibility：hidden的样式,虽然盒子不见了,但是那个位置依然被占据.2、如果给父元素设置display:none，给它的子元素设置display:block，也不能显示出来，如果给父元素设置visibili...
2021-10-10 18:41:10
678
原创 轻轻松松用nodejs创建一个服务器
如何用nodejs创建服务器,第一步需要下载一个express包,在终端中输入npm i express.现将express导入到文件中,在声明一个常量app去接收.给实例添加一个listen监听事件,8080是端口号.最后在终端运行程序即可.是不是很简单....
2021-10-10 08:49:25
498
原创 简单实现js轮播图
制作轮播图非常简单,首先我们先准备一下css样式.1.需求说明(1).点击上一张会将图片切换成上一张图片,点击下一张会切换成下一张图片.(2).当图片为第一张时无法点击上一张,当图片为第一张时无法点击下一张.(3).点击下面的圆形按钮直接跳转至对应序列的图片.(4)图片区域每隔一段时间间隔会自动切换到下一张2.代码实现1.图片之间的动画切换效果在开始实现各种功能之前,我们需要知道的是每一个功能都伴随着...
2021-10-09 22:07:33
1766
原创 前端经典JQuery案例1--按钮全选
一.准备这个案例用的是JQuery技术.所以需要先导入JQuery文件.在准备一个下图的按钮样式二.分析1.功能分析1).点击全选按钮,下面的按钮都会变成选中状态,再次点击全选按钮,下面三个变成未选中状态2).点击下面的按钮会变成选中状态,当三个按钮全部选中时,全选按钮会变成选中状态3).当全选被选中时,取消任意一个按钮全选都会取消选中.2.绑定事件对于复选框的点击可以绑定点击事件也可以绑定change事件.change事件就是当状态发生改变时触发的事件...
2021-10-08 14:46:18
1005
原创 快速入门前端02--html
在html中有很多标签,有单标签,双标签,下面分三类介绍一些标签.1.h标签h标签是一个块级标签,块级标签的主要特点如果不设置高度宽度的话,高度是和内容高度一致,宽度占浏览器的一整行. 我们在body内输入我们的h标签.h标签分为6个,每个h标签的样式都不同,在浏览器中显示的效果也不同.唯一相同的是字体都是加粗的.这个后期学习了css可进行修改.字体大小依次减小.2.p...
2021-10-07 20:59:57
67
原创 快速入门前端01-html入门
看前思考:1.什么是网页?2. 什么是HTML?3. 网页的形成?1.什么是网页：1.网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。2.网页的组成?1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。3....
2021-10-07 20:34:03
60
原创 关于前端的一些问题
1.定义变量的几种方式分别是什么？有什么区别？答:var:是 ECMAScript6 版本以前一直使用的方式，由于这种方式 声明的变量在某些情况下会导致一些问题 let:let是块级作用域，函数内部使用let定义后，对函数外部无影响,值可以改变. const:值不能改变. 2.flex布局主轴有哪几种排列方法?(1) flex-start：项目靠近父盒子的左侧(2) flex-end：项目靠近父盒子的右侧(3) center ： 居中显示(4) space-ev...
2021-10-06 21:32:13
92
原创 什么是模块化?
1.什么是模块化?1.模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元2.编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块2.模块化的好处?-提高了代码的复用性 类似于js中的函数封装,可以反复使用.-提高了代码的可维护性 摸一个模块出现问题只需要对出问题的模块进行维护或者更新,不需要对整个项目文件进行.-可以...
2021-10-06 19:52:43
6311
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人