vuejs java_vuejs深入浅出—基础篇

一、从HelloWorld说起

任何语言的都是从Hello World开始的，VueJs也不例外，直接上代码：

{{hello}}

new Vue({

el:'#demo',

data:{hello:'hello world!'}

});

二、常用指令 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:

{{html}}

，不建议使用v-html,容易导致XSS攻击；

6.v-bind 绑定更新html特性，完整语法:、缩写:；

7.v-on 事件监听器绑定，完整语法:、缩写；

三、模板渲染

模板渲染可以使用Javascript表达式，{{number+1}}、{{ok?’yes’:’no’}}

四、计算属性 & Methods

在模板中绑定表达式是非常便利的，但在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}

这里就要使用计算属性了。

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

},

computed: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

});

同样，使用Methods也可以达到一样的效果，代码如下：

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage() }}"

var vm = new Vue({

el: '#example',

data: {

message: 'Hello'

},

methods: {

reversedMessage: function () {

return this.message.split('').reverse().join('')

}

}

});

五、过滤器

过滤器本质上就是一个函数，作用就是用户输入数据之后，进行除了返回结果。Vue.js支持任何表达式的地方添加过滤器。比如内置过滤器uppercase(字母全部转换成大写):。

内置过滤器列举：

1.字母操作：capitalize(首字母大写)|uppercase(全部字母转换为大写)|lowercase(全部转换为小写)。

2.限制：

a.limitBy(限制数组显示n个)ex:

第一个参数是展示条数，第二个参数是从下标5开始，也就是显示5-15条数据。

b.filterBy(过滤字符串或者函数)，ex:

过滤字符串有hello的元素。

c.orderBy(排序)

根据名称和年龄排序。

3.json过滤器，JSON.stringify()精简缩略版，把表达式转换成JSON字符串，ex:{{ data | json 4 }},缩进4个字符打印data对象。

4.currency过滤器，把数字转换为货币形式输出，ex:{{ money | currency }} 结果1234=> $1,234.00.

5.debounce过滤器，延迟执行处理器，接受的表达式必须为函数，比如监听用户输入值300毫秒之后在ajax请求，防止方法频繁被掉用，还是比较实用的，.

6.自定义过滤器，创建全局过滤器，Vue.filter(ID,function(){...});