jackwong992 / article Goto Github PK
View Code? Open in Web Editor NEW慢慢来,其实会很快
Home Page: http://www.feelone.top/article/
慢慢来,其实会很快
Home Page: http://www.feelone.top/article/
垂直居中在我们网页开发中见到的很多,今天我们就来简单的介绍几种垂直居中的方式:
我们都知道居中其实很好控制,例如:text-align: center可以实现居中。但是对于垂直来说,所以需要分别来针对不同模型进行做出改变。
margin-top: -1/2 hegiht; margin-left: -1/2 widht;
.middle{
text-align: center;
}
.middle::before{
content: ' ';
display: inline-block;
height: 100%;
vertical-middle: middle;
}
这里我们可以看到:
第一,使用text-align: center;实现水平居中。
第二,加入伪元素,设置元素的高度为100%。
第三,我们都知道vertical-align都是针对于行内元素或者表格元素,这里需要改变display的实现。
第四:vertical-middle:middle 实现水平居中。
4. table-cell实现垂直居中
table-cell的垂直居中与vertical-align相类似,
代码实现:http://js.jirengu.com/waxesamexi/1/edit
具体实现如下:
.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
display: table-cell;
vertical-align: center;
text-align: center;
}
但是这里需要注意的是使用了display: table-cell;就改变了box的展现方式,对于以后的重构可能会埋下bug。
关于更多的垂直居中的方式,未完待续...
html:
<div class="box"></div>
css:
.box{
width: 200px;
height: 200px;
background: red;
transition: 1s;
}
.box:hover{
width:400px;
height: 400px;
background: green;
}
tag-attribute-select:标签属性选择
css:
p[class]{background: green;}
p[class="jack"]{background:pink;}
p[class~="first"]{background: black;}
p[class^="g"]{background: blue;}
p[class$="m"]{background: yellow;}
p[class*="q"]{font-size: 30px;}
p[class|="a"]{color: red;}
html:
<p class="jack">你好,你真的好吗?</p>
<p class="alex">你好,你真的好吗?</p>
<p class="pony first">你好,你真的好吗?</p>
<p class="grose">你好,你真的好吗?</p>
<p class="gtony">你好,你真的好吗?</p>
<p class="tom">你好,你真的好吗?</p>
<p class="tom">你好,你真的好吗?</p>
<p class="a-q">这是一个测试</p>
<p class="a-q">这是一个测试</p>
<p class="a">这是一个测试</p>
Structure selector: 结构选择器
xx:first-child{} //xx下面的第一个元素
xx:last-child{} //xx下面的最后一个元素
xx:nth-child(n) //xx下面的第n个元素
xx:nth-child(2n) //xx下面的第2n个元素
xx:first-of-type{} //xx下面第一个子节点且节点类型为E
css:
p:first-child{background: pink;}
p:last-child{background: red;}
p:nth-child(2){background: green;}
p:nth-child(2n){background: blue;}
html:
<p>你好,这是一个测试的例子</p>
<p>你好,这是一个测试的例子</p>
<p>你好,这是一个测试的例子</p>
<p>你好,这是一个测试的例子</p>
<p>你好,这是一个测试的例子</p>
文本新增属性:
rgba(0,0,0,0.x):通过最后一个a的属性取值(0-1)来判断颜色的透明度。
与opticty区别不同的是,rgba只改变背景颜色的透明度,而opticty也改变字体颜色透明度
地址:opticty与rgba的区别
---
for (var i=0; i<arr.length;i++){
for(var j=0; j<arr[i].length;j++){
console.log(arr[i][j])
}
}
JS中所有用到class的地方都必须换成className
指的是调用当前方法(函数)的那个对象。
HTML:
<input type="btton" value="按钮">
JS:
var oBtn = document.getElementsByTagName('input');
oBtn[0].abc="123";
console.log(oBtn[0].abc); // 123
JS可以为任何HTML元素添加任意自定义属性。
在JS中背景,color,相对路径都不能作为判断条件。
获取自身递增数字及匹配数组内容:
地址:http://js.jirengu.com/vudenelaxu/2/edit
变量作用域:
局部变量:定义在一个函数里,只能在这个函数里使用
全局变量:不定义在函数里面,在任何地方可以使用
闭包:子函数可以使用父函数的局部变量
function aaa(){
var a=1;
function bbb(){
alert(a);
}
}
JS中的运算符
+-*/%:加,减,乘,除,取模
取模的实例:隔行换色,秒转时间
赋值:=,+=,-=
逻辑: &&与 ||或 !非
运算符优先级:括号
程序流程控制:
判断:if switch
循环:while for do...while
跳出:break,continue
真/假: true,非零数字,非空字符串,非空对象
NaN,'',undefined,0,{}
switch(变量/值){
case 值1:... break;
case 值2:... break;
case 值3:... break;
default: ...
}
JavaScript引擎工作方式是:先解析代码,然后获取所有声明的变量,在一行行的运行。
这样造成的结果是:所有的变量的声明语句,都是被提升到代码的头部,这就叫做变量提升。
例如:var a=3;
var b="ok";
在js引擎中是这样操作的:
先找到一个a变量,初始化的值为undefined,然后在找到一个b的变量初始化值为undefined
接着第二步,赋值。给a变量赋值为3,b变量赋值为字符串ok
fn(100)
function fn(a){ alert(b) } //a=100
fn(100,'px')
function fn(a ,b){alert( a+b) } // 100px
函数传递参数: 参数=JS的数据类型:number,string,boolean,undfined,null,symbol,object
当然你也可以这样做:
fn( function(){ alert(1) } )
function fn(abc){
abc(); //1
}
例子:
function fn2(lol){
lol(100)
}
fn2( function(a){ alert( a ) } )
1.传参,lol指的是function(a){alert( a )}
2. 代入,执行lol这个函数代入为100,执行得到结果为100
注意:执行有名字的函数的时候不需要带括号
例如:
function fn4(){ alert(4) }
function fn3( fn ){
fn();
}
fn3( fn4 ) //4
当然,参数的传递也可以是对象:
例如,我们平时在控制台输出可以使用console.log(1)
function fn(w,d){
w.onload=function(){
d.body.innerHTML=123;
}
}
fn(window,document);
函数传参重用代码:
1、尽量保证HTML代码结构一致,可以通过父极选取子元素
2、把核心的主程序实现,用函数封装起来
3、把每组里不同的值找出来,通过传参实现
什么是作用域?
域:空间,范围,区域...
作用:读、写
col-mid-1栅格系统只占有1个,每一行是占有12个。
每一行的占有或者分布可以根据自己的需求:col-mid-x , 如果想发生偏移,可以引入:mid-offset-x
要注意的是栅格系统要每一行使用之前要加入row属性,不然会小15px
如果样式放在标签的底部,对于IE浏览器而言,在某些场景之下(新窗口打开,刷新等)页面会出现白屏,而不是内容的逐步出现。
如果使用@import
标签,即使CSS放入link,并且放在头部,也可能出现白屏。
通过前面的渲染机制的图片我们可以得到:
CSS建立CSSOM树以后,与DOM结合成为render tree,这时如果你把css代码放在页面的底部,解析的速度会变慢,就会出现白屏现象。
要注意的是出现白屏现象不是出现了bug,是浏览器自身出现的问题
解决办法:使用link标签样式表放在顶部
FOUC(flash of Unstyled Content)无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式),对于Firefox会一直表现出FOUC
对于Firefox浏览器的渲染机制不符合上面的图表,首先进行的是DOM树,然后直接进行render tree,等CSS加载完成后会一步进行展示。
建议JavaScript代码放在页面的底部(之前)
async和defer?
async指加载异步
我们都知道在没有defer或者async,浏览器会立即加载并执行指定的脚本,‘立即’指的是在渲染该script标签之下的文档元素之前,也就是说不等后续加载载入的文档元素,读到就加载执行。
有async,加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行(异步)
例如:
<script async src="a.js"></script> // a.js的内容是alert('1')
<script src="b.js"></script> //b.js内容是alert('2')
正常的显示内容是先出现1,然后出现2。但是加入async 以后会先出现2,在出现1。
因为在加载和渲染后续文档元素的过程中是同时进行的。
defer:脚本延迟到文档解析和显示后执行,有顺序
async:不保证顺序
css和js在网页中的放置顺序?
套路:
(1)子元素出现float:left或者float:right;
(2)父元素必定加上clearfix;
网上清除浮动的代码有很多,这里只介绍我自己经常使用的一个:
.clearfix:after {
content:"";
display: block;
clear:both;
}
example:
HTML:
<div class="father clearfix">
<div class="son" style="float: left;">儿子1</div>
<div class="son" style="float: right;">儿子2</div>
</div>
CSS:
.clearfix::after{
content: '';
display: block;
clear: both;
}
.father{
border: 1px solid red;
}
.son:nth-child(1){
width: 30%;
background-color: red;
}
.son:nth-child(2){
width: 70%;
background-color: yellow;
}
导航条的实现:
HTML:
<div class="parent clearfix">
<div class="child">logo</div>
<div class="child">
<div class="nav clearfix">
<div class="navItem">导航1</div>
<div class="navItem">导航2</div>
<div class="navItem">导航3</div>
<div class="navItem">导航4</div>
<div class="navItem">导航5</div>
</div>
</div>
CSS:
.parent{
margin-left: auto;
margin-right: auto;
background: #ddd;
}
.child{ }
.child:nth-child(1){
width: 100px;
background-color: #333;
color: white;
text-align: center;
height: 36px;
line-height: 36px;
float:left;
}
.child:nth-child(2){
float:right;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1;
} /*IE 6*/
.content{
border: 1px solid black;
margin-right: 10px;
}
.nav{
line-height: 24px;
padding: 6px 0;
}
.navItem{
margin-left: 20px;
float:left;
}
主要使用:
flex container:
flex-direction: row (默认,行内排列从左往右)/ row-reverse (反方向的,从右往左)/ column(从上往下排列)/ column-reverse(反方向的)
flex-wrap: nowrap(默认是不换行的)/ wrap(换行)
flex-flow: 是direction 和 wrap的结合: xx yy;
justi-content: space-between / space-around / flex-start/flex-end/center //主轴的对齐方式
空间都放在中间/空间都放在他们周围/都往起点靠/都往终点靠/全部往中间靠,没有间距
align-item: stretch
flex-direction/flex-wrap/just-content/align-item
lesson1_Vue.directive自定义指令
自定义指令中传递的三个参数
el: 指令所绑定的元素,可以用来直接操作DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
Vue.directive("jack" , function(el,binding){
el.style = "color:" + binding.value;
});
el : 指令要绑定的元素
binding:是一个对象,里面还有自定义指令的相关信息
binding.value : 绑定的指令的具体值
binding.expression: 绑定的表达式值
binding的生命周期:
bind:function(){//被绑定
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('5 - bind');
}
lesson2_Vue.extend自定义无参数标签
<author></author>
<script type="text/javascript">
var authorExtend = Vue,extend({
template: "<p><a :href='authorUrl'>{{authorName}}</a></p>",
data: function(){
return{
authorName: 'jack',
authorUrl: 'http://www.taobao.com'
}
}
});
new authorExtend().$mount('author');
</script>
template: <h1 style="color: red;">我是选项模板</h1>
<script type="x-template" id="demo">
<h2 style="color: red;">我是script模板</h2>
</script>
....
template: '#demo3'
<template id="demo">
<h2>你好,我是黑客</h2>
</template>
....
template: '#demo'
自定义全局的组件:
html:
<hello></hello>
js:
Vue.component('hello',{
template:`<h1>你好啊</h1>`
})
var app= new Vue({
el:'#app',
})
自定义局部组件:
html:
<hello></hello>
js:
var app=new Vue({
el:'#app',
components:{
’hello’:{
template:`<h1>你好啊</h1>`
}
}
})
组件和指令的区别:
组件注册是一个标签,而指令则是定义标签的一个属性。实际开发的过程中组件用的比较多,指令用的比较少,因为指令的封装不如组件。
html4:
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<title>Document</title>
</head>
<body>
< div class="header">
<div class="nav"></div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
html5:
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<article>
<section></section>
</article>
</main>
<footer></footer>
</body>
</html>
HTML: 超文本标记语言,语法较为松散,不严格的web语言; 例如:单标记语言
XML:可扩展的标记语言,主要用于存于数据和结构;
XTML: 可扩展的超文本标记语言,基于XML,作用和HTML相类似,但语法更为严格;
语义化HTML是一种编写HTML的方式。
选择合理的标签,使用合理的代码结构,便于开发者阅读,同时可以让浏览器爬虫和机器很好的解析
HTML:代表文本内容的主题灵魂,CSS代表文本的样式,而JS则控制文本的行为
<meta charset="utf-8">
<meta http-equiv ="X-UA-Compatible" content="IE=edge, chrome=1"> //针对于双核浏览器
<meta name="viewport" content ="width=device-width ,initial-scale=1,maximum-scale=1">
//移动端1:1展示
<meta name="keywords" content="关键字">
<meta name="description" content="主要内容">
方便浏览器以何种的方式来渲染这个页面。
严格模式就是说以html头部为例,给出严格的标准,按照这个模式进行渲染;而混杂模式则没有严格的标准,按照浏览器的意愿进行渲染页面。
编码格式不正确导致的乱码。
文档的编码格式:meta charset="utf-8"和文件保存的编码格式应该一致才不会出错。
IE的内核:Trident
chrome,safari内核: webkit
Opera的内核:Presto
Mozilla-Firfox的内核:Gecko
国内常见的浏览器厂商:webkit或者Trident
第一节:ES6的环境搭建
<script src="./dist/index.js"></script>
注意这里就是要引入生产环境的index.jslet a = 1 ; console.log( a )
模拟一下生产的环境,写一句简单的es6代码 npm init -y
-y的意思是默认安装,如果npm安装速度较慢你可以尝试使用cnpm安装npm install -g babel -cli
babel src/index.js -o dist/index.js
使用babel将src下的文件转换到dist文件夹下npm install --save-dev babel-preset-es2015 babel-cli
安装完成后会多出一个node_modules的文件夹,和一个package.json
>add -> devDependencies
{
"presets":[
"es2015"
],
"plugins":[]
}
babel src/index.js -o dist/index.js
很麻烦,所以我们需要简化以下操作:package.json
文件夹下,找到并修改为以下:"scripts":{ "build":"babel src/index.js -o dist/index.js}
npm run build
就可以将src的文件转换到dist中去了第二节:新的声明方式
我们都知道在es5中有var=varable这种声明变量的方式,在ES6中又新增了let 和const这两种。
var 的声明是全局的,那么怎么判断是否是全局变量:
var a= '123';
window.onload = function(){
console.log(a); //页面加载完成以后控制台显示是123 ,判断是var是全局变量
}
var的声明容易污染全局,let声明则是局部声明,没有污染外部的变量。const常量的声明方式。
第三节:变量的解构赋值
ES6允许一定模式,从数组对象中提取值,对变量进行赋值,也被称之为解构。
解构赋值可以在实际开发的过程中大量的减少我们的代码。
比如,我们在为变量赋值前是这样的:
let a =1 ,let b= 2 , let c=3;
使用了数组的解构赋值以后是这样的:
let[a,b,c]=[1,2,3]
具体的操作步骤是这样的:(这里只讲述一次,后面都不在讲述)
在第一节中的index.js文件中编写:
let[a,b,c]=[1,2,3] console.log("a="+a);console.log("b="+b);console.log("c="+c)
然后打开控制台:看见a=1,b=2,c=3
当然你也可以这样写:
let[a,[b,c],d]=[1,[2,3],4]; console.log("a="+a); console.log("b="+b); console.log("c="+c); console.log("d="+d)
也可以设置一个默认值:
let[foo='true'] = [] ; console.log(foo)
当然也可以这样写:
let [a,b='天气好']=['今天' ];
console.log(a+b) ->今天天气好
let[a,b='天气好']=['今天' ,undefined]
console.log(a+b) -> 今天天气好 //这里的undefined是定义了没有赋值,所以会找天气好这个值
let[a,b='天气好']= ['今天', null]
console.log(a+b) ->今天null //这里的null直接为空值,所以不会找前面的天气好
let {today , weather}={today:'今天' , weather:'天气好'};
console.log(today + weather); ->结果显示是今天天气好
如果是前面的weather不小心写错,控制台会直接输出weather is not defined
如果是后面的weather不小心写错,控制台会直接输出undefined
和数组解构的不同:
数组的解构的值必须是一一对应的,这里的对象解构就没有那么多的要求。
只要key值对应的名称有就即可。
下面说一个比较容易踩坑的地方:
错误的写法:
let foo;
{foo}={foo:'你好'} //这种写法是错误的。先声明,后解构的必须在后面加上一对大括号。
正确的写法:
let foo;
({ foo}={foo:'你好'})
let[t,u,v,w,x,y,z]="huangfl"
console.log(t); //h
console.log(u); //u
console.log(v); //a
console.log(w); //n
console.log(x); //g
console.log(y); //f
console.log(z); //l
这节课我简单的介绍了数组解构,对象解构和字符串解构。以及解构的过程中遇到的一些问题还有和数组解构相类似的地方。
当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:
function jspang(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
jspang(1,2,3); //123undefined
对象扩展运算符出现之前是这样的:
let arrOne = ['www','baidu','com']
let arrTwo=arrOne;
console.log(arrTwo) //wwwbaiducom
arrTwo.push('JackMa');
console.log(arrOne) //wwwbaiducomJackMa
显然这样的结果是不对的,我们只能进行部分改造,于是我引入了扩展运算符:
let arrOne=['www','baid','com'];
let arrTwo=[...arrayOne];
console.log(arrTwo); //wwwbaiducom
arrTwo.push('JackMa');
console.log(arrOne); //wwwbaiducom
console.log(arrTwo); //wwwbaiducomJackMa
如果你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有很多相似之处,甚至很多时候你不用特意去区分。它也用…(三个点)来表示,我们先来看一个例子。
function jspang(first,...arg){
console.log(arg.length);
}
jspang(0,1,2,3,4,5,6,7); //7,因为reset意思是指剩余的部分,去掉第一个first只有7个
然后如何循环输出reset运算符呢?
可以使用for...of运算符:
function baidu(first , ...arg){
for(let val of arg){
console.log(val);
}
}
baidu(0,1,2,3,4,5,6) //0,1,2,3,4,5,6
for…of的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了,反正最后要转换成ES5,没有什么差别,但是至少从代码量上我们少打了一些单词,这就是开发效率的提高。
总结:我们这节课学习了对象扩展运算符和reet运算符,它们两个还是非常类似的,但是你要自己区分,这样才能在工作中运用自如。
CSS全称:Cascading Style Sheets,层叠样式表
HTML注释:
CSS注释:/xxx/
JS注释://
(1) css/a.css ./css/a.css
这两种的写法是一样的,只不过后面的写法更加规范一些。表示index.html和CSS文件夹是同级目录
(2)b.css
这种写法表示a.css和b.css在同级目录下
(3)../img/a.png
在a.css中要插入图片a.png,首先找到css/a.css,发现css和img同级所以需要在往上一级找,接着就是../img/a.png
/user/bin/src/config
本地文件的绝对地址,相当于一个写死的地址。
网站路径:
http://cdn.swiper.js / http://bootstrap.css
一般我们写入网站的相对路径
*:通用选择器
#:id选择器
.: 类选择器
elmement:标签选择器
多元素选择器:elmement , element{}
后代选择器: E F{} 匹配E元素所有的后代
子代选择器:E>F{ } 匹配E元素的子元素
相邻选择器:E+F{ } 匹配E元素直接相邻的同级元素F
普通相邻选择器:E~F{}匹配E元素之后的同级元素F
多个类的选择器: .class.active{} 选中既含有class属性又含有active属性的选择器
ID和class选择器:elment#id{},同上。
E[attr]:所有含有属性attr的元素
E[attr =value]:所有含有属性值attr=value的元素
E[attr~=value]: 匹配
E[attr^=value]:匹配属性值为attr以value开头的元素
E[attr$=value]:匹配属性值attr以value为结尾的元素
E[attr*=value]:匹配属性attr值包含value的元素
.triangle{
width: 0px;
height: 0px;
border: 20px solid red;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
margin/padding:外边距/内边距
margin/padding: top right bottom left;
margin外边距是合并的。
块级元素的居中margin: 0 auto;
行内元素的居中text-align: center;
chrome: 设置的最小字体是12px,默认字体是16px
解决最小字体的方法:css中的语法: -webkit-text-transform: scale(0.75) // 原来字体的0.75倍
文本的对齐方式: text-align: left/right/center/justify(两边对齐)
首行缩进:text-indent: 首行缩进的距离
文字样式:text-decoration: none/underline/line-through/overline
改变文字大小:text-transform: none/uppercase(全部大写)/lowercase/capitalize(首字母大写)
改变字(单词)之间的间隔:word-spacing:
字母间隔修改的是字符和字母之间的间隔:letter-spancing:
单行文本溢出用...省略号表示:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
单位:px,em,rem,vw,vh区别?
px是指一个具体的大小长度单位
em是一个相对单位,是相对于父元素的字体大小
rem是一个相对的单位,是相对于根元素的字体大小
vw,vh是一个相对的单位,是相对于视口的大小
222
<article>
<h1>编码规范</h1>
<p>编码规范之很好的讲解:</p>
<p><b>philongHuynh</b></p>
</article>
好坏对比:
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
---
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>
<article class="blue"><article>
<article class="redBg mt30 bigText"><article>
---
<article class="movie"></article>
<article class="news"></new>
推荐所有的命名都是小写,命名都用""包裹,用中横线链接多个单词,命名体现功能,不涉及表现。
用于外侧包裹: .wrap / .wrapper
包裹容器: .container / .ct
用于头部: .header
页面body: .body
页面尾部: .footer
用于侧边栏: .aside / sidebar
与header footer对应,用于主要内容:.content
导航元素: .navigation
分页: .pagination
tab切换: .tab> . tab
导航列表:.breadcrumbs
下拉菜单:.dropdown
文章:.article
主体:.main
头像:.thumbnail
媒体资源:.media
面板:.panel
鼠标放置上去的提示:.tooltip
鼠标弹出时的提示:.popup
按钮:.button / .btn
广告:.ad
二级导航:.subnav
菜单: .menu
标签: .tag
提示信息:.message / .notice
摘要:.sunmmary
logo: .logo
搜索框:.search
登录:.login
注册:.register
用户名:.username
密码:.password
广告条:.banner
版权:.copyright
弹窗:.model / .dialog
CSS规范:
想了解更多关于命名规范的相关知识:
伪类:
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为变化而动态变化。
伪类列举
语言相关::dir /:lang
状态::link/:visited/:hover/ :active/ :focus
结构化::not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget
表单相关::checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope
其他::root/:fullscreen
伪元素:
伪元素用于创建一些不在文档树中的元素,并为其增加样式。
伪元素:::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line
::selection/::placeholder/::backdrop
学习vue之前你需要具备以下的知识:
安装vue:
1:本地安装,直接下载到本地
2:CDN引入,直接在页面中引入(推荐使用)
安装方法:vuejs.org(英文网站) cn.vuejs.org(中文网站) > learn > api
学习vue之前希望你具备条件:
lesson_1: 写一个helloworld的小例子吧
先写一个index.html的页面,主要用于指向例子:
第一节代码如下:
index.html:
`<body>
<h1>vue2.0实例</h1>
<hr>
<ol>
<li><a href="./01_helloworld.html">hello world实例</a></li>
</ol>
</body>
然后开始写我们的demo,代码如下:
<body>
<h1>hello world</h1>
<hr>
<div id="app">{{message}}</div> //message就是显示要包裹的信息
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !'
}
})
</script>
</body>
这样我们的一个小例子已经完成了,点击index.html中的“helloworld”会跳转至实例中,页面显示‘hello world’
lesson_2: v-if & v-else &v-show
v-if & v-else 看起来很熟悉,相当于我们之前见到的选择判断,那v-show是什么?v-show相当于css中的display:none属性。
实例代码:(下文中都是从index.html引入一个链接,不在演示index.html代码)
v-if.html:
<body>
<h1>v-if & v-else & v-show</h1>
<hr>
<div id="app">
<div v-if="islogin">
如果你使用了v-if那么你就可以看到这句话
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
islogin: true
}
})
</script>
</body>
解释:如果v-if的选择判断是正确的,那么会正产显示这句话;如果v-if是false,则不会显示这句话。
v-else实例:
<body>
<h1>v-if & v-else & v-show</h1>
<hr>
<div id="app">
<div v-if="islogin">
如果你使用了v-if那么你就可以看到这句话
</div>
<div v-else="notlogin">
如果你使用了v-else那么你可以看到这句话
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
islogin: false,
notlogin: true
}
})
</script>
解释:如果v-if的显示是正常的,不会显示v-else下面的这句话。同样也就是说,v-else的正常显示必须是在v-if的判断为false的前提下。
v-show和v-if的显示效果类似,这里不做演示。
敲黑板的地方开始了(duang duang duang):
v-if & v-show的区别是啥?
lesson_3:v-for实例
显然v-for就是循环的意思,但是这里和js有点不同的地方是:如果你想要在什么地方循环,那么你就在什么地方加入v-for。
具体代码如下:
v-for.html:
<h1>v-for</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items:[53,27,66,78,12]
}
})
</script>
解释:所以在v-for循环就实现了,这里我们要循环的是li所以在li加入了v-for。
那么简单的循环实现了,排序在vue中该怎么实现呢?(例如:5,6,4,7 ->4,5,6,7)
如果是在以往的JS我们是这样实现的:
data:{
items:[28,36,15,77,11]
},
computed:{
items:function(){
return this.item.sort();
}
}
👎 注意这种写法在vue中是错误的,error:when renderring root instance; 根命名错误
正确写法:
<h1>v-for</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in sortItems">{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items:[53,27,6,78,12],
},
computed: {
sortItems: function(){
return this.items.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b;
}
</script>
//在JS中排序:21,31,4,51;这样的排序出现是正常的,如果想要实现:4,21,31,51.在上文中我封装了一个sortNumber函数,你直接调用就可以了。
字符串数组的循环:
实现效果:
jack : 400
pony: 390
alex :410
代码:
<ul>
<li v-for="student in students">
{{student.name}}-{{student.money}}
</li>
</ul>
js:
data:{
students:[
{name:'jack',money:400},
{name:'pony',money:390},
{name:'alex',money:410},
]
}
接下来,我们进行数组对象方法的排序:
效果:pony: 390
jack:400
alex: 410
同样和上面的排序一样,我们需要提前封装一个数组对象方法的函数:
function sortByKey(array , key){
return array.sort(function(a , b){
var x =a[key];
var y = b[key];
return ((x<y) ? -1:((x>y)? :0 ))
})
}
排序代码:
html:
<ul>
<li v-for="student in sortStudents">
{{student.name}}-{{student.money}}
</li>
</ul>
js:
data: {
students:[
{name:'jack',money:400},
{name:'pony',money:390},
{name:'alex',money:410}
]
},
computed: {
sortStudents: function(){
return sortByKey(this.students,'money')
}
}
lesson_4:v-texth输出&v-html输出
v-txml具体代码如下:
<div id="app">
第一种(普通输出): {{message}} <br>
第二种(v-text输出):<span v-text="messages"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !',
messages: 'hello world !'
}
})
</script>
v-text的好处是在于,它是等dom预处理结束后才会进行输出,而一般的{{}}输出,如果你语法出现了错误,显示也是不正常的,但是你用了v-text如果语法错误,直接显示不出来。
v-html:
<div id="app">
第一种(普通输出): {{message}} <br> //普通的helloworld 字体
第二种(v-html输出):<span v-html="messages"></span> //h1号字体的 helloworld
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !',
messages: '<h1>hello world !</h1>'
}
})
</script>
v-html指令有种预编译的感觉,它输出的代码都是经过编译过的代码,但是这类型的代码在实战的过程中应该慎用,因为会引起不必要的xss攻击风险。
v-on实例:
代码展示:
<div id="app">
本场比赛得分:{{fenshu}} <br>
<button v-on:click="jiafen">加分</button>
<button @click="jianfen">减分</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
fenshu: 0
},
methods:{
jiafen:function(){
this.fenshu++;
},
jianfen:function(){
this.fenshu--;
}
}
})
</script>
v-on组件相当于JS中的时间,其中上述代码中的v-on:click的缩写方法是:@click
自定义加分:
<div id="app">
本次得分:{{count}}
<button v-on:click="add">加分</button>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
count: 1,
secondCount: 1
},
methods:{
add:function(){
this.count++;
},
onEnter:function(){
this.count = this.count + parseInt(this.secondCount);
}
}
})
</script>
解释:这是自定义加分的演示,这里要注意的地方是:在js中两个数字相加是默认为字符串相加,需要转换为数字相加,我在这里使用了parseInt。v-model是绑定数据源的意思,在下面的一节中会提到
lesson_6
v-model双向数据绑定:v-model实现的是双向数据,当用户在文本框输入文字的同时,屏幕也在同时输入文本框中的显示内容;其中v-model有几个属性,分别为:.lazy , .number , .trim
.lazy 属性:当用户在输入框输入文字的时候不会显示,离开输入框屏幕内容就会正常显示
.number 属性:当用户输入文字的时候不会显示,只有输入数字的情况下会显示,但是如果一字符为开头的也会正常显示。
.trim属性:屏幕显示去除文本输入的前后空格
code:
<div id="app"><span v-text="message"></span>
<h3>文本输入</h3>
v-model:<input type="text" v-model="message"><br>
v-model.lazy: <input type="text" v-model.lazy="message"><br>
v-model.number:<input type="text" v-model.number="message"><br>
v-model.trim:<input type="text" v-model.trim="message"><br>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !'
}
})
</script>
多选框绑定一个值:
code:
<div id="app">
<label>
<input type="checkbox" v-model="istrue" >
{{istrue}}</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !',
istrue: true
}
})
</script>
选中则为true,去掉对号则为false;
多选框绑定数组:
单选框的绑定一个数组:
<label for="istrue">
<input type="checkbox" v-model="array_name" value="huangfl">huangfl
</label>
<label for="istrue">
<input type="checkbox" v-model="array_name" value="jackwong">jackwong
</label>
<label for="istrue">
<input type="checkbox" v-model="array_name" value="philonghuynh">philonghuynh
</label><br>
{{array_name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !',
istrue: true,
array_name:[]
}
})
</script>
当点击选框按钮的时候,下面的数组框会显示你选中的信息。
单选框选择性别信息:
<div id="app">
<label >
<input type="radio" v-model="sex" value="男"> 男
</labe>
<label>
<input type="radio" v-model="sex" value="女">女
</label> <br>
你选择的性别是:{{sex}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !',
istrue: true,
array_name:[],
sex: '男' //表示默认选框是男
}
})
</script>
lesson_7:
v-bind 标签元素选择属性:
<div id="app">
<img v-bind:src="imgSrc">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
imgSrc: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3116813668,3476052882&fm=173&s=08E273231862B69EFF1500DE0100C091&w=218&h=146&img.JPEG'
}
})
</script>
对于a标签来说,在href输入一样的地址一样可以链接到。
当然也可以这样写:
css:.classA{color : red;}
html:<div v-bind:class="{classA:isok}"> 这行文本用于判断</div>
js: data{
className:'classA'
isok:true //如果是true显示为红色,false则不显示
}
bind标签属性绑定数组元素:
<div v-bind: class ="[class A,classB]"></div>
data:{
classA:'classA',
classB:'classB'
bind标签属性绑定三元运算符:
<style type="text/css">
.classA{
color:red;
}
.classB{
font-size: 50px;
}
</style>
<body>
<h1>hello world</h1>
<hr>
<div id="app">
<img v-bind:src="imgSrc">
<div v-bind:class="isok?classA:classB">你好这个世界</div>
<hr>
<input type="checkbox" v-model="isok">
<label for="isok">isok={{isok}}</label>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
classA: 'classA',
classB: 'classB',
isok: true
}
})
</script>
当鼠标点击的时候会显示正确,为classA属性,false的情况下为classB属性
当然v-bind也可以对象style,例如:
html:
<div v-bind:style='styleObject'>你好,我是小明;如果你绑定了对象属性,那么你会看到这行字会变成红色</div>
js:
data:{
styleObject:{
color:'red',
fontSize: '20px'
}
}
lesson_8:指令其他部分
v-pre & v-cloak & v-once:
v-pre文本原样输出不经过任何编译,相当于html中的pre代码,直接加入到想要不编译的标签中就可以了
v-cloak: 渲染完成以后才会显示相关信息,只要放在想要的标签中加入即可。
v-once:只执行一次,例如上面所提到的双向数据绑定:
<div id="app">
<span v-once>{{message}}</span> <br>
<input type="text" v-model="message" >
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'hello world !'
}
})
</script>
这里的v-once只会执行一次,就是刚刚加载完成时候这一次就会停止。
好了,第一季就到此结束了!
表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素。
<input tyepe="text" > -> 文本输入框
<input type="password"> -> 密码框
<input type="radio"> ->单选框
<input type="checkbox"> ->复选框
<input type="file" accept="image/png"> ->上传文件,//图片文件
<input type="submit" > -> 提交按钮
<input type="reset" > ->重置按钮
顾名思义:请求数据用get,传递数据用post
GET请求:
GET请求能够被缓存
GET请求会保存在浏览器的浏览记录中
GET请求有长度限制
GET请求主要用以获取数据
会将表单内的信息组装成url变成key&value的形式发送出去
POST请求:
POST请求不能被缓存下来
POST请求不会保存在浏览器浏览记录中
POST请求没有长度限制
请求的数据不会发生变化,会通过服务器传输给后台。
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据
radio单选框标记,例如这样:
<input type="radio" name="gendle" value="男">男
<input type="radio" name="gendle" value="女">女
主要是用来文本显示需要提示用户的相关的信息
主要用于暂存信息。
作用:
可以埋下一个值,如果产品发生了迭代,可能会直接调用type=“hidden”的相关信息,一般用于开发者,用户一般发现不了。
也可以用于判断用户信息是否正确保证网页安全,防止黑客攻击。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.