一、从HelloWorld说起
任何语言的都是从Hello World开始的，VueJs也不例外，直接上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<
script
src="https://unpkg.com/vue/dist/vue.js"></
script
>
<
div
id="demo">
{{hello}}
</
div
>
<
script
>
new Vue({
el:'#demo',
data:{hello:'hello world!'}
});
</
script
>
|
二、常用指令 v-x的使用
1.v-if/v-else 移除或插入DOM；
2.v-show 显示或隐藏DOM（相当与设置display:none;）；
3.v-model 双向数据绑定；
4.v-for 数据循环渲染；
5.v-text/v-html 标签内部插值 ex:<div v-html=’html’></div>等同于<div>{{html}}</div>，不建议使用v-html,容易导致XSS攻击；
6.v-bind 绑定更新html特性，完整语法:<a v-bind:href="url"></a>、缩写:<a :href="url"></a>；
7.v-on 事件监听器绑定，完整语法:<a v-on:click="doSomething"></a>、缩写<a @click="doSomething"></a>；
三、模板渲染
模板渲染可以使用Javascript表达式，{{number+1}}、{{ok?’yes’:’no’}}
四、计算属性 & Methods
在模板中绑定表达式是非常便利的，但在模板中放入太多的逻辑会让模板过重且难以维护。例如：
|
1
2
3
4
5
|
<
div
id="example">
{{ message.split('').reverse().join('') }}
</
div
>
|
这里就要使用计算属性了。
|
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
|
<
div
id="example">
<
p
>Original message: "{{ message }}"</
p
>
<
p
>Computed reversed message: "{{ reversedMessage }}"</
p
>
</
div
>
<
script
>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</
script
>
|
同样，使用Methods也可以达到一样的效果，代码如下：
|
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
|
<
div
id="example">
<
p
>Original message: "{{ message }}"</
p
>
<
p
>Computed reversed message: "{{ reversedMessage() }}"</
p
>
</
div
>
<
script
>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
</
script
>
|
五、过滤器
过滤器本质上就是一个函数，作用就是用户输入数据之后，进行除了返回结果。Vue.js支持任何表达式的地方添加过滤器。比如内置过滤器uppercase（字母全部转换成大写）:<span v-text=”message | uppercase”></span>。
内置过滤器列举：
1.字母操作：capitalize（首字母大写）|uppercase（全部字母转换为大写）|lowercase（全部转换为小写）。
2.限制：
a.limitBy（限制数组显示n个）ex:<div v-for=”item in items | limitBy 10 5”>第一个参数是展示条数，第二个参数是从下标5开始，也就是显示5-15条数据。
b.filterBy（过滤字符串或者函数），ex:<div v-for=”item in items | filterBy ‘hello’”>过滤字符串有hello的元素。
c.orderBy（排序）<li v-for=“user in users | orderBy ‘name’ ‘age’”>根据名称和年龄排序。
3.json过滤器，JSON.stringify()精简缩略版，把表达式转换成JSON字符串，ex:{{ data | json 4 }},缩进4个字符打印data对象。
4.currency过滤器，把数字转换为货币形式输出，ex:{{ money | currency }} 结果1234=> $1,234.00.
5.debounce过滤器，延迟执行处理器，接受的表达式必须为函数，比如监听用户输入值300毫秒之后在ajax请求，防止方法频繁被掉用，还是比较实用的，<input @keyup=”onKeyup | debounce 300”>.
6.自定义过滤器，创建全局过滤器，Vue.filter(ID,function(){...});
本文转自王磊的博客博客园博客，原文链接：http://www.cnblogs.com/vipstone/p/6242822.html，如需转载请自行联系原作者
