Python学习二十八周（vue.js）
一、指令
1、一个例子简单实用vue：
下载vue.js（这里实用1.0.21版本）
编写html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
var c = new Vue({
el: '#box',//el代码element的缩写，定位元素
data: { //data中编写数据
msg: 'welcome vue!'
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}} <!--通过{{}}方式来调用vue的表现 -->
</div>
</body>
</html>
2、常见指令：
指令：扩展html标签功能属性
- v-model 一般表单元素（input） 双向数据绑定（如果有了两个同样的input，修改其中一个另外一个内容也跟着修改）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
new Vue ({
el: '#box', //无论class id 标签都可以
data:{
msg: 'welcome vue!',
msg2: 12,
msg3: true,
arr:['apple','bananan','orange'],
json: {a:"apple",b:"banana",c:"orange"}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg2}}
<br>
{{msg3}}
<br>
{{arr}}
<br>
{{json}}
</div>
</body>
</html>
msg可用数据类型演示
- 循环 v-for：
1、数组：
v-for=“value in arr” 如果想到得到index使用{{$index}}
2、json：
循环json和arr类似
可以使用{{$index}} {{$key}}方式,也可以使用python字典循环方式类似显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
new Vue ({
el: '#box', //无论class id 标签都可以
data:{
arr:['apple','banana','orange'],
json: {a:"apple",b:"banana",c:"orange"}
}
});
}
</script>
</head>
<body>
<div id="box">
<ul>
<!--需要数组v-for
如果想得到数组的index可以使用{{$index}}
-->
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<!--
循环json和arr类似
可以使用{{$index}} {{$key}}方式
-->
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<!--
使用python字典循环方式类似显示
-->
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
</body>
</html>
- 事件:v-on:click="函数"
1、click
window.onload = function () {
new Vue ({
el: '#box', //无论class id 标签都可以
methods:{//onclick通过methods来完成
show:function () {
alert(1);
}
}
});
}
2、mouseover 鼠标划到上面触发
3、mouseout 鼠标移走时触发
4、mousedown
5、dbclick 双击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
new Vue ({
el: '#box', //无论class id 标签都可以
data:{
arr:['apple','banana','orange'],
json: {a:"apple",b:"banana",c:"orange"}
},
methods:{//onclick通过methods来完成
add:function () {
this.arr.push('tomato');
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按键" v-on:mouseover="add()" >
<br>
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
- 显示隐藏 v-show
v-show="true/false"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
new Vue ({
el: '#box', //无论class id 标签都可以
data:{
divShow: true
},
});
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按键" v-on:click="divShow=False" >
<div style="width:100px; height:100px; background:#111" v-show="divShow"></div>
</div>
</body>
</html>
例子：
简易留言板（todolist）
要求：bootstrap来完成框架引入，bootstrap.js依赖jqeury
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="css/jquery-1.7.2.js"></script>
<script src="css/bootstrap.js"></script>
<script src="css/vue.js"></script>
<script>
window.onload = function () {
new Vue({
el: "#box",
data: {
myData: [],
username: '',
age: '',
nowIndex:-100,
},
methods: {
add: function () {
this.myData.push({
name: this.username,
age: this.age,
});
this.username = '';
this.age = ''; },
deleteMsg:function (n) {
if(n=-2){
this.myData=[];//当nowIndex=-2时，将数组置为空
}else{
this.myData.splice(n,1);//对应的nowIndex索引，删除数组长度为1
} }
}
})
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group ">
<label for="username">用户名</label>
<input placeholder="输入用户名" id="username" type="text" class="form-control" v-model="username">
</div>
<div class="form-group ">
<label for="age">年龄</label>
<input placeholder="输入年龄" id="age" type="text" class="form-control" v-model="age">
</div>
<div class="form-group">
<input value="提交" type="button" class="btn btn-primary" v-on:click="add()"/>
<input value="重置" type="reset" class="btn btn-danger"/>
</div>
</form> <hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-warning">用户信息表</caption>
<tr class="text-info">
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{ $index +1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button class="btn btn-danger btn-sm " data-toggle="modal" data-target="#layer" v-on:click="nowIndex={{$index}}">删除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据</p>
</td>
</tr>
</table> <!--模态框-->
<div role="dialog" class="modal fade" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">确认删除么？</h4>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div> </body>
</html>
二、事件
v-on 简写 @
事件对象：
@click="show($event)"
事件冒泡：
默认行为是关联事件冒泡的，阻止冒泡有两种方法：
1、在v-on:click=show($event)中定义event，然后在函数中定义e.cancelButte=true
2、直接使用vue提供的v-on:click.stop=show()
默认行为：
阻止默认行为：
1、e.preventDefault();
2、@contextmenu.prevent=“show（）”
键盘类事件
常用键：
回车：
1、@keyup/keydown.13
2、@keyup/keydown.enter
上下左右：
@keyup/keydown.(up/down/left/right）可以表示键盘的上下左右，同时也可以通过函数中的keyCode抓出来对应的键
属性：
v-bind:属性 简写 :属性
<img v-bin:src="url">
class与style属性：
class：
1、:class="[red, blue]" 其中red和blue都是Vue的data中的数据，通过数据对应真正的类
2、:class="{red:true, blue:false}" 通过这种方式来确定，其中red和blue都是真正的类
3、:class="json"
<script>
window.onload=function () {
new Vue({
el: '#box',
data:{
json:{
red: true,
blue:false
}
} })
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#box',
data:{
url:' http://www.baidu.com'
} })
}
</script>
</head>
<body>
<div id="box">
<!--<a v-bind:href="url" >点我</a>-->
<a :href="url">点我</a>
</div>
</body>
</html>
style要求都使用json方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#box',
data:{
c:{color: 'red'},
d:{backgroundColor:'blue'}
} })
}
</script>
</head>
<body>
<div id="box">
<strong :style="[c, d]">文字、、、</strong>
</div>
</body>
</html>
注意：复合样式采用驼峰命名法：比如背景色使用backgroundColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#box',
data:{
a: {
color: 'red',
backgroundColor: 'blue'
}
} })
}
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字、、、</strong>
</div>
</body>
</html>
三、模板
{{msg}} 数据更新模板也跟着更新
{{*msg}} 数据只更新一次
{{{msg}}} html转义数据
四、过滤器
语法：
{{msg|filter}} 添加过滤器
{{msg|filterA|filterB}} 连续多个过滤器
系统提供了一些过滤器
1、uppercase
2、lowercase
3、capitalize
4、currency 表示钱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#box',
})
}
</script>
</head>
<body>
<div id="box">
{{12|currency}}
<br>
{{12|currency '￥'}}
</div>
</body>
</html>
5、debounce 配合键盘事件的延迟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: { },
methods: {
show:function () {
alert(1)
}
} }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<!--debounce延迟2s后执行-->
<input type="text" @keyup="show|debounce 200"> </div>
</body>
</html>
数据配合使用的过滤器：
6、limitBy 限制几个
limitBy 参数（取几个）
limitBy 取几个 从哪开始 limitBy 2 3 表示从3开始取两个数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: {
arr:[1,2,3,4,5]
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<ul>
<li v-for="val in arr|limitBy 3 2">{{val}}</li>
</ul>
<ul>
<li v-for="val in arr|limitBy 3 arr.length-2">{{val}}</li>
</ul> </div>
</body>
</html>
7、filterBy '选中的数据'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: {
arr:['width', 'length','background', 'orange']
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<ul>
<!--只过滤取出带字母 o的数据-->
<li v-for="val in arr|filterBy 't'">{{val}}</li>
</ul> </div>
</body>
</html>
8、orderBy
其中orderBy 1表示正序 orderBy -1表示倒序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: {
arr:['width', 'length','background', 'orange']
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<ul>
<!--只过滤取出带字母 o的数据-->
<li v-for="val in arr|filterBy 't'">{{val}}</li>
</ul>
<ul>
<!--排序 orderBy 1表示正序 orderBy -1表示倒序-->
<li v-for="val in arr|orderBy 't'">{{val}}</li>
</ul> </div>
</body>
</html>
9、自定义过滤器：
Vue.filter('name',function(input){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
Vue.filter('toDou',function (input) {
// input表示过滤器的需要处理的数据，在这里是变量a
return input<10?'0'+input:''+input
});
var vm = new Vue({
data: {
a:9
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
{{a|toDou}}
</div>
</body>
</html>
不带参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
Vue.filter('toDou',function (input,a,b) {
alert(a+','+b)
// input表示过滤器的需要处理的数据，在这里是变量a
return input<10?'0'+input:''+input
});
var vm = new Vue({
data: {
a:9
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
{{a|toDou 1 2}}
</div>
</body>
</html>
带参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
Vue.filter('date',function (input) {
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
});
var vm = new Vue({
data: {
a:Date.now()
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
{{a|date}}
</div>
</body>
</html>
实例-时间过滤器
五、交互
如果vue想做交互，本身框架不支持，如果想做交互，必须引入vue-resouce
get
<script>
window.onload=function () {
new Vue({
el: '#body',
data:{ },
methods:{
get:function () {
this.$http.get('vue-connect.txt').then(function (res) {
alert(res.data);
}, function (res) {
alert(res.status);
});
}
} });
};
</script>
<script>
// 通过get方式给服务器发送数据
window.onload=function () {
new Vue({
el: '#body',
data:{ },
methods:{
get:function () {
this.$http.get('get.php',{
a:1,
b:2
}).then(function (res) {
alert(res.data);
}, function (res) {
alert(res.status);
});
}
} });
};
</script>
post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#body',
data:{ },
methods:{
post:function () {
this.$http.post('post.php',{
a:1,
b:2
},{
emulateJSON:true
}).then(function (res) {
alert(res.data);
}, function (res) {
alert(res.status);
});
}
} });
};
</script>
</head>
<body>
<div id="body">
<input type="button" class="btn btn-default" value="按钮" @click="post()"> </div>
</body>
</html>
jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function () {
new Vue({
el: '#body',
data:{ },
methods:{
get:function () {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd: 'ab'
},{
jsonp: 'cb'
}).then(function (res) {
alert(res.data.s);
}, function (res) {
alert(res.status);
});
}
} });
};
</script>
</head>
<body>
<div id="body">
<input type="button" class="btn btn-default" value="按钮" @click="get()"> </div>
</body>
</html>
VUE生存周期：
钩子函数：
created 实例已经创建，在new Vue（{}）创建完成后就调用该钩子函数
beforeCompile 编译之前
compiled 编译之后
ready 插入到文档中，也就是类似于window.onload
beforeDestroy 销毁之前
destroyed 销毁之后
其中后面两个需要先将new Vue定义为一个变量，即
var vm=new Vue（{
methods：{
beforeDestroy：function（）{}
destroyed：functio你（）{}
}
}）
然后执行:
document.onclick=function（）{
vm.$destroy();
}
v-cloak： 防止花括号闪烁,用在比较大的段落
<style>
[v-cloak]{
display:none;
}
</style>
如果单独对某个标签做防止闪烁可使用v-text
<span v-text='msg'></span>
new Vue({
el: '#app'
data:{
msg: 'welcome'
}
同样使用v-html也可以防止闪烁
七、计算属性：
computed：
computed里面可以放置一些业务逻辑代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
el: '#box',
data:{
a:1,
},
computed:{
// computed中是一个属性，里面以函数的形式存在，同时要求有一个返回值，如没有就没有任何输出
// b是一个对象，里面有两个方法，一个是get，一个是set
b:{
get:function () {
return this.a
},
// 如果需要修改b的值，需要在set中设置，val代表vm.b传递过来的值
set:function (val) {
this.a = val
}
}
} });
document.onclick=function () {
vm.b = 101;
}
}
</script>
</head>
<body>
<div id="box">
a = {{a}}
<br>
b = {{b}}
</div>
</body>
</html>
八、vue实例的一些简单小方法
vm.$el 就是元素
vm.$data 就是数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
el: '#app',
data: {
a: 1
}
});
// $el就是元素
console.log(vm.$el);
vm.$el.style.backgroundColor='red';
console.log(vm.$data.a)
vm.$data.a=4
} </script>
</head>
<body>
<div id="app">
{{a}}
</div>
</body>
</html>
vm.$mount();可以手动挂载，代替el这个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({ data: {
a: 1
}
});
// 手动挂载
vm.$mount('#app');
} </script>
</head>
<body>
<div id="app">
{{a}}
</div>
</body>
</html>
vm.$options 获取自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: {
a: 1
},
aa:11
}).$mount('#app'); console.log(vm.$options.aa);
} </script>
</head>
<body>
<div id="app">
{{aa}}
</div>
</body>
</html>
vm.$destroy 销毁对象
vm.$log() 查看现在数据的状态
循环：
v-for='value in data'
如果有重复的数据：
需要使用track-by="$index"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
var vm = new Vue({
data: {
arr: ['apple', 'orange','pear']
},
methods: {
add:function () {
this.arr.push('tomato');
}
} }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<input type="button" value="添加" @click="add">
<ul>
<!--如果遇到重复的，需要添加track-by 后面的值可以是$index也可以是数据库的uid，只要保证不重复即可-->
<li v-for="val in arr" track-by="$index">
{{val}}
</li>
</ul>
</div>
</body>
</html>
自定义指令：
Vue.directive('指令名称',function(){}) 注意指令名称不能为v-XX,只能写XX并且在调用时写v-XX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
Vue.directive('red', function () {
this.el.style.backgroundColor='red'
})
var vm = new Vue({
data: {
msg: 'AAA'
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<span v-red>{{msg}}</span>
</div>
</body>
</html>
注意：指令必须以v- 开头，而且指令写的时候不能带v-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
Vue.directive('red', function (color) {
this.el.style.backgroundColor= color
});
var vm = new Vue({
data: {
msg: 'AAA'
},
methods: { } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<span v-red="'red'">{{msg}}</span>
</div>
</body>
</html>
带参数的自定义指令
自定义键盘指令：
例如ctrl是17，在keydown上定义ctrl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () {
// 把17的键值分配给ctrl
Vue.directive('on').keyCodes.ctrl=17;
var vm = new Vue({
data: {
msg: 'AAA'
},
methods: {
show:function () {
alert(1)
} } }).$mount('#app'); } </script>
</head>
<body>
<div id="app">
<input type="text" @keydown.ctrl="show">
</div>
</body>
</html>
数据监听：
vm.$watch(name, function(){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload=function () { var vm = new Vue({
data: {
a:111,
b:22,
},
methods: { } }).$mount('#app'); vm.$watch('a',function () {
alert('a发生变化了');
this.b = this.a +100;
})
document.onclick=function () {
vm.a = 1;
}
} </script>
</head>
<body>
<div id="app">
{{a}}
{{b}}
</div>
</body>
</html>
十一、vue过渡
动画：
<div id="div1" v-show="bSign" transition="fade"> </div> <style>
#div1{
width:100px;
height:100px;
background:red;
}
.fade-transition{
transition:1s all ease;
}
.fade-enter{
opacity:0;
}
.fade-leave{
opacity:0;
transform:translateX(200px);
}
</style>
进入：
.fade-enter{
opacity:0;
}
离开：
.fade-leave{
opacity:0;
transform:translateX(200px);
}
通过animate.css实现动画：
1、下载animate.css
https://daneden.github.io/animate.css
2、下载完毕后引入
<link rel="stylesheet" href="animate.css">
3、引入class=“animate”同时定义transition=“bounce” 其中bounce是自己定义的
<div id="div1" v-show="bSign" transition="bounce" class="animated"> </div>
4、在Vue中定义transitions
window.onload=function () {
var vm = new Vue({
data: {
bSign:true
},
methods: {
toggle(){
this.bSign=!this.bSign
}
},
transitions:{//定义所有的动画
bounce:{
enterClass: 'zoomInLeft', //zoomInLeft与zoomOutRight是animate定义的类
leaveClass: 'zoomOutRight'
}
}
}).$mount('#app');
}
十二、vue组件
定义一个组件：
1、全局组件
var Aaa=Vue.extend({
template：‘XXX'
})
Vue.component('名称',Aaa)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function () { var Aaa = Vue.extend({
template: '<h3>我是标题三</h3>'
}) Vue.component('aaa',Aaa);
var vm = new Vue({
}).$mount('#app');
} </script>
</head>
<body>
<aaa></aaa>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
组件里放数据：
必须以以下形式：要求data必须以函数形式存在，同时函数必须返回一个对象也就是一个json
var Aaa=Vue.extend({
data(){
return {
}
}
})
触发事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function () {
var Aaa = Vue.extend({
data(){
return {
msg:'我是标题~~~'
};
},
methods:{
change:function () {
this.msg = 'change'
}
},
template: '<h3 @click="change">{{msg}}</h3>'
}); Vue.component('aaa',Aaa);
var vm = new Vue({
}).$mount('#app');
} </script>
</head>
<body>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
2、局部组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function () { var Aaa = Vue.extend({
data(){
return {
msg:'局部组件'
}
},
template: '<h3>{{msg}}</h3>'
}); var vm = new Vue({
components:{//局部组件
aaa: Aaa
}
}).$mount('#app');
} </script>
</head>
<body>
<aaa></aaa>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
components: {
aaa: {
data() {
return {
msg: '局部组件'
}
},
template: '<h3>{{msg}}</h3>'
}
}
}).$mount('#app');
} </script>
</head>
<body>
<aaa></aaa>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
3、模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</template>
<script src="vue.js"></script>
<script>
window.onload=function () { var vm = new Vue({
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
template:'#aaa'
}
},
}).$mount('#app');
} </script>
</body>
</html>
4、动态组件
<component :is="zujian"></component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<input type="button" @click="zujian='aaa'" value="aaa组件">
<input type="button" @click="zujian='bbb'" value="bbb组件">
<component :is="zujian"></component>
</div> <script src="vue.js"></script>
<script>
window.onload = function () { var vm = new Vue({
data:{
zujian:''
},
components:{
'aaa':{
template: '<h2>我是aaa</h2>'
},
'bbb':{
template:'<h2>我是bbb</h2>'
} } }).$mount('#app');
} </script>
</body>
</html>
5、chrome里添加vue组件
- 首先登录https://github.com/vuejs/vue-devtools
- 然后在install里选择添加chrome浏览器
- 选择安装
6、父子组件
vue默认情况下，子组件没法访问访问父组件的数据
组件数据传递：
1、子组件想获取父组件的data：
在调用子组件：
<bbb :m="my-msg"></bbb>
调用时候需要在组件中写props：['myMsg'] #如果使用了- 需要在script中写成驼峰的形式
也可以使用{}形式： props：{
myMsg：String
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<h1>1111->{{msg}}</h1>
<bbb :m="msg2" :my-msg="msg"></bbb>
</template>
<script src="vue.js"></script>
<script>
window.onload = function () { var vm = new Vue({
data:{
zujian:''
},
components:{
'aaa':{
data(){
return{
msg:'父组件数据',
msg2:'22222222'
}
},
template: '#aaa',
components:{
'bbb':{
props:{
'm':String,
'myMsg': String
},
template: '<h3>我是bbb->{{m}} {{myMsg}}</h3>'
}
}
} } }).$mount('#app');
} </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<h1>1111->{{msg}}</h1>
<bbb :m="msg2" :my-msg="msg"></bbb>
</template>
<script src="vue.js"></script>
<script>
window.onload = function () { var vm = new Vue({
data:{
zujian:''
},
components:{
'aaa':{
data(){
return{
msg:'父组件数据',
msg2:'22222222'
}
},
template: '#aaa',
components:{
'bbb':{
props:['m', 'myMsg'],
template: '<h3>我是bbb->{{m}} {{myMsg}}</h3>'
}
}
} } }).$mount('#app');
} </script>
</body>
</html>
2、父组件想获取子组件的数据：
子组件把自己的数据发送到父级 vm.$emit(事件名，数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<span>我是父集->{{msg}}</span>
<input type="button" value="按钮">
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>我是bbb组件</h3>
<input type="button" value="send" @click="send">
</template>
<script src="vue.js"></script>
<script>
window.onload = function () { var vm = new Vue({
data: {
zujian: ''
},
components: {
'aaa': {
data() {
return {
msg: '父组件数据',
msg2: '22222222'
}
},
methods:{
get(msg){
this.msg = msg
}
},
template: '#aaa',
components: {
'bbb': {
data() {
return {
a: '我是子组件数据'
}
},
methods:{
send:function () {
this.$emit('child-msg', this.a);
}
},
template: '#bbb'
}
}
} } }).$mount('#app');
} </script>
</body>
</html>
十三、slot
作用：占位用，类似于jinjia2中的{% block %}{% endblock %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style> </style> </head>
<body>
<div id="app">
<aaa>
<ul slot="ul-slot">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<ol slot="ol-slot">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ol>
</aaa>
</div>
<template id="aaa">
<slot name="ul-slot">这个是ul slot</slot>
<slot name="ol-slot">这个是ol slot</slot>
<p>模板内具体内容</p> </template> <script src="vue.js"></script>
<script>
window.onload = function () { var vm = new Vue({ components: {
'aaa': {
template: '#aaa', }
} }).$mount('#app');
} </script>
</body>
</html>
十四、vue-router
作用：根据不同url地址，出现不同的效果
1、单页路由：
View:
<li><a v-link="{path: '/home'}">主页</a></li>
展示内容：
<router-view></router-view>
组件准备
<script>
//1、准备一个根组件
var App=Vue.extend(); //2、 Home news组件都准备
var Home=Vue.extend({
template: '<h3>这是主页</h3>'
});
var News = Vue.extend({
template:'<h3>这是新闻页</h3>'
});
//3、 准备路由
var router = new VueRouter(); //4、关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5、启动路由
router.start(App, '#app')
//6、重定向到主页
router.redirect({
'/':'/home'
})
</script>
2、多页路由(路由嵌套)
主页 home
登录 home/login
注册 home/reg
新闻页 news
主要应用subRoutes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style>
.v-link-active{
font-size:20px;
color:#286090;
}
</style> </head>
<body>
<div id="app">
<ul>
<li><a v-link="{path: '/home'}">主页</a></li>
<li><a v-link="{path: '/news'}">新闻</a></li>
</ul>
<router-view></router-view>
</div>
<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path: '/home/login'}">登录</a>
<a v-link="{path: '/home/reg'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>这是新闻页</h3>
</template> <script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//1、准备一个根组件
var App=Vue.extend(); //2、 Home news组件都准备
var Home=Vue.extend({
template: '#home'
});
var News = Vue.extend({
template:'#news'
});
//3、 准备路由
var router = new VueRouter(); //4、关联
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录界面</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册界面</strong>'
} }
}
},
'news':{
component:News
}
});
//5、启动路由
router.start(App, '#app');
//6、重定向到主页
router.redirect({
'/':'/home/login'
})
</script>
</body>
</html>
3、路由的其他信息：
<!--在router里面使用$router.params参数可以获取url中的数值-->
{{$route.params|json}}
<br>
<!--当前路由路径-->
{{$route.path}}
<br>
<!--如果想获取url?后面的数据，可以使用$route.query来获取-->
{{$route.query|json}}
十六、vue-loader
webpack 模块加载器，一切都是模块
vue-loader基于webpack
.vue文件:
放置的是vue组件代码
.vue文件包含三个文件夹
1、template 里面放的html模板
2、style 里面放的是cs模块
3、script 里面放的是js代码 一般都是放的是ES6代码 然后通过babel-loader编译成ES5代码
搭建：
目录结构：
|-index.html
|-main.js 入口文件
|-App.vue vue文件
|-package.json 工程文件（项目依赖、名称、配置）
|-webpack.config.js
webpack准备工作：
备注：bower也是通过cnpm安装的，bower是前端安装工具，webpack是后端安装工具
npm install webpack
npm install webpack-dev-server
如果没有安装npm需要安装node.js，安装完毕后自动带有npm安装工具，通过npm -v查看版本
如果需要在国内快速安装webpack，需要安装淘宝的cpm
npm install cpm -g
然后通过cnpm install webpack -g来完成webpack安装
cnpm uninstall 卸载包
cnpm init 自动生成package.json文件
2、多页路由(路由嵌套)
主页 home
登录 home/login
注册 home/reg
新闻页 news
主要应用subRoutes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="animate.css">
<style>
.v-link-active{
font-size:20px;
color:#286090;
}
</style> </head>
<body>
<div id="app">
<ul>
<li><a v-link="{path: '/home'}">主页</a></li>
<li><a v-link="{path: '/news'}">新闻</a></li>
</ul>
<router-view></router-view>
</div>
<template id="home">
<h3>我是主页</h3>
<div>
<a v-link="{path: '/home/login'}">登录</a>
<a v-link="{path: '/home/reg'}">注册</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>这是新闻页</h3>
</template> <script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//1、准备一个根组件
var App=Vue.extend(); //2、 Home news组件都准备
var Home=Vue.extend({
template: '#home'
});
var News = Vue.extend({
template:'#news'
});
//3、 准备路由
var router = new VueRouter(); //4、关联
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录界面</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册界面</strong>'
} }
}
},
'news':{
component:News
}
});
//5、启动路由
router.start(App, '#app');
//6、重定向到主页
router.redirect({
'/':'/home/login'
})
</script>
</body>
</html>
3、路由的其他信息：
<!--在router里面使用$router.params参数可以获取url中的数值-->
{{$route.params|json}}
<br>
<!--当前路由路径-->
{{$route.path}}
<br>
<!--如果想获取url?后面的数据，可以使用$route.query来获取-->
{{$route.query|json}}
十五、vue-loader
webpack 模块加载器，一切都是模块
vue-loader基于webpack
.vue文件:
放置的是vue组件代码
.vue文件包含三个文件夹
1、template 里面放的html模板
2、style 里面放的是cs模块
3、script 里面放的是js代码 一般都是放的是ES6代码 然后通过babel-loader编译成ES5代码
搭建：
目录结构：
|-index.html
|-main.js 入口文件
|-App.vue vue文件（官方推荐命名法）
|-package.json 工程文件（项目依赖、名称、配置）
npm init --yes生成
|-webpack.config.js
webpack准备工作：
备注：bower也是通过cnpm安装的，bower是前端安装工具，webpack是后端安装工具
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
如果没有安装npm需要安装node.js，安装完毕后自动带有npm安装工具，通过npm -v查看版本
如果需要在国内快速安装webpack，需要安装淘宝的cpm
npm install cpm -g
然后通过cnpm install webpack -g来完成webpack安装
cnpm uninstall 卸载包
cnpm init 自动生成package.json文件
App.vue -> 变成正常代码需要vue-loader@8.XX
需要下载cnpm install vue-loader --save-dev
cnpm install vue-html-loader --save-dev
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev
cnpm install vue-hot-reload-api --save-dev #js loader
babel相关插件下载：
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最核心：vue
bower install vue
bower install vue#1.0.28 --save #必须依赖的加--save 开发依赖的加--save-dev
.vue结尾，称为组件
路由：
vue-router
配合vue-loader使用：
1、下载vue-router模块 cnpm install vue-rotuer@0.7.13 --save
2、打开main.js文件
import VueRouter from 'vue-router'
3、让Vue来使用VueRouter
也在main.js文件中
Vue.use(VueRouter)
4、配置路由
const router = new VueRouter();
//引入模块
import Home from './components/Home.vue'
import News from './components/News.vue' router.map({
'home':{
components:Home
},
'news':{
components:News
}
});
5、开启路由：
router.start(App,'#app');
注意：需要在App.vue里将template里内容放在一个div中，这个div的id为APP，这样才不会报warning错误
<template>
<div id="#app">
<h3>vue-loader + vue-router</h3>
<div>
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/news'}">新闻</a>
</div>
<router-view></router-view>
</div>
</template>
路由嵌套：
//专门配置路由规则
//引入模块
import Home from './Home.vue'
import News from './News.vue'
import Login from './Login.vue'
import Reg from './Reg.vue'
import Detail from './Detail.vue' //引入子级内容
export default {
'/home':{
component:Home,
subRoutes:{//需要将子级标签写在下面
'login':{
component:Login //子级对应的内容
},
'reg':{
component:Reg
}
}
},
'/news':{
component:News,
subRoutes:{
'detail/:id':{
component: Detail
}
}
}
}
<template>
<strong>{{$route.params|json}}</strong> <!--$route.params对应的是url的id内容 -->
{{$route.query|json}} <!--$route.query对应的是url内？后面内容-->
</template>
项目上线：
npm run build -> 本质是webpack -p 需要写在package.json中的scripts下面
{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8083",
"build":"webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"vue": "^1.0.28",
"vue-router": "^0.7.13"
}
}
十七、脚手架：
vue-cli提供一个基本的项目结构
本身集成的项目模板：
1、webpack
2、webpack-simple
3、browserify
4、browserify-simple
5、simple 基本使用流程：
1、cnpm install vue-cli -g 安装vue命令环境
验证安装ok？ vue --version
2、生成项目模板：
vue init <模板名> <本地文件夹名称>
例子： vue init simple#1.0 vue-simple-demo #simple是简单模板，1.0表示vue 1.0版本
3、进入到生成目录里面
cnpm install
4、npm run dev
wos部分：
一、partial讲解
1、静态传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-wos:val.red.border="num">
<partial name="my-div1"></partial>
<partial name="my-div2"></partial>
</div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script>
Vue.partial('my-div1','<p>my-div-1</p>');
Vue.partial('my-div2','<p>my-div-2</p>');
new Vue({
el:'#app',
data:{
num:'1'
}
})
</script>
</body>
</html>
2、动态传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-wos:val.red.border="num">
<partial :name="dongtaimoban"></partial> </div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script>
Vue.partial('my-div1','<p>my-div-1</p>');
Vue.partial('my-div2','<p>my-div-2</p>');
Vue.partial('my-div3','<p>my-div-3</p>');
new Vue({
el:'#app',
data:{
num:'1',
dongtaimoban:'my-div3'//当动态模板选择my-div3时，会渲染出第三部分内容，这个可以通过绑定v-on方法来随意更改模板的样式
}
})
</script>
</body>
</html>
二、extend
1、template
在new Vue定义中，如果定义了template，就直接调用template中内容，其他内容优先级低于template中内容，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> {{message}} </div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script> new Vue({
el:'#app',
data:{
message:'我是主构造器内容' },
template:'我是模板内容'//只会显示模板内容
})
</script>
</body>
</html>
当打开时会发现，只显示template中内容
2、set
Python学习二十八周（vue.js）的更多相关文章
- python学习 (二十八) Python的for 循环
1: for 循环可以循环如下类型: my_string = "abcabc" // 字符串类型 for c in my_string: print(c, end=' ') car ...
- 前端学习(三十八）vue（笔记）
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- Java开发学习(二十八)----拦截器（Interceptor）详细解析
一.拦截器概念 讲解拦截器的概念之前,我们先看一张图: (1)浏览器发送一个请求会先到Tomcat的web服务器 (2)Tomcat服务器接收到请求以后,会去判断请求的是静态资源还是动态资源 (3)如 ...
- Dynamic CRM 2013学习笔记（二十八）用JS动态设置字段的change事件、必填、禁用以及可见
我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置. 一.动态设 ...
- Python学习第十八篇——低耦合函数设计思想
import json 2 def greet_user(filename): 3 try: 4 with open(filename) as f_obj: 5 username = json.loa ...
- Python学习笔记第八周
目录: 一.基础概念 1.动态导入模块 2.断言机制 3.SocketServer 二.作业 FTP服务器 三.单独注明 1.类中装饰器 2.进度条 一.基础概念 1.动态导入模块 有时在编程过程中, ...
- Python学习日记(十八) 序列化模块
什么是序列? 就是每一个元素被有序的排成一列 什么是序列化? 就是将原本的列表.字典等内容转化成字符串的过程 什么时候会用到序列化? 数据存储(把数据放在文件.数据库),网络传输等 序列化的目的 1. ...
- python 学习笔记十八 django深入学习三 分页，自定义标签，权限机制
django Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...
- Python学习（十八）—— 数据库（三）
转载自http://www.cnblogs.com/linhaifeng/articles/7356064.html 一.数据操作 1.插入数据INSERT 1. 插入完整数据(顺序插入) 语法一: ...
随机推荐
- Python paramiko 修改源码实现用户命令抓取
paramiko 源码修改 paramiko主要用来实现ssh客户端.服务端链接,上一节我们说到了堡垒机,堡垒机内有一个需求是“用户行为审计”,在这里我们就可以通过修改paramiko内文件的源码来实 ...
- UI自动化（五）dom
获取标签 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // 直接获取标签 document.getEleme ...
- D6差分及树上差分
原谅我这篇博客拖了很久才写: 来到学校就和白痴一样缺了一世纪的课 上课特别懵:还有开学考枯了: 差分有列的差分,对于一段区间[l,r]进行修改,显然如果我们对于他的差分数组的l和r+1进行修改就可以了 ...
- npm 清理缓存
npm cache clean -f 有些时候npm下载资源出错,再次下载的时候可能因为之前错误的缓存造成一直下载不成功. 此时可以清一下npm的缓存,然后尝试重新下载
- Linux相关代码
Linux ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ---- ...
- Learning-Python【5】：Python数据类型（1）—— 整型、浮点型、字符串
一.整型 1.用途:记录年龄.等级.各种号码等 2.定义方式 age = 22 只能将纯数字的字符串转换成整型 3.常用操作+内置方法 赋值运算.比较运算.算数运算 该类型总结: 存一个值 不可变(可 ...
- robot framework---时间控件取值
项目中遇到日期控件定位不了,网上各种找,并没有适合我的,目前通过Javascript已解决了,再次做个记录,方便自己日后查找,如有同样问题的同学也可以有个参考! 先说明,不同的定位方式是看开发同学如何 ...
- DP入门水题集
HDU 1087 Input contains multiple test cases. Each test case is described in a line as follow:N value ...
- collection.Counter
a=['A','B','C','A','D','E','W','A','B'] b=collections.Counter(a) # 可以统计a中的各个元素出现的次数print(b)print(b[ ...
- 关于ExpressionChangedAfterItHasBeenCheckedError
最近在stackoverflow上似乎每天都有一些关于angular报错‘ExpressionChangedAfterItHasBeenCheckedError’的问题.发生这些问题通常是由于angu ...