前端
关注
分享
扫一扫
小青龙8085
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
webpack安装及其与node.js, npm的关系
webpack是一个模块打包工具，安装前需要有node.js环境，而node.js自带了软件包管理工具npm webpack作用： 1将sass/less 等预编译的css语言转换成浏览器识别的css文件 2能够将多个预编译文件打包成一个文件 3 打包image/styles/assets/scrips/等前端常用的文件 4 搭建开发环境开启服务器 5 监视文件改动，热部署。 6 将单文件组件...原创 2019-12-03 20:33:11 · 344 阅读 · 0 评论 -
vue（作用于插槽--父组件替换插槽的标签，但是内容由子组件提供）
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src=...原创 2019-12-03 19:33:34 · 448 阅读 · 0 评论 -
vue（插槽slot的使用）
<template>里面的代码 <template id="cpn"> <div> <h2>插槽的使用</h2> <slot name="left">左侧</slot> <slot name="middle">中间</slot> <slot name="right...原创 2019-12-03 19:02:12 · 938 阅读 · 0 评论 -
vue（子组件访问父组件，$root,$parent）
$root:访问根组件 $parent：访问父组件 运行结果 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </st...原创 2019-12-03 12:08:24 · 626 阅读 · 0 评论 -
vue（访问子组件的方法或属性，$children,$refs）
$children:访问子组件。访问子组件的方法：this.$children[0].ontap()； 访问子组件的属性：this.$children[0].name $refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>， 使用this.$refs.aaa.name 运...原创 2019-12-03 11:36:05 · 3319 阅读 · 0 评论 -
H5,200行代码实现粒子漩涡特效
演示图 实例代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html,body{ margin:0px; width:100%; height:100%...转载 2019-12-02 21:00:02 · 1350 阅读 · 1 评论 -
樱花特效
下面是代码，如果感觉有帮助的话留个赞吧。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>樱花雨</title> <script > /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Found...原创 2019-12-02 20:56:47 · 3417 阅读 · 1 评论 -
vue（子组件和父组件的双向邦定）
本案例先将父组件的data传到子组件，然后子组件通过input的数据双向绑定（当修改输入框内容时，子组件的数据也同步修改），然后再把子组件输入的值传给父组件（ const qpp=vue（{.....}））的data，同时第一个数据是第二个的100倍，第二个数据是第一个的一百分之一。 运行结果 示例代码 <!DOCTYPE html> <html> ...原创 2019-12-02 20:34:19 · 141 阅读 · 0 评论 -
vue（子组件向父组件传递数据）
父子组件通信 运行结果 示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <...原创 2019-12-02 13:12:01 · 120 阅读 · 0 评论 -
vue（父子组件的通信--父组件向子组件通信，及props的驼峰标识）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue.js"...原创 2019-12-01 22:27:01 · 348 阅读 · 0 评论 -
vue（组件的data）
组件里面不能访问vue实例里面的数据。组件对象里面也有data和methods属性。 1.组件data里面要这样写，而不是这样写 如图，obj1,obj2,obj3调用函数abc（），而函数返回的是一个obj对象，此时变量obj1,obj2,obj3所指向的内存地址是相同的都是obj。换句话说修改obj1的name的时候，obj2,obj3的name也发生了同样的变化。 若abc（）函数...原创 2019-12-01 21:22:40 · 274 阅读 · 0 评论 -
vue（组件和模板templa分离的两种写法）
由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。 运行结果 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> <...原创 2019-12-01 17:39:42 · 1520 阅读 · 0 评论 -
vue（全局组件和局部组件的语法糖）
vue（全局组件和局部组件的语法糖）：主要是省去了调用Vue.extend()的步骤，并且可以直接使用一个对象代替 运行结果 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> ...原创 2019-12-01 17:25:15 · 260 阅读 · 0 评论 -
vue（父组件和子组件）
这是运行结果 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <scrip...原创 2019-12-01 17:09:34 · 139 阅读 · 0 评论 -
vue（全局组件和局部组件）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue....原创 2019-11-28 20:46:21 · 190 阅读 · 0 评论 -
vue（v-model修饰符lazy，number，trim）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue.js"...原创 2019-11-28 18:48:25 · 383 阅读 · 1 评论 -
多层浮动效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: f...原创 2019-11-28 18:28:55 · 172 阅读 · 0 评论 -
vue（v-model结合selete类型）
不知道为什么multiple不能实现多选 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <...原创 2019-11-26 11:45:42 · 149 阅读 · 0 评论 -
vue（v-model结合checkbox类型）
直接上效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src=...原创 2019-11-26 11:23:34 · 199 阅读 · 0 评论 -
vue（v-model结合radio使用）
效果图 输入前 输入后 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script ...原创 2019-11-26 11:07:47 · 482 阅读 · 0 评论 -
vue（高级函数：filter，map，reduce）
filter filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进行检测。 注意：filter() 不会改变原始数组。 语法 array.filter(function(currentValue,index,arr), thisValue) 详细网址：https://www.runoob.com/j...原创 2019-11-25 12:38:16 · 2670 阅读 · 0 评论 -
vue（购物车案例）
css代码 <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th ,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-a...原创 2019-11-25 10:46:19 · 216 阅读 · 0 评论 -
vue（class案例）
这是一个案例点击哪一个，哪一个就会变红 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .isActive{ color:red; } ...原创 2019-11-24 19:55:23 · 126 阅读 · 0 评论 -
vue（v-if，lable）
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。 这个保证点击“切换类型”之后输...原创 2019-11-23 17:35:07 · 2055 阅读 · 0 评论 -
vue（修饰符once，prevent，stop，监听键盘按键（keyup，keydown））
直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...原创 2019-11-23 14:55:47 · 3026 阅读 · 0 评论 -
vue（参数传递）
直接上代码，代码上有详细的注释 这个是运行结果，分别点了按钮1-5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js">...原创 2019-11-23 14:10:14 · 195 阅读 · 0 评论 -
vue（计算属性set和get）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:...原创 2019-11-20 17:38:17 · 589 阅读 · 1 评论 -
vue（v-cloak）
加了一个setTimeout事件，时间设置为10s，图一是未编译完之前，图二是编译完之后（10s之后）。 v-cloak：在页面编译完之前样式是 编译完之后是 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>&...原创 2019-11-19 11:43:52 · 117 阅读 · 0 评论 -
vue（v-pre）
v-pre会直接跳过编译显示标签里面的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></scr...原创 2019-11-19 11:22:36 · 305 阅读 · 0 评论 -
vue之v-once
先上图 也就是说加v-once的内容只会被渲染一次，不会随msg的变化而变化（v-model是input的双向绑定）。下面奉上代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...原创 2019-11-18 20:52:27 · 163 阅读 · 0 评论 -
VUE（删除功能）
点击提交可增加li，点击li可删除当前li <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script...原创 2019-10-31 16:25:17 · 1048 阅读 · 0 评论 -
VUE（自定义全局组件和局部组件）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> ...原创 2019-10-31 13:22:30 · 419 阅读 · 0 评论 -
VUE（todolist功能开发）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head&...原创 2019-10-31 12:35:25 · 221 阅读 · 0 评论 -
VUE（v-if,v-show,v-for）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 12:24:53 · 148 阅读 · 0 评论 -
VUE（计算属性，监听器）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> ...原创 2019-10-31 12:05:17 · 145 阅读 · 0 评论 -
VUE（v-bind： 属性绑定，v-model：双向数据绑定）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:bl...原创 2019-10-31 11:39:12 · 427 阅读 · 0 评论 -
VUE（v-text,v-html,v-on:click(@click)的使用）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> ...原创 2019-10-31 11:03:18 · 645 阅读 · 0 评论 -
vue（挂载点，模板，实例）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head> ...原创 2019-10-31 10:42:13 · 299 阅读 · 0 评论 -
hello world
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> //导入vue </he...原创 2019-10-31 10:34:21 · 147 阅读 · 0 评论