- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue之具名插槽
<div id="app"></div><script src="../vue.js"></script><script> Vue.component('myslot',{ template:` <li> <slot name="one"></slot> ...
2019-10-09 01:49:33
156
原创 vue之过滤器+全局过滤器+过滤器的两个参数
调用过滤器 数据属性 | 过滤器名字1,内部过滤器用filters对象 <div id="app"></div> <script src="../vue.js"></script> <script> var App={ data(){ return{ price:0...
2019-10-09 01:47:46
1329
原创 vue之computed监听多个属性
案例：音乐播放<div id="app"> <!-- controls用来显示控件的 --> <audio :src="currentsongsrc" autoplay controls></audio> <ul> <li v-for="(item,index) in musicdata" ...
2019-10-09 01:34:57
2988
原创 vue之watch监听数据
<div id="app"> <input type="text" v-model="msg"> <h4 >{{msg}}</h4> <h3 >{{stus[0].name}}</h3> <button @click='stus[0].name="Tom"'>wat...
2019-10-09 01:31:52
332
原创 vue全局组件的使用和对应事件的处理
1，通过全局组件，向各个子组件里面创建各自需要的按钮全局组件又叫公共组件的声明：Vue.component(a,b)参数a是自定义全局组件的名称，参数b是options对象（1），全局组件的dom元素里添加<slot></slot>标签并给全局组件命名slot作为承载分发内容的出口Vue.component('vbtn',{ // slot作为承载分发内容的出口...
2019-10-09 01:26:20
558
原创 vue局部组件和公共组件搭建页面模式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
2019-10-06 16:08:12
331
1
原创 v-model原理
<div id="app"> <input type="text" v-bind:value="msg" v-on:input="change"> <p>{{msg}}</p> </div><script>new Vue({ el:"#app", data:{ msg:"v-model...
2019-10-06 16:05:16
141
原创 v-if和v-show的使用和特点
<DIV id="app"> <input type="button" value="切换" v-on:click="handover"> <p v-if="flag">我用的是v-if</p> <p v-show="flag">我用的是v-show</p> </DIV>...
2019-10-04 19:38:08
272
原创 v-for循环普通数组
1，v-for遍历普通数组及输出索引 <p v-for="item in list">{{item}}</p> <p v-for="(item,i) in list">值是：{{a}}------索引是：{{b}}</p>2，v-for遍历对象数组<p v-for="user in listobj">名称：{{user....
2019-10-04 18:54:55
4093
原创 用vue制作跑马灯效果
<div class="app"> <input type="button" value="开始庆祝" @click="begin"> <input type="button" value="稳住，休息一会" @click="waite"> <h4>{{msg}}</h4> <...
2019-10-04 12:31:17
188
原创 vue指令之事件修饰符及v-on的使用
1,vue中用v-on绑定事件，用click事件举例：v-on:click="outershow" 简写为：@click="outershow"<div id="app"> <div class="outer" @click="outershow"> <div class="inner" @click="innershow">...
2019-10-04 12:27:17
432
原创 v-model实现表单数据的双向绑定
v-model可以实现表单数据的双向绑定，但是只限于运用在表单元素中，input(radio，text,address,email…),select checkbox绑定方式为v-model:value="msg"或者v-model="msg" <div id="app"> <h4 >{{msg}}</h4> <!-...
2019-10-04 11:38:32
266
原创 vue中通过v-bind绑定元素的class属性为元素设置样式
1，直接传递一个数组 <style> .mcolor{ color:red; } .mweight{ font-weight: 200; } .msize{ font-size:30px; } </style><h4 v-bind:class="['mcolo...
2019-10-04 11:27:01
430
原创 vue中通过v-bind绑定style属性
1，直接在元素标签上通过:style形式书写样式对象<h1 :style="{color:'red','font-weight':'200'}">这是一个h1标签</h1>2，将样式对象定义到data中，并直接引用到:style中<h1 :style="styleobj1">这是一个h1标签</h1>var vm=new Vue({ ...
2019-10-04 10:58:53
796
原创 window对象常用属性之主体面板属性
1.概念每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象是 Window 对象的一部分。Document 对象使我们可以从脚本中通过 window.document 属性对 HTML 页面中的所有元素进行访问。2，使用document2.1 获取html元素对象2.1.1，直接获取方式：document.getElementById(" “);...
2019-07-06 21:37:49
263
原创 window对象学习
js语言运行在浏览器上面，所以就有可能调用一下浏览器自己写好的代码。浏览器是用代码开发的，所以js就有可能调用一下浏览器内部开发的结果，比如浏览器的历史记录，前进，后退，地址栏信息的改变。js动态改变地址栏里面的信息，或者获取地址栏里的信息，就需要调用浏览器封存好的调用方式bom浏览器对象模型——浏览器的内核语言支持规范（bom是一个协议，具体实现是window对象，js是一门基于对象的语言...
2019-07-04 10:27:47
218
原创 用js计时器写倒计时
用js计时器写倒计时写倒计时的思路：1，设置要到的时间。2，获取当前时间。3，计算时，分，秒，毫秒的时间差，4，用计时器把整个倒计时函数包装起来1，倒计时内容部分var timego=new Date("2019-5-29 12:00:00");//倒计时要到的时间var timenow=new Date();//获取当前时间var time=timego.getTime()-timen...
2019-06-15 17:20:38
2666
原创 js计时器
js计时器1.setTimeout(function, milliseconds)1.1 使用setTimeout(function, milliseconds）1.2，关闭setTimeout()2，setInterval()循环计时器2.1，使用setInterval()循环计时器2.2，关闭setInterval()循环计时器3， window.requestAnimationFrame()...
2019-06-15 16:16:46
1645
转载 js日期
js日期1，日期对象1，创建日期对象2，创建新的日期对象的4种方法3，Date对象转换为相应字符串4，js日期输入格式5，获取时间的方法6，设置时间的方法1，日期对象1，创建日期对象使用当前的日期和时间创建一个新的日期对象var d=new Date();//Fri Jun 14 2019 15:42:33 GMT+0800(中国标准时间)2，创建新的日期对象的4种方法// ...
2019-06-14 23:39:10
115
原创 js数组迭代
数组迭代1.Array.forEach()2.Array.map()3，Array.filter()4，Array.reduce()5.Array.every()6.Array.some()7.Array.indexof()与Array.lastindexof()8.Array.find()与Array.findIndex()1.Array.forEach()该方法是为每个数组元素调用一次方法...
2019-06-14 15:27:16
150
原创 选择城市的多级联动练习
下面是我这次的多级联动练习，我觉得最重要的是处理好选择城市时函数的递归应用问题。1.body内容<div class="box"> <div class="s1"> 请输入您所在省份： <input type="text" id="txt" list="datalist"/> <!-- list对应datalis...
2019-06-13 09:43:10
278
原创 省市区三级联动练习
1.先写body里的元素，画页面省：<select name="" id="a"> <option value="">--请选择--</option></select>市：<select name="" id="b"> <option value="">--请选择--</option><...
2019-06-09 16:04:05
231
原创 js原始数据类型+数据的强制转化+字符串的方法
js原始数据类型+数据的强制转化+字符串的方法1. js原始数据类型2. 数据的强制转化3. 操作字符串的方法1. js原始数据类型1number数值类型包括整点和浮点数2boolean布尔类型只有true和false两个值,通常用于逻辑判断3string字符串类型字符串变量必须使用引号括起来，引号可以是单引号也可以是双引号4undefined...
2019-05-30 17:01:07
1111
原创 js数组对象
Array数组1, 创建数组并给数组赋值2. 数组和字符串间的相互转化3 数组的方法4.简单练习1, 创建数组并给数组赋值数组对象：使用单独的变量名来存储一系列的值 var a1=new Array(); console.log(a1);//Array[] console.log(a1.length);//0创建数组的三种方式new 是实例化对象第一种：var ...
2019-05-22 01:34:58
323
原创 javascript基本语法（运算符+逻辑语句+循环语句）
1. js里面的运算符1. 算数运算符 + ， -, *, /, %, ++, –%（求余）：A=10%3;//A=1,A=10%2；//A=0 余数为零，两个能整除，其余都不能整除2.++, --(前置++或- -表示先++或- -后运算表达式，后置++或- -表示先运算表达式后++或- -)2. 赋值运算符=，+=，-=，*=，/==（赋值）a=10；+=（先加后赋值...
2019-05-16 22:02:01
502
原创 javascript基本语法（js简介+使用杂项+声明变量+声明函数）
javascript基本语法（一）1.javascript简介1.1 js组成部分1.2 js基本特点1.3 日常用途2，js使用前杂项2.1 编写2.2 js定义变量的方式2.3 js嵌入html的方式3 变量3.1 声明变量3.2 js里面的数据类型合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
2019-05-16 16:15:47
634
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人