pp 总结一
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>
pp 总结一的更多相关文章
- PP常用bapi
PPCO0012 co01/CO02/CO03屏幕bapi 生产订单:显示/更改订单抬头数据 PPCO0001 开发应用程序: PP订单 PPCO0007 保存生产订单时退出 PPCO0001 A ...
- SAP ECC PP 配置文档
SAP ECC 6.0 Configuration Document Production Planning & Control (PP) 1. General Settings 1.1 Ma ...
- hdu 3590 PP and QQ 博弈论
思路: 在贾志豪神牛的论文 里,这两种游戏都有 其中树的删边游戏:叶子节点的SG值为0:中间节点的SG值为它的所有子节点的SG值加1 后的异或和. ANTI-SG:先手必胜当且仅当:(1)游戏的SG函 ...
- hdu 3590 PP and QQ
知识储备: Anti-SG 游戏和 SJ 定理 [定义](anti-nim 游戏) 桌子上有 N 堆石子,游戏者轮流取石子. 每次只能从一堆中取出任意数目的石子,但不能不取. 取走最后一 ...
- PP常见数据表
Table表 Short text短文本 AFFL Work order sequence加工单顺序 AFFT Order process instructions订单-流程指令 A ...
- controller.pp 各组件的安装顺序
controller 属性: admin_address => $controller_node_address, public_address => $c ...
- iphone 6s pp助手 越狱
https://www.apple.com/iphone-6/合适初高中学习英语http://www.travelchinaguide.comhttp://jailbreak.25pp.com/ ip ...
- fastlane安装流程和fastlane match同步证书和PP文件方法
分步指南 安装fastlane: ① Make sure you have the latest version of the Xcode command line tools installed: ...
- PP.io的三个阶段，“强中心”——“弱中心”——“去中心”
什么是PP.io? PP.io是我和Bill发起的存储项目,目的在于为开发者提供一个去中心化的存储和分发平台,能做到更便宜,更高速,更隐私. 当然做去中心化存储的项目也有好几个,FileCoin,Si ...
- 一切为了落地，为什么要把PP.io设计成三个阶段！
之前的一篇文章,我讲解了PP.io的三个阶段:“强中心”,“弱中心”,“去中心”.今天来解释下,我为什么要分三个阶段逐步实现PP.io去中心化存储网络: 简单地说,就是在区块链不可能三角理论中,我暂时 ...
随机推荐
- MySQL中binlog参数:binlog_rows_query_log_events-记录具体的SQL【转】
在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...
- 二层环路保护，RRPP多环的配置
作者:邓聪聪 组网需求: 局域网中,由A/B/C/D构成RRPP域1换网络结构,要求环网机构中的任意两条线路中断都不能影响业务. 配置思路: 环路由两部分组成,ring1.ring2,B为环1的主节点 ...
- 【转】Java HashMap的死循环
问题的症状 从前我们的Java代码因为一些原因使用了HashMap这个东西,但是当时的程序是单线程的,一切都没有问题.后来,我们的程序性能有问题,所以需要变成多线程的,于是,变成多线程后到了线上,发现 ...
- qt 免注册下载
下载地址为: http://download.qt.io/
- 移动端触屏滑动touches使用
代码 var start = { x: 0, y: 0 } var end = { x: 0, y: 0 } document.addEventListener('touchstart', funct ...
- Docker快速搭建WordPress博客网站
WordPress WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在W ...
- 洛谷P4606 [SDOI2018]战略游戏 [广义圆方树]
传送门 思路 先考虑两点如何使他们不连通. 显然路径上所有的割点都满足条件. 多个点呢?也是这样的. 于是可以想到圆方树.一个点集的答案就是它的虚树里圆点个数减去点集大小. 可以把点按dfs序排序,然 ...
- Confluence 6 设置 Oracle 数据库准备
请查看 Supported Platforms 页面来获得 Confluence 系统支持的 Oracle 数据库版本.你需要在安装 Confluence 之前升级你的 Oracle 数据库. 如果你 ...
- Linux超级守护进程——xinetd
一 Linux守护进程 Linux 服务器在启动时需要启动很多系统服务,它们向本地和网络用户提供了Linux的系统功能接口,直接面向应用程序和用户.提供这些服务的程序是由运行在后台的守护进程来执行的. ...
- 前端图片缓存之通过img标签加载GIF只能播放一次问题(转载)
最近项目中要求再网页中插入一张gif图片,让用户每次到达该位置时动一次,所以我们就制作了一张只动一次的gif图片通过img标签引入.当用户进入该位置时,通过remove()清除图片然后重新append ...