1.JQ $.get()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq</title>
</head>
<body> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
var url="http://rap.taobao.org/mockjsdata/11104/api/wechat/hotplate";
var str='';
$.get(url,function (msg) {
var res=msg.result;
for(var i =0;i<res.length;i++){
str+='title: '+res[i].hotTitle+'<br>'+
'desc1: '+res[i].hotDesc1+'<br>'+
'desc2: '+res[i].hotDesc2+'<br>'+
'img: '+res[i].hotImg+'<br/>';
}
$("body").append(str);
console.log("msg.res: "+msg.result.length);
console.log("msg: "+msg.result[0].hotTitle);
},'json');
</script>
</body>
</html>
2. vue1.0 @click()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<div class="a1">
<ul>
<li v-for="item in items" @click="test(item)">{{item.name}}</li>
</ul>
</div>
<script>
var a1=new Vue({
el:'.a1',
data:{
items:[
{name:'abc'},
{name:'def'},
{name:'ghi'},
] },
methods:{
test:function (val) {
console.log('ok: '+val.name);
}
}
});
</script>
</body>
</html>
3. box-shadow 线性渐变只需要3个参数，加一个不透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>box-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
body{font-family: "Microsoft YaHei", "微软雅黑", "MicrosoftJhengHei", Helvetica Neue,Helvetica,Arial,sans-serif}
.test li {
margin-top: 20px;
list-style: none;
width: 400px;
padding: 10px;
background: #fff;
}
.test .outset-blur {
box-shadow: 0px 4px 20px rgba(0, 0, 0, .25);
} </style>
</head>
<body>
<ul class="test"> <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
第一个是x 第二个是y 第3个是大小模糊程度 rgba是颜色，最后是不透明度 <br>
<p>中文</p>
<h1>abc</h1>
</ul>
</body>
</html>
4. input placeholder颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{color:red;}
input::-webkit-input-placeholder{color:red;}
</style>
</head>
<body>
<input type="text" placeholder="123">
</body>
</html>
5. vue1.0 tab点击添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab 添加样式</title>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<div class="a1">
<ul>
<li v-for="item in items" v-text="item.name" :class="{cur:iscur==($index)}" @click="iscur=($index)"></li>
</ul>
</div>
<style>
.cur{color:red;}
</style>
<script>
var a1=new Vue({
el:'.a1',
data:{
iscur:0,
items:[
{name:'abc'},
{name:'def'},
{name:'ghi'}
] }
});
</script>
</body>
</html>
6. vue1.0 this.$http.get('xx.json')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div class="a1">
<ul>
<!-- <li v-for="city in cities">
{{city.name}}
</li>-->
<city v-for="city in cities" :city="city"></city>
</ul>
</div>
<script>
Vue.component('city',{
props:['city'],
template:'<li>{{city.name}}</li>'
})
var a1=new Vue({
el:'.a1',
data:{
cities:''
},
ready: function() {
this.getCitys()
},
methods:{
getCitys:function () {
this.$http.get('city.json')
.then(function (res) {
this.$set('cities',res.data)
})
.catch(function(response) {
console.log(response)
})
}
}
});
</script>
</body>
</html>
对应的json
[
{
"id" : "1",
"name":"广州"
},
{
"id" : "2",
"name":"中山"
},
{
"id" : "3",
"name":"惠州"
},
{
"id" : "4",
"name":"清远"
},
{
"id" : "5",
"name":"深圳"
}
]
7. vue1.0以这个为主吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 1.0</title>
<script src="//cdn.bootcss.com/vue/1.0.28/vue.min.js"></script>
<style>
p{border-bottom: 1px solid green;}
</style>
</head>
<body>
<p>vue 1.0</p>
<p>1.最简vue</p>
<div class="a1">
{{message}}
</div>
<script>
var app = new Vue({
el:'.a1',
data:{
message:'hello vue'
}
});
app.message='how are you ';
</script>
<p>2. v-bind 简写为： </p>
<div class="a2">
<!-- <span v-bind:title="message">mouseover</span><br>-->
<span :id="id1">span</span><br>
<span :id="id2">span2</span>
</div>
<script>
var app2 = new Vue({
el:'.a2',
data:{
message:'how are you '+new Date(),
id1:'span1',
id2:'span2'
}
});
</script>
<p>3. v-if</p>
<div class="a3">
<h3 v-if="seen">i will seen</h3>
<h3 v-if="hide">i will hide</h3>
</div>
<script>
var app3=new Vue({
el:'.a3',
data:{
seen:true,
hide:false
}
});
</script>
<p>4 .v-for</p>
<div class="a4">
<ul>
<li v-for="list in lists">
{{list.key}}
</li>
</ul>
</div>
<script>
var app4 = new Vue({
el:'.a4',
data:{
lists:[
{key:'a'},
{key:'b'},
{key:'c'}
]
}
});
app4.lists.push({key:'d'});
</script>
<p>5. v-on:click 事件绑定 简写 @ </p>
<div class="a5">
{{message}}
<!--<button v-on:click="test">btn</button>-->
<button @click="test">btn2</button>
</div>
<script>
var a5= new Vue({
el:'.a5',
data:{
message:'test one'
},
methods:{ /* methods 注意关键字*/
test:function () {
this.message+=' is ok'
}
}
});
</script>
<p>6. v-model</p>
<div class="a6">
{{message}}
<input type="text" v-model="message">
</div>
<script>
var app6 = new Vue({
el:'.a6',
data:{
message:'this'
}
});
</script>
<p>7.组件</p>
<div class="a7">
<ul>
<item></item>
</ul>
</div>
<script>
Vue.component('item',{
template:'<li>hello</li>'
});
var app7 = new Vue({
el:'.a7'
});
</script> <p>7.1组件 props 【】</p>
<div class="a71">
<ul>
<item v-for="a in lists" :b="a"></item> <!-- 注意 a b a :b=a -->
</ul>
</div>
<script>
Vue.component('item',{
props:['b'], /* b b */
template:'<li>{{b.key}}</li>'
});
var app71=new Vue({
el:'.a71',
data:{
lists:[
{key:'adda'},
{key:'bb'},
{key:'cc'}
]
}
});
</script>
<p>计算属性 computed 写成了函数</p>
<div class="a9">
first:{{message}} <br/>
last:{{res}}
</div>
<script>
var a9 = new Vue({
el:'.a9',
data:{
message:'hello'
},
computed:{
res:function () {
return this.message.split('').reverse().join('');
}
}
});
</script>
<p>2.1 v-bind 绑定class </p>
<style>
.color{color:red;}
.fontsize{font-size: 30px;}
</style>
<div class="a21">
<span :class="{color:isColor,fontsize:isFontSize}">test1</span>
</div>
<script>
var a21=new Vue({
el:'.a21',
data:{
isColor:true,
isFontSize:false
}
});
</script>
<div class="a22">
<span :class="test2">test2</span>
</div>
<script>
var a22=new Vue({
el:'.a22',
data:{
isColor:false,
isFontSize:true
},
computed:{
test2:function () {
return{
color:this.isColor,
fontsize:this.isFontSize
}
}
}
});
</script>
<p>2.3 v-for 使用$index 【1.0不同】</p>
<div class="a23">
<ul>
<li v-for="list in lists"> 【1.0不同】
{{otherMessage}}...{{$index}}:{{list.key}}
</li>
</ul>
</div>
<script>
var a23=new Vue({
el:'.a23',
data:{
otherMessage:'list-',
lists:[
{key:'a'},
{key:'ab'},
{key:'abc'}
]
}
});
</script>
<p>2.31 v-for对象</p>
<div class="a231">
<ul>
<li v-for="value in person">
{{value}}
</li>
</ul>
</div>
<script>
var a231=new Vue({
el:'.a231',
data:{
person:{
name:'xiao',
age:12
}
}
});
</script>
<p>2.4 事件处理 v-on</p>
<div class="app24">
<button @click="test('haha')">btn</button>
<input type="text" placeholder="输入回车就可以提交" @keyup.enter="submits">
<form @submit.prevent="submit"></form>
</div>
<script>
var app24=new Vue({
el:'.app24',
data:{ },
methods:{
test:function (mes) {
alert(mes+ " is here")
},
submits:function () {
alert('ok');
}
}
});
</script>
<p>2.5 v-model</p>
<div class="a25">
<input type="checkbox" v-model="checked"> {{checked}}
</div>
<script>
var a25=new Vue({
el:'.a25',
data:{
checked:false
}
});
</script>
<p>2.6 组件</p>
<div class="a26">
<item></item>
</div>
<script>
Vue.component('item',{
template:'<div>this i so</div>'
});
var a26=new Vue({
el:'.a26',
data:{ }
});
</script>
<p>2.61局部组件</p>
<div class="a261">
<item></item>
</div>
<script>
var child={
template:'<div>this is xxxxxxx</div>'
}
var a261=new Vue({
el:'.a261',
data:{ },
components:{
'item':child
}
});
</script>
<p>2.7 $emit</p>
<div id="counter-event-example">
<span>{{ total }}</span>
<button-counter v-on:increment="incrementTotal"></button-counter> <!-- 子组件再绑定事件关联父组件-->
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>
Vue.component('button-counter', {
template: '<button @click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () { /* 子组件绑定事件 */
this.counter += 1
this.$emit('increment') /* 子组件要跟父组件通信*/
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 3
}
}
})
</script>
<p>3.1 x-template</p> </body>
</html>
8. css3 flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex 微信兼容</title>
<style>
a,body,button,div,h1,h2,i,img,input,li,p,span,ul{position:relative;margin:0;padding:0;color:#666;font-size:16px;font-family:Helvetica;}
button,input{outline:0;}
li{list-style:none;}
body{box-sizing:border-box;}
a{text-decoration:none;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;} ul{
width: 500px;height: 300px;border: 1px solid green;
display: flex; /*整体排列*/
flex-direction: row; /* 排列方向 row column 水平垂直*/
flex-wrap: wrap; /* 横排，一行放不下，如何换行 nowrap默认不换行 wrap换行*/
/*flex-flow:row-reverse wrap;*/ /* 这个是上面两个的简写 默认 row nowrap */ /*整体对齐*/
justify-content:space-around ; /*水平对齐 当ul 够宽时 */
align-items: flex-end; /* 垂直对齐 当 ul 够高时 */
align-content: center; /*li多行水平对齐方式 */
}
li{height:100px;border:1px solid red;
width:80px; }
li:nth-of-type(2n+1){order:0;flex-grow: 1;flex-shrink: 1;} /* order li的排列先后顺序 数字小的排前面，默认0 */ li:nth-of-type(2n){order:1;flex-grow: 2;flex-shrink: 3;} /*flex-grow 对剩余空间进行放大比例。总剩余空间/总比例*所占比例 默认0 */
/* flex-shrink 空间不够，进行缩小比例,默认1 */
/* flex-basis 有多余空间时，计算主轴是否有多余空间 默认 auto */
/* flex 是上面3个的简写 默认 0 1 auto */
li:nth-of-type(3){align-self:flex-start} /* 覆盖 align-content 设置单独样式 默认继承 align-content*/ </style>
</head>
<body>
<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" style="font-size: 40px;">flex</a> <p>flex 没有float、clear、vertical-align属性</p>
<h1>ul有两个</h1>
<h2>flex-flow 水平排列是否换行</h2>
<h2>对齐方式 justify-content 等</h2>
<h1>li 有两个</h1>
<h2>order 排列顺序</h2>
<h2>空间大小分配 优先用 flex 自动分配 </h2>
<h3>个别对齐方式 align-self </h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
8.1 css3 flex demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
a,body,button,div,h1,h2,i,img,input,li,p,span,ul{position:relative;margin:0;padding:0;color:#666;font-size:12px;font-family:Helvetica;}
button,input{outline:0;}
li{list-style:none;}
body{box-sizing:border-box;}
a{text-decoration:none;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;} ul{
border: 1px solid red;
width: 100%;
box-sizing: border-box;
padding: 0 15px;
height: 120px;
display: flex;
flex-flow: row wrap; /* 水平多行*/
justify-content: space-between; /* 水平两端对齐*/
align-items: center; /*垂直两端对齐*/
}
li{
width: 30%;
height: 40px;
line-height:40px;
border: 1px solid green;
border-radius: 5px;
text-align: center; }
</style>
</head>
<body>
<p>微信6个li</p>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ul>
</body>
</html>
8.2 es6 + 正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1.es6 对象简洁法</p>
<script>
var o = {
test (a){
return a + 10;
}
}
console.log(o.test(12));
</script>
<p>2.正则判断 用 reg.test(val) </p>
<script> if(/\d/.test('1a')){
console.log('ok');
}else{
console.log('error');
} function fun(val) {
if(/\d/.test(val)) {
return true;
}else{
return false;
}
}
function fun2(val) {
if(/\d/.test(val)){
return true;
}else{
return false;
}
}
/* fun2() 简化版 */
function fun3(val) {
return (/\d/.test(val))? true: false
} console.log('aa: ' + fun(100));
console.log('bb: ' + fun2(120));
console.log('cc: ' + fun3('a')); var a = 4>1 ? true :false;
console.log('dd: ' + a);
var b = 3>20 ? 'yes':'no';
console.log('dd: ' + b)
</script>
<p> 3. es6 + 正则 最简</p>
<script>
var obj = {
phone (val){
return (/\d/.test(val))?true:false;
}
}
console.log("phone: "+obj.phone(123));
</script>
<p>4. 传统 es3 面向对象</p>
<script>
var obj2 = {
phone:function (val) { /* 传统 es3 这里多了一个 function */
return val+' is good';
}
}
console.log("es3: "+obj2.phone(123));
</script>
</body>
</html>
8.22 es6 正则 优化
<script>
var o = {
phone(val){
return /\d/.test(val);
}
}
console.log('phone: ' + o.phone(123))
console.log('phone: ' + o.phone('abc'))
</script>