vuejs java_vuejs深入浅出—基础篇

朱雀 2022-11-05 12:56 414阅读 0赞

一、从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()\{...\});

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vuejs】927- 深入浅出 Vue Mixin

![872fb16de6ef0b3a09c9f586174b89c5.png][] > 来自：flyyang's Blog > > 链接：https://flyyang.m

╰+攻爆jí腚メ/ 2023年01月12日 15:54/ 0 赞/ 172 阅读

相关 vuejs java_vuejs深入浅出—基础篇

一、从HelloWorld说起任何语言的都是从Hello World开始的，VueJs也不例外，直接上代码： \{ \{hello\}\} new Vue(\{ el

朱雀/ 2022年11月05日 12:56/ 0 赞/ 415 阅读

相关【Vuejs】887- 深入浅出 Vue Mixin

![1745288bca3b2c242f8b84e72c766ead.png][] 作者：flyyang https://flyyang.me/2019/01/24/vue

淩亂°似流年/ 2022年11月05日 05:17/ 0 赞/ 210 阅读

相关深入浅出RxJava（一：基础篇）

[RxJava][]正在Android开发者中变的越来越流行。唯一的问题就是上手不容易，尤其是大部分人之前都是使用命令式编程语言。但是一旦你弄明白了，你就会发现RxJava真是

秒速五厘米/ 2022年09月26日 03:03/ 0 赞/ 195 阅读

相关深入浅出 RPC - 深入篇

《深入篇》我们主要围绕 RPC 的功能目标和实现考量去展开，一个基本的 RPC 框架应该提供什么功能，满足什么要求以及如何去实现它？ RPC 功能目标 RPC

男娘i/ 2022年08月10日 08:58/ 0 赞/ 226 阅读

相关深入浅出 RPC - 深入篇

《深入篇》我们主要围绕 RPC 的功能目标和实现考量去展开，一个基本的 RPC 框架应该提供什么功能，满足什么要求以及如何去实现它？ RPC 功能目标 RPC 的主要功

落日映苍穹つ/ 2022年08月08日 13:51/ 0 赞/ 257 阅读

相关深入浅出 RPC - 深入篇

《深入篇》我们主要围绕 RPC 的功能目标和实现考量去展开，一个基本的 RPC 框架应该提供什么功能，满足什么要求以及如何去实现它？ RPC 功能目标 RPC 的主要功能

向右看齐/ 2022年06月02日 06:40/ 0 赞/ 233 阅读

相关深入浅出mysql（一）：基础篇

安装与配置 1.Windows平台下安装 1.方式一：noinstall 解压即可使用 2.方式二：图形化安装 2.Linux平台下载以

清疚/ 2022年05月18日 05:40/ 0 赞/ 213 阅读

相关深入浅出 RPC - 深入篇

Java的小本家 2019-03-23 14:31:02 RPC 功能目标 RPC 的主要功能目标是让构建分布式计算（应用）更容易，在提供强大的远程调用能力时不损失本地调用

你的名字/ 2022年02月20日 01:15/ 0 赞/ 306 阅读

相关 6、vueJs基础知识06

vue动画　　transition 之前1.0版本是以属性的形式展示的　　　　<p transition="fade"></p> 　　　　.fade-transi

淡淡的烟草味﹌/ 2021年11月11日 03:28/ 0 赞/ 317 阅读