- 博客(50)
- 收藏
- 关注
原创 vue之项目代码介绍
README.md 项目说明文件package.json 第三方模块依赖package-lock.json 是package.json的锁文件,确定第三方包具体的版本LICENSE 开源协议index.html 首页.postcssrc.js 配置项.gitignore 配置一些不上传git.eslintrc.js 配置代码规范,检测代码是否正确.eslintignore 配置哪些文件不受eslintrc.js的规范控制.editorconfig 配置编辑器里面的语...
2021-08-10 21:35:38
431
原创 vue之环境配置
详细参考官网:安装 | Vue CLI (vuejs.org)首先需要配置node.js,如有配置可在cmd里面查询cmd查询命令行node -v 查询node版本npm -v 查询npm版本如果上面两个都安装好的话,需要创建vue项目npm install -g @vue/cli# ORyarn global add @vue/cli然后用cd命令去你要建立项目的路径打包执行命令行打包项目vue init webpack 项...
2021-08-10 20:24:40
158
原创 vue.js基础之列表过渡
详细请参考官网:状态过渡 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>列表过渡</title> <script src="../js/vue.js"></script> </head> <style> .v-enter, .v-leave-to{
2021-08-09 20:48:04
150
原创 vue.js基础之js动画与Velocity.js的结合
详细请参考vue官网:状态过渡 — Vue.js (vuejs.org)详细请参考Velocity.js官网:Velocity.js (velocityjs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js动画与Velocity.js的结合</title> <script src="../js/vue.js"><
2021-08-09 19:48:22
97
原创 vue.js基础之使用ainmate.css
详细请参考官网:动画.css |CSS 动画的跨浏览器库。 (animate.style)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用ainmate.css</title> <script src="../js/vue.js"></script> <link rel="styleshee
2021-08-08 21:42:11
198
原创 vue.js基础之css动画原理
详细参考官网:进入/离开 & 列表过渡 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue-动画原理</title> <script src="../js/vue.js"></script> </head> <style> ..
2021-08-08 21:07:21
103
原创 vue.js基础之动态组件与v-once
详细参考官网:动态组件 & 异步组件 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>动态组件与v-once</title> <script src="../js/vue.js"></script> </head> <body> <div
2021-08-08 10:45:48
82
原创 vue.js基础之在vue中使用插槽以及作用域插槽
详细参考官网:插槽 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>在vue中使用插槽</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">
2021-08-08 09:05:42
117
原创 vue.js基础之非父子组件间传递
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>非父子组件间传值</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <child content="Dell">&l..
2021-08-07 21:51:56
70
原创 vue.js基础之组件参数效验与非props特性
详细参考官网:Prop — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父子组件间数据传递</title> <script src="../js/vue.js"></script> </head> <div id="app"> <child
2021-08-07 12:44:51
82
原创 vue.js基础之使用组件的细节点
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用组件的细节点</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <table> <ul> .
2021-08-07 10:33:53
87
原创 vue.js基础之表单绑定
请参考官网:表单输入绑定 — Vue.js (vuejs.org)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单绑定</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">
2021-08-06 22:11:17
77
原创 vue.js基础之事件绑定
事件绑定有很多种,以下只是举例三种,详细可看官方文档<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>事件绑定</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <but
2021-08-06 21:27:56
136
原创 vue.js基础之条件渲染
v-if和v-else-if或v-else一定要连起来用,不然会报错。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>条件渲染</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> &
2021-08-06 15:20:25
73
原创 Vue.js基础之样式绑定
用vue实现点击一次颜色变红,再次点击消失<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue中的样式绑定</title> <script src="js/vue.js"></script> </head> <style> .acitvated{ color: #FF0000;
2021-08-06 14:04:37
75
原创 vue.js基础之计算属性的get和set
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性的get和set</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{fullName}} </div> .
2021-08-06 10:50:51
125
原创 vue.js基础之计算属性、方法与监听器
当我们要计算一个值时,可以用到计算属性、方法、监听器三种办法。在这里我们推荐使用计算属性,即简洁,同时性能又高看下面代码,理解三种办法的区别<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算</title> <script src="js/vue.js"></script> </head> <
2021-08-06 09:45:55
122
原创 vue.js基础之生命周期
什么是生命周期生命周期函数就是vue实例在某一个时间点会自动执行的函数有什么函数beforeCreate created beforeMount mounted beforeDestroy destroyed beforeUpdate updated什么时候执行,看下面代码说明,或者参考官方文档<!DOCTYPE html><html> <head> <meta charset="utf-8"> &...
2021-08-05 21:26:26
77
原创 vue.js基础之简单的组件传值
v-bind 简写 :v-on 简写 @<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div id="app">
2021-08-05 12:17:27
116
原创 vue.js基础之使用组件改造TodoList
v-bind用于绑定数据和元素属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div id="app"> &l.
2021-08-05 11:07:50
91
转载 vue.js基础之mvvm模式
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架
2021-08-05 09:31:43
492
原创 vue.js基础之开发todolist(v-model、v-for、v-on)
v-for 循环数据v-on 绑定事件v-model 双向数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script><!-- 引入vue --> </head> <body> <div
2021-08-05 09:11:17
75
原创 vue.js基础一之halloworld
vue官网:Vue.js (vuejs.org)什么是vueVue 是一套用于构建用户界面的渐进式框架学习vue之前要学会什么需要学习JS、HTML、es6、es5语法等基础编程语言如何安装vue下载vue.js通过路径引入 直接使用script加连接引入 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 使用vue实现第一个程序hel.
2021-08-05 08:34:39
197
原创 JavaScript之es5标准
基于的es3.0 + es5.0的新增方法 使用的es3.0 和 es5.0 产生冲突的部分es5.0严格模式 那么es3.0和es5.0产生冲突的部分就是用es5.0否则会用es3.0严格模式不支持with、arguments.callee、func.caller,变量赋值前必须声明,局部this必须被赋值(Person.call(null/undefined)赋值什么就是什么),拒绝重复属性和参数启动es5.0严格模式和全局严格模式 <script> "us
2021-08-01 10:31:14
872
原创 JavaScript之异常处理
用法:try{}catch(e){}在try里面的发生错误,不会执行错误后的try里面的代码e是接收try错误的对象,有两个属性,message、nameError.name 的六种值对应的信息:EvalError :eval()的使用与定义不一致 RangeError: 数值越界 ReferenceError:非法或不能识别的引用数值 SyntaxError:发生语法解析错误 TypeError:操作数类型错误 URIError:URI处理函数使用不当...
2021-07-31 19:46:49
80
原创 JavaScript之数组增删
var arr = [] //增,数组的最后添加进去 push arr.push(1) console.log(arr) arr.push(2,3,4) console.log(arr) //剪切最后一位数 pop var a = arr.pop() console.log(arr) console.log(a) //增,在数组最前面添加数据 unshift arr.unshift('我在最前面') console.log(arr) .
2021-07-26 15:27:48
106
原创 JavaScript之对象的枚举
for in <script> var obj = { name : "s", age : 123, sex : "male", height : 180, weight : 190 } for(var prop in obj){ console.log(prop) } </script> hasOwnProperty <scr..
2021-07-23 17:39:47
301
1
原创 JavaScript之继承
继承发展史传统形式—> 原型链 过多的继承了没用的属性 借用构造函数 不能继承借用的构造函数的原型 每次构造函数都要走多一个函数 共享原型 不能随便改动自己的原型 圣杯模式...
2021-07-23 10:19:05
105
1
原创 JavaScript之原型
定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先,通过该构造函数产生的对象,可以继承改原型的属性和方法。原型也是对象。 利用原型的特点和概念,可以提取共有属性。 对象如何查看原型—>隐式属性_proto_() 对象如何查看对象的构造函数—>constructor <script type="text/javascript"> //Person.prototype --原型 //Person...
2021-07-18 09:48:46
117
1
原创 JavaScript基础(对象、包装)
// 对象的创建方法 // 1.var obj = {} 对象字面量/对象直接量 // 2.构造函数 // 1) 系统自带的构造函数 object() // var obj = new Object() // 2) 自定义 // 大驼峰式命名规则function Car(a){ ...
2021-07-15 16:36:53
96
原创 JavaScript基础(对象)
对象的增删查改<script type="text/javascript"> var xiaobai = { name : 'XiaoBai', age : 17, cx : 100 } xiaobai.baby = 'Web'//增 delete xiaobai.cx //删 console.log(xiaobai.name)//查 xiaobai.baby = 'java'//改 </script&g
2021-07-13 10:28:51
64
原创 JavaScript基础(立即执行函数)
立即执行函数针对初始化功能的函数执行之后函数立即销毁只有表达式才能被执行符号执行执行符号==》()被执行符号执行的自动去除命名。简略方法有两种(function (){}());W3C 建议使用第一种(function (){})();下面是三种用法,不了解评论 //用法一 (function (){ var a = 123; var b = 234; console.log(a+b); }) //用法二 (fun...
2021-07-12 08:46:25
65
原创 JavaScript基础(闭包初了解)
什么是闭包 当内部函数被保存到外部时,将会生成闭包。 闭包会导致原有作用域链不释放,造成内存泄漏 内存泄漏指你用malloc或new申请了一块内存,但是没有通过free或delete将内存释放,导致这块内存一直处于占用状态。 闭包的作用 实现公有变量(全局变量) 函数累加器 可以做缓存(存储结构) eater 可以实现封装,属性私有化 person() 模块化开发,防止污染全局变量 下面是两个简单的闭包例子不懂可以翻我之前发的JS基础
2021-07-11 20:07:31
75
原创 JavaScript基础(预编译)
1.imply global 暗示全局变量:即任何变量,如果变量未声明即赋值,此变量就为全局对象所有a=123; var a = b =123;2.一切声明的全局变量,全是Windows属性。var a = 123;==>window.a=123;预编译过程<script type="text/javascript"> function fn(a){ console.log(a);//ƒ a (){} var a = 123; consol
2021-06-24 12:18:48
123
原创 Python练习题3
#声明和调用函数getValue(b, r, n),根据本金b、年利率r和年数n,计算最终收益v。#提示:收益=本金+本金*年利率*年数。def getValue(b,r,n): v = b + b*r*n print('最终收益为:',v)getValue(1,2,3)#编写程序module1.py,求解一元二次方程x2+5x+6=0的根并输出。import matha = 1b = 5c = 6if b*b > 4*a*c: e = (-b +
2021-06-21 19:23:18
4370
原创 Python练习题1
编写程序,分别输出1~100中所有数的和、所有奇数、偶数和。# 编写程序,分别输出1~100中所有数的和、所有奇数、偶数和。a=0;b=0;c=0;for n in range(1,101): a+=n if n%2==0: b+=n else: c+=nprint("1到100的和为",a)#5050print("1到100的所有偶数和为",b)#2550print("1到100的所有奇数和为",c)#2500...
2021-06-21 01:30:02
8824
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人