-
Notifications
You must be signed in to change notification settings - Fork 0
/
reviewVue.html
222 lines (221 loc) · 7.24 KB
/
reviewVue.html
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js 官网例子</title>
<style type="text/css">
body>div{margin: 10px 0;}
.bg1{background-color: #F5E79E;}
.bg2{background-color: #F5F5F5;}
.bg3{background-color: #FFFFFF;}
.color0{color: #222222;}
.color1,.tips{color: #FF0000;}
.hidden{display: none;}
/*****Css过渡*****/
/* 过渡 必需 */
.bounce-transition { display: inline-block;}
/* .bounce-enter 定义进入的开始状态 */
.bounce-enter{ animation: bounce-in .5s; -webkit-animation: bounce-in .5s;}
/* .bounce-leave 定义离开的结束状态 */
.bounce-leave{ animation: bounce-out .5s; -webkit-animation: bounce-out .5s;}
@keyframes bounce-in{
from{transform: scale(0);}
50%{transform: scale(1.5);}
to{transform: scale(1);}
}
@-webkit-keyframes bounce-in{
from{transform: scale(0);}
50%{transform: scale(1.5);}
to{transform: scale(1);}
}
@keyframes bounce-out{
from{transform: scale(1);}
50%{transform: scale(1.5);}
to{transform: scale(0);}
}
@-webkit-keyframes bounce-out{
from{transform: scale(1);}
50%{transform: scale(1.5);}
to{transform: scale(0);}
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body id="demo" class="bg1" v-bind:class="{'bg2':showBg2==1}">
<h2>使用vue 1.0和 vue 2.0 结合学习</h2>
<p class="color{{index}}">start!</p>
<p>{{msg1}}</p><!--1.文本插值-->
<p>{{msg2}}</p>
<input type="text" value="" v-model="msg2" /><!--2.双向绑定-->
<div>
<div v-for="list in downList" v-html="list.name" :data-id="list.gameid"></div>
</div><!--3.渲染列表-->
<p v-html="msg3"></p>
<button @click="reverseMsg">click me</button> <!--4.处理用户输入-->
<div>
<input type="text" v-model="downInfor" v-on:keyup.enter="addDownInfoData" />
<ul>
<li v-for="list in downInfoList" :data-id="list.id">
<span v-html="list.text"></span>
<button v-on:click="removeDownInfoData($event)">X</button>
<p class="hidden">v-on指令缩写为 @ ,用于监听DOM事件;</p>
<p class="hidden">v-bind指令缩写为 : ,用于响应的更新HTML特性(attribute);</p>
<p class="hidden">$event是一个特殊变量,可以访问原生事件</p>
</li>
</ul>
</div><!--5.综合-->
<hr />
<h4>2017/5/9 update</h4>
<div>
<p>{{msg4 | capitalize}}</p>
</div><!--6.vue1内置过滤器函数(首字母大写)-->
<div>
计算 a={{num1}} , b={{num2}}
<p class="hidden">声明了一个计算属性 num2 ,提供的函数 getNum2 将用作 $vm.num2 的 getter ;</p>
<p class="hidden">this.num2 的值永远取决于 this.num1 的值</p>
<p class="hidden">计算属性默认只是getter,需要的时候也提供一个setter</p>
</div><!--7.计算属性基础例子-->
<div>
<span v-bind:style="{color:colors,'font-size':fontSize+'px'}">绑定内联样式1</span>
<br />
<span v-bind:style="activeStyle">绑定内联样式2</span>
<p class="hidden">body背景色动态切换,使用对象语法{key:value},v-bind:class="{'bg2':showBg2==1}"</p>
</div><!--8.html class 与 style绑定 -->
<div>
<template v-if="showTemp">
<p>标题!</p>
<p>段落1</p>
<p>段落2</p>
</template>
</div><!--9.条件渲染-->
<div>
<div v-for="list in downList" :data-id="list.gameid">{{$index}}.{{list.name}}</div>
<div v-for="(i,list) in downList" :data-id="list.gameid">{{i}}.{{list.name}}</div>
<p class="hidden">使用v-for指令基于一个数组渲染一个列表;</p>
<p class="hidden">格式为: list in sourceList ,其中list为当前数组的别名,sourceList为原数组;</p>
<p class="hidden">特殊变量$index:当前数组元素的索引值,从0开始;也可以为索引指定一个别名,在v-for="(index,list) in downList"</p>
</div><!--10.列表渲染v-for -->
<hr />
<h4>2017/5/15 update</h4>
<div>
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新;
被包装的方法有:push() pop() shift() unshift() splice() sort() reverse()
</div><!--11.数组变异方法(修改原始数组)-->
<div>
<a v-on:click.stop="doThis">阻止单击事件冒泡</a>
<form v-on:submit.prevent="onSubmit">
提交事件不再重载页面
</form>
<p>vue 1.0.16 增加 .capture和 .self</p>
<a v-on:click.capture="doThis">添加事件侦听器时使用 capture 模式</a>
<span v-on:click.self="doThis">只当事件在该元素本身(而不是子元素)触发时触发回调</span>
</div><!--12.事件修饰符-->
<div>
<p class="hidden">5.综合 例子中有使用到按键修饰符keyup.enter</p>
<input type="hidden" v-model="downInfor" v-on:keyup.13="addDownInfoData" />
或者是:
<input type="hidden" v-model="downInfor" v-on:keyup.enter="addDownInfoData" />
缩写为:
<input type="hidden" v-model="downInfor" @keyup.enter="addDownInfoData" />
其中 enter为别名,是vue提供,对应keyCode为13; <br />
vue 1.0.17+ 提供自定义按键别名: <br />
Vue.directive('on').keyCodes.f1=112; <br />
使用: @keyup.f1
</div><!--13.按键修饰符-->
<div>
<span v-show="showCss" transition="bounce">观察我的变化</span> <br />
<button @click="toggleClass">点击切换</button>
</div><!--14.css过渡-->
<div>
<p transition="fade">js过渡效果,不牵扯css规则!</p>
</div><!--15.javascript过渡-->
</body>
<script type="text/javascript">
Vue.config.debug=false;
Vue.transition('fade',{
css:false,
enter:function(el,done){
$(el).css('opacity',0).animate({opacity:1},1000,done)
},
enterCancelled:function(el){
$(el).stop();
},
leave:function(el,done){
$(el).animate({opacity:0},1000,done);
},
leaveCancelled:function(el){
$(el).stop();
}
})
var defaultFilter={
id:0,
text:'全部'
};
var $vm=new Vue({
el:'#demo',
data:{
index:1,
msg1:'no.1 msg!',
msg2:'',
msg3:'no.3 msg yeah.',
msg4:'van',
downInfor:'',
downList:[
{id:0,name:'world',gameid:'1205'},
{id:1,name:'world2',gameid:'1206'},
{id:2,name:'world3',gameid:'1207'},
],
downInfoList:[
{id:0,text:'default text.'},
],
num1:1,
num2:0,
showBg2:true,
colors:'#3298ff',
fontSize:16,
activeStyle:{
color:'#3298ff',
fontSize:'16px',
},
showTemp:1,
showCss:1,
},
computed:{
getNum2:function(){
return this.num2=this.num1+1;
}
},
methods:{
reverseMsg:function(){
this.msg3=this.msg3.split('').reverse().join('');
},
addDownInfoData:function(){
var t=this.downInfor.trim();
if(t){
this.downInfoList.push({text:t});
this.downInfor='';
}
},
removeDownInfoData:function(index){
this.downInfoList.splice(index,1);
},
toggleClass:function(){
this.showCss = this.showCss==1?0:1;
},
},
created:function(){
console.log("this.msg2:"+this.msg1); //this.msg2:no.1 msg!
console.log("计算属性this.num2:"+this.getNum2); //计算属性this.num2:2
this.downInfoList.push({id:01,text:'test 01'});
this.downInfoList.unshift({id:00,text:'test 00'});
},
})
window.onload=function(){
$vm.num1=2;
console.log("计算属性$vm.num2:"+$vm.getNum2); //计算属性$vm.num2:3
$vm.downInfoList.shift();//移除数组的第一个元素并返回该元素,并改变原数组的长度。
$vm.downInfoList.splice(2,0,{id:02,text:'test 02'});
console.log($vm.downInfoList.length);
}
</script>
</html>