前端笔记

Vue.js学习笔记-认识Vue

今天开始学习Vue.js，每天学习记录笔记 vue生成一条数据 vue中的渲染在{{ }}两个大括号中间，一个小示例： <div id="app-1">{{ message }}</div> var app1 = new Vue({ el: '#app-1', data: { message: '{{vue的数据显示写在双大括号内}}' } }); {{ message }}   v-bind:attr, 给DOM绑定一个属性    :冒号为简写    :attr="xxx",添加一个值  

2017-08-22 00:27:53935215

阅读详情

JavaScript Array

数组的操作 var arr = [ 1,2,77,8,4,5 ]; 添加、删除 arr.length = 0; //清空数组的方法，让length等于0； arr = []; //从新赋值一个空数组，清空 arr.unshift( 0 ); //向数组的第一位添加内容 arr.push( n ); //向数组最后一位添加内容 arr.shift();// 删除数组的第一位,返回被删除值 arr.pop(); //删除数组的最后一位，返回被删除值 arr.splice( 1 , 2 );// 删除类，从第一个起删除2个 arr.splice( 0 , 0 , ‘xuanmo’ );//添加，从

2016-05-18 00:40:171503325

阅读详情

JavaScript Json

Json的写法： //第一种属性名不加引号 var json = { name : 'xuanmo', age : '21', fn : function(){alert(22)} } //第二种属性名加引号 var json1 = { 'name' : 'xuanmo', 'age' : '21', 'fn' : function(){alert(22)} } //执行方法 json.name Json的遍历： for( var key in json1 ){ console.log( key )//输出json1里面的所有属性 console.log( json1[key] )//输出js

2016-05-16 22:41:44967017

阅读详情

JavaScript String

字符串的相关操作： var str = 'xuanmo blog'; 查找   str.charAt(n);查找字符串下标对应的字符   str.charCodeAt(n);查找字符串对应下标的ASCII码   String.fromCharCode(n);写入ASCII码序号，返回对应的字符   str.indexOf( 'o' );查找某个字符的下标，从左至右，遇到相同字符默认查找首次出现的字符,找不到返回-1，   str.indexOf( 'o' , n );可以写入数值，定义从多少开始

2016-05-15 20:49:49118128

阅读详情

让盒子在网页中居中的方法

让已知宽度和高度的盒子居中的两种方法，通过绝对定位实现，会跟着浏览器窗口的缩放不断调整位置，一直居中方法一：通过绝对定位，定位时上边距与左边距都给50%，在利用margin减去当前盒子的一半宽度与高度 .box{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } 方法二：通过绝对定位给4个方向都为0；用margin自动，实现居中 .box { position: absolute; top: 0; right: 0; bottom: 0; left:

2016-05-10 11:14:321950217

阅读详情

JavaScript setInterval/setTimeout

定时器：setInterval与setTimeout setInterval：循环去做一件事情语法： //一个简单定时器，单位为毫秒，会让num一直加1 var num = 0; setInterval(function(){ num++; console.log( num ); },30);   setTimeout：多久时间之后去做一件事情语法： //3秒之后弹出一个3 setTimeout(function(){ console.log( 3 ); },3000); 清除定时器：clearInterva

2016-05-08 23:24:341004210

阅读详情

JavaScript call方法

call：改变当前函数调用对象的this指向有名函数执行时使用了call。第一个参数需要把此函数this指向给的对象，第二个为实参开始 document.getElementById('box').onclick = function() { fn.call(this, 10); //call改变当前对象的this指向 } function fn(a) { console.log(this, a); //this输出对象为id名为box的div } 当box点击之后输出的结果：

2016-05-05 23:51:1681403

阅读详情

css选择器

选择器示例示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<div>元素和<p>元素 1 element element div p 选择<div>元素内的所有<p>元素 1 element>element div>p 选择所有父级是 <div> 元素的 <p&

2016-05-03 23:49:42103218

阅读详情