欣儿砸的博客

原创 Vue 单向数据流和数据双向绑定

一、单向数据流 --- 只能从一个方向修改数据 数据从父组件传给子组件，只能单向绑定，子组件对父组件的数据只能访问不能修改。 父组件通过props传递数据给子组件，父组件是不能是直接访问子组件的数据的。二 、 数据双向绑定原理 1. vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属...

原创 CSS3选择器

1.css3 有哪些选择器- 基本选择器- 层次选择器- 动态伪类选择器目标伪类选择器：语言伪类选择器-- UI元素状态伪类选择器-- 结构伪类选择器举个例子：对n的具体解释：-- 否定伪类选择器-- 伪元素-- 属性选择器...

原创 数组的属性和方法

1. Array 对象属性：-- constructor: 返回对 创建此对象的数组函数的引用-- length: 设置或返回数组中元素的数目（length属性不是只读的）-- prototype : 向对象添加属性和方法2. Array 对象方法 -- 栈方法： push() 可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的...

转载 2019-06-25 Vue.js

2019-06-251.Vue.js 是一套用于构建用户界面的渐进式JavaScript框架，它是数据驱动的，无须进行手工操作DOM。2.引入： 可以通过script标签引入，下载并引入。3.MVVM模式（Model-View-ViewModel） 3.1定义View vue.js采用声明式渲染，允许采用简洁的模板语法来声明式地将数据渲染进DOM.这将数...

转载 2019-06-26 Vue.js

2019-06-26一、 计算属性和侦听器模板内可以写表达式，但是在模板中放入太多的逻辑会让模板过重且难以维护，所以当涉及到复杂的逻辑运算时，应当使用计算属性。 1.计算属性 计算属性写computed属性中。eg: 在下图代码中，我们声明了一个计算属性 reverseText，使用计算属性时像绑定普通属性一样在模板中绑定计算属性即可。 计算属性...

原创 信息管理系统

零、 架构1. 前后端分离的架构2. http(s)- ajax3.接口- url- request(header,body)- response(header,body<json>)- type(get,post,put,patch,delete)- content-type(formdata,json)4.mock- http-proxy-middlewar...

转载 Express 脚手架

1.初始化详见： http://www.expressjs.com.cn/starter/generator.html 使用express-generator生成器可以快速创建一个应用的骨架。2. 通过生成器创建的应用一般都有如下目录结构：详见：https://www.jianshu.com/p/b555ba6f4067...

原创 M站

1.前后端架构- 前后端分离：前端后端两套分支，前端通过http请求后端接口，后端只关注接口开发，通过 index.html / index.php 来和前端对接- 前端架构RMVC + gulp + 模块化（CommonJS,ES Module） + sass + 前端模板 +UI框架 + JS库2.gulp- 启动server --> gulp-webser...

原创 npm脚本

npm就是Node.js的包管理工具，应用这个包管理工具可以使用别人写好的JavaScript·代码，只需将npm官网上已经打包好的模块通过npm安装就可以直接使用1.概念npm允许在 package.json文件里使用scripts字段定义脚本命令。 eg:上面为package.json里面的一个片段，里面的scripts字段为一个对象，它的每一个属性对应一段脚本。使用 npn ...

转载 JavaScript 模块化

向大牛学习http://www.ruanyifeng.com/blog/2012/11/require_js.html1.模块就是实现特定功能的一组方法。可以用过加载写好的模块，实现特定的功能2.模块的编写方法：（1）ECMA6 中的新语法实现模块化（目前只有chrome浏览器支持）：<script type = "module">//......</s...

原创 第一次周考题目

1. DOM节点层次问题：nodeName 和 nodeValue 1.0 Document 类型 nodeName 的值为 "#document" ,nodeValue 的值为 ： null 2.0 Element 类型 （元素节点） nodeName 的值为元素的标签名 , nodeValue 的值为 ： null...

原创 Object.values() 和 数组的 some()方法

1.Object.values() （Object函数的方法） -- 返回一个数组eg:2.数组的 some()方法

原创 鼠标拖拽相关例题 --- 实现简单的拖拽效果

1.0效果图 ，鼠标按下移动时div跟随鼠标移动，当鼠标被松开时停止，但是当鼠标离开浏览器页面时，div最多到达边界需要计算的值为：代码实现：...

原创 事件

1.JavaScript和html的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定交互瞬间。2.事件驱动模型：由事件的发生来触发程序的执行。常见的事件 1.0 鼠标事件：ps:onmouseenter 事件类似于onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。onmouseleave 事件类似于onmouseo...

原创 用JS实现 输入框的默认值

用JS实现 输入框的默认值实现效果：初始状态 ---------->输入文本内容时 ----------->清除文本内容后代码实现：

原创 Date ----- 验证码的生成（简易版）

生成含有字母和数字的验证码：实现效果如下：每一次生成不同的验证码 代码实现如下：

原创 Date -- 实现倒计时

倒计时：实现效果如下：（根据时间变化而变化）-------》

原创 Date -- 实现简易进度条

计时器和控制计时器的结束实现简易进度条实现效果：1.0 初始时为02.0 进度条与数字同步变化 3.0 达到100%时停止html和css代码如下：JS代码 ---- 利用ssetInterval()函数来控制进度条的变化，clearInterval()控制计时器的结束...

原创 Date ----数码时钟

呈现效果： 获取当前时间，并且显示效果与时间对应着变化 代码实现：打印imgs可以看到，imgs为一个数组，且元素为 img标签...

原创 字符串

