Fork me on GitHub

VUE知识点

1、什么是vue:

vue是一个小巧、容易上手的mvvm框架,和angular类似
 vue结构为:一片html代码配合json,再new一个vue实例
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
html:
<div id='box'>
{{text}}
</div>
script:
var c = new Vue({
el:'#box', //选择器 id、class、tagName
data:{
text:'hello vue'
}
})

前端框架:
1. mvc【react】model + view + control

2. mvvm【angular、vue】model + view + viewmodel

MVVM的优点:
低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;

可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;

独立开发:开发人员可以专注与业务逻辑和数据的开发
ViewModemvvm设计人员可以专注于UI(View)的设计;

可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。

2、vue的特点:

1
2
3
不兼容低版本IE、轻(拆分成了很多模块,让用户自己选择需要的功能  vue-router、vuex、vue-resource、vue-server-renderer)、github活跃、作者是中国人所以文档对于中国程序猿更友好、渲染快
!)
可以看到angular每秒只能进行100次左右的操作,React大概在1000-2000之间,Vue在10K以上,这是因为Vue每次赋值,都直接触发了数据项的对比然后直接更新绑定DOM元素的内部文本,而不是关联模板(angular)、也没有对比虚拟DOM节点差异(react)

3、常用指令:【扩展html标签功能、属性】

a) v-model (双向数据绑定) 一般表单元素(input)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
b) v-for (循环)
[1.*版本]:
v-for='item in items'
{{item}}

v-for='(k,v) in items'
{{k}} {{v}}
另外还有:{{$index}} {{$key}}可用

[2.*版本]:
v-for='(v,k) in items'
{{v}} {{k}}

注意:v、k的顺序改变
去除了{{$index}} {{$key}}

c) v-show (显示/隐藏)
v-show='布尔值'
d) v-if (是否渲染)
v-if='布尔'

4、常用事件:(v-on:* / @*)

a)鼠标类事件【click/mouseout/mouseover/dbclick/mousedown/contextmenu/..】

1. 用法:v-on:click/@click='函数'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   2. 对象:$event

原生js:
document.getElementById('password').click=function(e){
event = e||window.event
}
vue.js:
@click='mymethod($event)'

methods:{
mymethod:function(e){
...
}
}
3. 阻止冒泡:
         a) e.cancelBubble = true;
            b) @click.stop  ☆推荐

4. 阻止默认行为:
         a) e.preventDefault();
            b) @contextmenu.prevent ☆推荐

b)键盘类事件【keydown/keyup】

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
1. 用法:v-on:keydown/@keydown='函数'

2. 对象:同鼠标类事件

3. 获取键入码:
mymothod:function(e){
e.keyCode
}

4.常用键:
【exemple】判断按下的键是回车:
a)
@keydown='mymethod($event)'

mymethod:function(e){
if(e.keyCode == 13) console.log('你按下了回车')
}

b)
keydown.13='enterfunc'

enterfunc:function(){
console.log('你按下了回车')
}

c)
keydown.enter='enterfunc'
【补充】:
@keyup/down.left
@keyup/down.right
@keyup/down.up
@keyup/down.down
....

5、常用属性:(v-bind:* / :*)

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
a)class和style:
1. :class='' v-bind:class=''
:style='' v-bind:style=''
2.
:class='[active, bluebg]'

:class='{active:isActive, bluebg:isBlue}'
data:{
isActive: true,
isBlue: false
}
3.
:class='json'
data:{
json:{active:isActive, bluebg:false},
isActive:true
}
4.
:class='[isActive ? active : "", bluebg]'
:class='[{ active: isActive }, bluebg]'
5.
:style="{'margin-left':mleft, fontSize: ftSize + 'rem'}"
data:{
mleft:'20px',
ftSize:'16'
}
b)其他属性:【width、height、src、disable、自定义属性、...】
v-bind:src='url_data' :src='url_data'

<img src='{{url_data}}'> //数据能读出来,但是会报错
<img :src='url_data'> //数据能读出来,且不会报错

6、模板:

1
2
3
4
5
{{text}}               //数据更新则模板发生变化

{{*text}} //数据只绑定一次(初始值)

{{{text}}} //HTML转义输出

7、过滤器:

1
2
3
4
5
6
7
8
9
10
11
12
13
a) 过滤器用法:
{{text| filterA}}
{{text| filterA | filterB}}
b) 示例:
{{text| capitalize}}

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
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
   1.\*版本中vue是自带系统默认的很多过滤器的,虽然不知道为什么,但是作者在2.*版本中全部取消了,让用户自己写filter,下面给出曾经自带的系统默认的过滤器,如果自己写,应该怎么写:

1. uppercase
text.toUpperCase()
2. lowercase
text.toLowerCase()
3. pluralize
filters: {
pluralize: function (value, sotval) {
if(sotval){
if (value === 0) {
return 'no' + sotval;
} else if (value === 1) {
return '1' + sotval
} else {
return value + sotval + 's'
}
}else{
return value
}
}
}
4. currency
filters: {
currency: function (price, money) {
if(money){
money + price.toFixed(2)
}else{
'$' + price.toFixed(2)
}
}
}
```
#### 8、交互(vue-resouce)
【引入vue-resouce后,会扩充vue实例对象,vue对象下挂一个$http对象】
```bash
a)get:
//获取一个普通的文本数据
this.$http.get('a.txt').then(function(res){
console.log('success');
this.data = res.data;
},function(res){
console.log('faild');
console.log(res.status);
});
-------------本文结束感谢您的阅读-------------