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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