1.定义方式 1.0 使用常量定义字符串 var str = "abc"; // 创建一个字符串， String类型 2.0 使用new关键字 var str = new String("abc"); // 创建一个对象，为 object类型eg: 两者的不同PS：基本数据类型的字符串，也可以调用所有字符串已有的方法2.字符串的遍历和修改...

原创 字符串练习 ---- 密码强度校验

html+cssjs部分：运行结果如下：初始

原创 字符串练习题-------用户名校验

题目要求：账号长度在6,20之间, 数字不能开头, 只能使用数字字母下划线$组成

原创 字符串练习题 --- 字符串的过滤（还存在较多问题）

eg： 过滤掉敏感词汇css部分：html部分JS部分：运行结果如下：

原创 排序

1.0 数组的默认排序（效率比较低，基本不用）2.0冒泡排序算法 --- 相邻的两两比较，每次都能选出当前未排序序列中的最大值代码实现如下：输出结果如下：3.0选择排序算法 ---- 从当前数组的第一个值开始依次与后面的元素进行比较，每次都能选出当前未排序序列当中最小的值代码实现如下优化编写swap函数，必须要把数组传进去4.0快...

原创 实现 表格填充 随机数与随机颜色

代码如下：用rgb()函数，里面填充的数字为十进制第二种颜色实现转成16进制时注意 类似于 05 进制转换后会只剩下5 表示16进制的颜色数 会不足6位。...

原创 网课笔记 ----- 预编译

单线程解释型语言1.作用域的定义：变量（变量作用域又称上下文）和函数生效（能被访问）的区域2.全局变量 局部变量： 在函数内定义的变量 函数里可以访问全局里的变量 函数外面不能访问函数内的变量（越往里权限越大）3.JS运行三步： 语法分析（通篇扫描但是不执行），预编译，解释执行4.预编译：函数声明整体提升 --> 函数声明不管写到哪里总...

原创 逻辑运算符 && ||

&& 可以应用于任何类型的操作数，不只是布尔值（短路操作）1.如果第一个操作数是对象，则返回第二个操作数2.如果第二个数是对象，则只有第一个操作数的求值结果为true时才会返回该操作数。3.如果两个操作数都是对象，则返回第二个操作数4.如果有一个操作数是null/NaN/undefined,则返回他们自己ps: 先看&&前的内容转换为布尔值是...

原创 for循环练习题

空心菱形效果图

原创 把非数值转换为数值的函数：Number(),parseInt(),parseFloat()

Number()可以用于任何数据类型。而parseInt(),parseFloat()专门用于把字符串转换为数值1.Number()的转换规则1.0 Boolean,true 和 false 将分别被转为1 和 02.0数字值，则只是简单的传入和返回3.0null值，返回04.0 undefined，返回 NaN5.0 如果是字符串： 1.如果字符...

原创 JS课下作业

原创 JavaScript基础课01（2019-04-08）

1.JavaScript ------- 是一个面向对象的跨平台脚本语言跨平台：脚本：HTML文件必须在浏览器里执行，JS文件必须嵌入到HTML文件里才能执行凡是不能独立执行需要依赖其他程序的，通常都叫做脚本2.常见的转义字符document.write("\t"); //tab键document.write("\n"); //换行d...

原创 04-02 实现单行文本居中，多行文本左对齐

实现单行文本居中，多行文本左对齐都不能写给内联元素，只能写给块状元素;text-align属性：right/center/left;（只能对内联元素起作用）text-indent属性：...

原创 溢出文字和滚动条实例

初始效果鼠标划过时效果代码实现如下：html部分：css代码hover时可将文字大小设为0，可实现多余文字消失

原创 浮动和文本溢出

一、浮动浮动属性Float:none/left/right;一个元素设置float：left/right；时会脱离文档流（半脱离），不占空间清除浮动 clear:none/left/right/both;none：默认值。允许两边都可以有浮动对象left：清除左浮动/不允许左边有浮动对象right : 清除右浮动/不允许右边有浮动对象both : 清除两端浮动...

原创 CSS基础标签

第一周知识点梳理：2019-03-30p标签中只能嵌套内联元素，不能嵌套块级元素一、Css属性组成和作用1.文本属性：（1）文本大小 font-size：； 单位 rem/em/px/百分比rem 根元素字体大小的倍数em 离自己最近的font-size大小的倍数（如果当前元素设置了font-size属性的值，则为当前自己font-size的倍数；如果没有设置则找...

原创 A bug‘s life

DescriptionBackgroundProfessor Hopper is researching the sexual behavior of a rare species of bugs. He assumes that they feature two different genders and that they only interact with bugs

原创 食物链 经典

A - 食物链Crawling in process...Crawling failedTime Limit:1000MS    Memory Limit:10000KB     64bit IO Format:%I64d & %I64uSubmitStatus Practice POJ 1182 Description动物王国中

原创 字典序最小问题

Best Cow LineTime Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64uSubmitStatus DescriptionFJ is about to take his N (1 ≤ N ≤ 2,000) co

原创 时间序列贪心（第一道贪心题呀嘻嘻）

B - 时间序列贪心Crawling in process...Crawling failedTime Limit:1000MS    Memory Limit:32768KB     64bit IO Format:%I64d & %I64uSubmitStatus Practice HDU 2037 Description“今

原创 Find The Multiple

C -Find The MultipleCrawling in process...Crawling failedTime Limit:1000MS    Memory Limit:10000KB     64bit IO Format:%I64d & %I64uSubmitStatusDescriptionGiven a posit