VueJs—常用操作手册
一、从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:
等同于6.v-bind 绑定更新html特性，完整语法:、缩写:；
三、模板渲染
模板渲染可以使用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（字母全部转换成大写）:。
内置过滤器列举：
1.字母操作：capitalize（首字母大写）|uppercase（全部字母转换为大写）|lowercase（全部转换为小写）。
2.限制：
a.limitBy（限制数组显示n个）ex:
b.filterBy（过滤字符串或者函数），ex:
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(){…});
忘是亡心i
柔情只为你懂
左手的ㄟ右手
向右看齐
怼烎@
红太狼
浅浅的花香味﹌
Bertha 。
太过爱你忘了你带给我的痛
还没有评论，来说两句吧...