mounted
页面元素挂载完毕之后就会去调用,可以在这里做一些原始数据的拷贝
new Vue({
el:'#box',
data:{
content:''
},
methods:{
sortArray(type){
if(type==1){
this.jsonArray.sort(function(a,b){
return a.age-b.age;
});
}else if(type==2){
this.jsonArray.sort(function(a,b){
return b.age-a.age;
});
}else if(type==3){
//再把备份的数组中的元素再拷回原数组
this.jsonArray=this.copyArry.slice(0);
}
}
},
mounted() {
//页面元素挂载完毕之后就会调用
//alert("调用了")
//把原数组拷贝一份
this.copyArry=this.jsonArray.slice(0);
}
});
Vue事件绑定
<h1 :class="{aClass:a,bClass:b}" v-on:mouseenter="change()" @mouseleave="change2()">这是一行标题</h1>
防止事件的冒泡和默认行为
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
简写就是stop和prevent,绑定点击事件如下:
<div id="" style="width: 200px;height: 200px;background: #42B983;" @click.stop="show1()">
键盘事件
你要监听哪个键就把键码写上,特殊的键可以写单词
<input type="text" id="" value="" @keypress.97="show2()"/>
<input type="text" id="" value="" @keypress.enter="show2()"/>
表单中的数据收集
<form action="#" method="get" @submit.prevent="mySubmit()">
用户名:<input type="text" name="username" v-model="username" required="required"/><br>
密码:<input type="password" name="password" v-model="password" required="required"/><br>
性别:<input type="radio" name="sex" value="1" v-model="sex"/> 男 :<input type="radio" name="sex" value="0" v-model="sex"/> 女
<br>
爱好:<input type="checkbox" name="hobby" value="run" v-model="hobby"/> 跑步
<input type="checkbox" name="hobby" value="game" v-model="hobby"/> 玩游戏
<input type="checkbox" name="hobby" value="sing" v-model="hobby"/> 唱歌
<br>
学历:
<!-- <select name="xl" v-model="xl">
<option :value="obj.id" v-for="obj in selectData">{{obj.name}}</option>
</select> -->
<select name="xl" v-model="xl">
<option value="1">小学</option>
<option value="2">中学</option>
<option value="3">大学</option>
</select>
<textarea rows="" cols="" v-model="desc">
</textarea>
<input type="submit" value="提交"/>
</form>
看代码就可以看出它跟JS差不多,几个不一样的我写一下:
required 这是表单上自带的属性,以前没写过,表明该输入框必须填写,不能空
Vue对象的生命周期
这是Vue文档里的生命周期图,从被创造到毁灭,毁灭需要调用方法this.$destroy();
ref和v-cloak
ref
var v=this.$refs.content;
alert(v.innerText);
<h1 id="myh1" ref="content">一行文本</h1>
痛过給标签设置ref属性也可以访问到绑定的元素对象
v-cloak
它设计的用途是为了在网络不好或加载数据过大时避免出现闪烁,提高用户体验,一般与display配合,让其在实例准备完毕后v-cloak标签自动消失后再显示出来。
过渡动画
<style type="text/css">
.myclass {
height: 200px;
width: 200px;
background: blue;
}
/* 动画进入的途中 */
.guodu-enter-active {
transition: opacity, background 2s;
}
/*动画离开的途中*/
.guodu-leave-active {
transition: opacity 2s;
}
/*动画开始进入-----默认样式*/
.guodu-enter {
/* 进入从看不见到看见(默认) */
}
/*默认样式------动画离开完成*/
.guodu-leave-to {
}
</style>
相互搭配
<style type="text/css">
.myclass {
height: 200px;
width: 200px;
background: blue;
}
/* 动画进入的途中 */
.guodu-enter-active {
transition: opacity, background 2s;
}
/*动画离开的途中*/
.guodu-leave-active {
transition: opacity 2s;
animation: bounce-in .5s;
}
/*动画开始进入-----默认样式*/
.guodu-enter {
opacity: 0;
/* 进入从看不见到看见(默认) */
background: red;
animation: bounce-in .5s;
}
/*默认样式------动画离开完成*/
.guodu-leave-to { /* 从看的见(默认)---到不见 */
background: yellow;
opacity: 0;
}
@keyframes bounce-in {
0% {
transform: translateX(100px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(100px);
}
}
</style>
定义局部组件
components:{
son:{
data:function(){ //组件的数据data 必须是一个函数 通过return返回一个对象,对象里面写子组件的数据
return {
ziMsg:'我是子组件的数据'
}
},
/* 子组件的模板 里面放html标签 */
template:'<h1 @click=show()>{{ziMsg}}</h1>',
methods:{
show(){
alert("abc");
}
}
}
}
<body>
<div id="box">
<!-- 子组件 -->
<!--使用组件 -->
<son></son>
</div>
</body>
像上面一样,当定义好后,页面就会将son标签的位置渲染好。
过滤器
时间过滤器
首先可以引入一个时间的包装类moment.js,然后再定义一个局部过滤器
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:'#box',
data:{
mydate:new Date()
},
//定义局部过滤器
filters:{ //对原来的展示数据,进行过滤器的处理后,会展示新结果
formatDate:function(value,format="YYYY年MM月DD日 HH:mm:ss"){
// alert(value);
//return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
return moment(value).format(format);
return
}
}
})
}
</script>
然后在写入主程序中
<body>
<div id="box">
//第一种方法
<!-- 年月日时分秒 -->
<h1>{{mydate|formatDate}}</h1>
<!-- 年月日 -->
//第二种方法
<h1>{{mydate|formatDate('YYYY年MM月DD日')}}</h1>
<!-- 时分秒 -->
<h1>{{mydate|formatDate('HH:mm:ss')}}</h1>
</div>
如上所示,过滤器有两种写法,第一种是将格式直接跟在后面,第二种则是写到过滤的函数中直接调用
全局过滤器
<script type="text/javascript">
window.onload=function(){
//全局过滤器:多个vue实例都可以使用
Vue.filter('daxie',function(value){
return value.toUpperCase();
})
//定义局部过滤器:只有自己的vue实例能用
filters:{ //对原来的展示数据,进行过滤器的处理后,会展示新结果
formatDate:function(value,format="YYYY年MM月DD日 HH:mm:ss"){
// alert(value);
//return moment(value).format('YYYY年MM月DD日 HH:mm:ss');
return moment(value).format(format);
}`在这里插入代码片`
}
});
//再创建一个Vue实例
new Vue({
el:'#box2',
data:{
msg2:'aaaaaa',
dateTime:new Date()
}
})
}
</script>
全局过滤器就是将过滤器写在Vue函数外面
自定义指令
看代码一目了然
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
//自定义全局指令 ,多个Vue对象,可以公用
Vue.directive('text-toupercase2',function (el,mydata) {
el.innerText=mydata.value.toUpperCase();
})
new Vue({
el: '#box',
data: {
'msg': 'Hello'
},
directives:{ //局部自定义指令,只能该vue对象使用
//自定义指令的名称要用单引号引起来
//el 自定义指令所在的标签的对象
//mydata 包含指令相关数据的容器对象
'text-toupercase':function (el,mydata) {
el.innerText=mydata.value.toUpperCase();
}
}
})
}
</script>
<script type="text/javascript">
"".
</script>
</head>
<body>
<div id="box">
<h1 v-text="msg"></h1>
<!-- 必须以 v- 开头 -->
<h1 v-text-toupercase="msg"></h1>
<h1 v-text-toupercase2="msg"></h1>
</div>
</body>