Vue入门实战教程（五）—— 控制层：方法及过滤器

最新推荐文章于 2024-07-02 16:56:38 发布
最新推荐文章于 2024-07-02 16:56:38 发布
阅读量624 收藏 5
点赞数
分类专栏： vue学习 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jcyka/article/details/106094512
版权

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

过滤器 — Vue.js

上一章 ：Vue入门实战教程（四）—— 模型层：数据

方法分类

方法分为两种，一种是实用工具方法，相当于utils, 用于通用处理，与具体业务处理逻辑无关；一种是专门处理业务逻辑的方法。

看一个vue官方教程实战（四）模型层-数据中提到的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return this.message.split('').reverse().join('')
    }  
  }
})
</script>
</body>
</html>

实用工具方法

用实用工具方法来实现上例中的message字母翻转：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>
  <!-- 不带参数实用工具方法 -->
  <p>Reversed message: "{{ reversedMessage1() }}"</p>
  <!-- 带一个参数的实用工具方法-->
  <p>Reversed message: "{{ reversedMessage2(message) }}"</p> 
</div>

<script>
var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return this.message.split('').reverse().join('')
    }  
  },
  //方法
  methods: {
	<!-- 实用工具方法, 一般有返回值 -->
	reversedMessage1: function () {
		return this.message.split('').reverse().join('')
	},
	reversedMessage2: function (message) {
		return message.split('').reverse().join('')
	}
  }
})
</script>
</body>
</html>

在模板中方法可以嵌套，比如下面的例子又定义了一个首字母大写的实用工具方法，你可以将message字母翻转后的文本再做为参数转入这个方法，使得翻转后的文本首字母变大写：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>

  <!-- 不带参数实用工具方法 -->
  <p>Reversed message: {{ reversedMessage1() }}</p>
  <!-- 带一个参数的实用工具方法-->
  <p>Reversed message: {{ reversedMessage2(message) }}</p> 
  
  <!-- 方法嵌套 -->
  <p>Reversed message: {{ capitalize(reversedMessage2(message))}}</p>
</div>

<script>
var capitalize = function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
}

var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return this.message.split('').reverse().join('')
    }  
  },
  //方法
  methods: {
	<!-- 实用工具方法, 一般有返回值 -->
	reversedMessage1: function () {
		return this.message.split('').reverse().join('')
	},
	reversedMessage2: function (message) {
		return message.split('').reverse().join('')
	},
	capitalize: function (value) {
		return capitalize(value);
	}
  }
})
</script>
</body>
</html>

业务逻辑处理方法

为了简单起见，本例业务逻辑处理方法和实用工具方法处理逻辑一致; 个人建议由事件触发的业务逻辑处理方法以"on"开头，且显示在非事件触发方法前面，形成一种规范：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>

  <!-- 逻辑处理方法 -->
  <button v-on:click="onReverseMessage">反转消息</button>
  
  <!-- 不带参数实用工具方法 -->
  <p>Reversed message: {{ reversedMessage1() }}</p>
  <!-- 带一个参数的实用工具方法-->
  <p>Reversed message: {{ reversedMessage2(message) }}</p> 
  
  <!-- 方法嵌套 -->
  <p>Reversed message: {{ capitalize(reversedMessage2(message))}}</p>
</div>

<script>
var capitalize = function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
}

var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return this.message.split('').reverse().join('')
    }  
  },
  //方法
  methods: {
    <!-- 逻辑处理方法， 直接处理数据 -->
    onReverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    },
	
	<!-- 实用工具方法, 一般有返回值 -->
	reversedMessage1: function () {
		return this.message.split('').reverse().join('')
	},
	reversedMessage2: function (message) {
		return message.split('').reverse().join('')
	},
	capitalize: function (value) {
		return capitalize(value);
	}
  }
})
</script>
</body>
</html>

过滤器

过滤器本质上就是实用工具方法，而且可以串联，也就是把前面过滤的结果作为参数再进行过滤。直接上局部注册的过滤器例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  
  计算属性:<Br/>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>

  逻辑处理方法:<Br/>
  <!-- 逻辑处理方法 -->
  <button v-on:click="onReverseMessage">反转消息</button>
  
  <Br/><Br/>实用工具方法：<Br/>
  <!-- 不带参数实用工具方法 -->
  <p>Reversed message: {{ reversedMessage1() }}</p>
  <!-- 带一个参数的实用工具方法-->
  <p>Reversed message: {{ reversedMessage2(message) }}</p> 
  <!-- 方法嵌套 -->
  <p>Reversed message: {{ capitalize(reversedMessage2(message))}}</p>
  
  过滤器：<Br/>
  <!-- 带一个参数的过滤器 -->
  <p>Reversed message: {{ message | reversedMessage22 }}</p>
  <!-- 过滤器串联 -->
  <p>Reversed message: {{ message | reversedMessage22 | capitalize}}</p>
  <!-- 带两个参数的过滤器 -->
  <p>Reversed message: {{ message | reversedMessage222(true) }}</p>
  
  
</div>

<script>
var capitalize = function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
}

var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return this.message.split('').reverse().join('')
    }  
  },
  //方法
  methods: {
    <!-- 逻辑处理方法， 直接处理数据 -->
    onReverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    },
	
	<!-- 实用工具方法, 一般有返回值 -->
	reversedMessage1: function () {
		return this.message.split('').reverse().join('')
	},
	reversedMessage2: function (message) {
		return message.split('').reverse().join('')
	},
	capitalize: function (value) {
		return capitalize(value);
	}
  },
  filters: {
	reversedMessage22: function (message) {
		return message.split('').reverse().join('')
	},
	reversedMessage222: function (message, isCapitalize) {
		var mes =  message.split('').reverse().join('')
		if(isCapitalize)
			return capitalize(mes);
		else
			return mes;
	},
	capitalize: function (value) {
		return capitalize(value);
	}
  }
})
</script>
</body>
</html>

可以看到使用过滤器确实要清晰不少，不会像方法嵌套一样，这么多括号容易出错。

过滤器还可以全局注册。我们用全局注册重写上面的例子。首先在例子所在页面目录下的js/utils目录新建vue_method_utils.js，里面放上
utils：

var reversedMessage = function (message) {
	return message.split('').reverse().join('')
}

var capitalize = function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
}

js/filter目录新建vue_method_filter.js，里面放上全局注册的过滤器：

Vue.filter('reversedMessage22', function (message) {
	return reversedMessage(message)
})

Vue.filter('reversedMessage222', function (message, isCapitalize) {
	var mes =  reversedMessage(message)
	if(isCapitalize)
		return capitalize(mes);
	else
		return mes;
})

Vue.filter('capitalize', function (value) {
	return capitalize(value);
})

最后主页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/utils/vue_method_utils.js"></script>
<script src="js/filter/vue_method_filter.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  
  计算属性:<Br/>
  <!-- 计算属性 -->
  <p>Reversed message: {{ reverseMessage }}</p>

  逻辑处理方法:<Br/>
  <!-- 逻辑处理方法 -->
  <button v-on:click="onReverseMessage">反转消息</button>
  
  <Br/><Br/>实用工具方法：<Br/>
  <!-- 不带参数实用工具方法 -->
  <p>Reversed message: {{ reversedMessage1() }}</p>
  <!-- 带一个参数的实用工具方法-->
  <p>Reversed message: {{ reversedMessage2(message) }}</p> 
  <!-- 方法嵌套 -->
  <p>Reversed message: {{ capitalize(reversedMessage2(message))}}</p>
  
  过滤器：<Br/>
  <!-- 带一个参数的过滤器 -->
  <p>Reversed message: {{ message | reversedMessage22 }}</p>
  <!-- 过滤器串联 -->
  <p>Reversed message: {{ message | reversedMessage22 | capitalize}}</p>
  <!-- 带两个参数的过滤器 -->
  <p>Reversed message: {{ message | reversedMessage222(true) }}</p>
  
  
</div>

<script>
var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  computed: {
	reverseMessage : function () {
      return reversedMessage(this.message);
    }  
  },
  //方法
  methods: {
    <!-- 逻辑处理方法， 直接处理数据 -->
    onReverseMessage: function () {
      this.message = reversedMessage(this.message);
    },
	
	<!-- 实用工具方法, 一般有返回值 -->
	reversedMessage1: function () {
		return reversedMessage(this.message);
	},
	reversedMessage2: function (message) {
		return reversedMessage(message);
	},
	capitalize: function (value) {
		return capitalize(value);
	}
  }
})
</script>
</body>
</html>

建议使用过滤器来代替计算属性和实用工具方法，更加直观，灵活且不容易出错。methods里面只保留业务处理方法。
最后精简的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/utils/vue_method_utils.js"></script>
<script src="js/filter/vue_method_filter.js"></script>
</head>

<body>
<div id="example">
  <p>Original message:{{ message }}</p>
  <!-- 逻辑处理方法 -->
  <button v-on:click="onReverseMessage">反转消息</button>
  <!-- 反转消息 -->
  <p>Reversed message: {{ message | reversedMessage22 }}</p>
  <!-- 反转消息首字母变大写 -->
  <p>Capitalize Reversed message: {{ message | reversedMessage22 | capitalize}}</p>
</div>

<script>
var vm = new Vue({
  el: '#example', 
  data: {
    message: 'hello'
  },
  //方法
  methods: {
    <!-- 逻辑处理方法， 直接处理数据 -->
    onReverseMessage: function () {
      this.message = reversedMessage(this.message);
    }
  }
})
</script>
</body>
</html>

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

下一章：Vue入门实战教程（六）—— 组件基础

厚嘴猴
关注
专栏目录
Go语言开发Web应用实战——这本书介绍了如何用Golang开发Web应用，涵盖从基础概念到实践应用等内容
AI天才研究院
07-29 1289
2019年是第四个十年科技革命的开端，也是Golang被广泛应用的一个年份。这几年，Golang的热度不断提升，在开源社区及企业内部也出现了一批拥抱Go的优秀人员。每当我听到有人宣传“Golang开发更快、更安全、更高效”，或者推荐“Go语言入门”时，都会觉得不可思议。Golang作为新一代的编程语言，非常适合用来开发复杂的分布式系统，但同时它也非常简单易懂，可以轻松地学习掌握。在本书中，你将从零开始构建一个完整的基于Golang+Vue.js+MySQL Web应用程序。
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4396
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
多种方式实现控制器层
蜗牛程序员
01-11 730
1.Servlet: 继承javax.servlet.http.HttpServlet; 重写doPost,doGet方法; 2.xml配置bean public class XAction{ @RequestMapping(value = "/X.do",method = RequestMethod.POST) public ModelAndView X(HttpServletR
JS使用控制层方法传递参数
weixin_33898876的博客
08-04 372
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue核心特征
weixin_45740510的博客
02-10 928
VueVue核心特征1、数据驱动（MVVM）2、组件化3、指令系统 Vue核心特征 1、数据驱动（MVVM） Model : 模型层，负责处理业务逻辑以及和服务端进行交互。 View : 视图层，负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面。 ViewModel : 视图模型层，用来连接Model 和 View，是Model 和 View之间的通信桥梁。 1、mvc 和 mvvm 的关系？ 其实m(Model 层)和v(View 层) 是相同的，不同的是c(控制层)和vm(v
VUE--入门学习
望山。
08-25 361
一.VUE学习 1.VUE入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门案例</title> </head> <body> <!-- 基本语法 1.导入JS类库. 2.指定VUE渲染区域 标签体 3.实例化VUE对象 4.数据取值 --> <div id="
细谈 vue - transition 篇
weixin_34150830的博客
06-02 7464
本篇文章是细谈 vue 系列的第三篇，这篇文章主要会介绍一下 vue 的内置组件 transition 。前几篇链接如下 《细谈 vue 核心- vdom 篇》 《细谈 vue - slot 篇》 开始之前，我们先看下官方对 transition 的定义 自动嗅探目标元素是否使用了 CSS 过渡或动画，如果使用，会在合适的时机添加/移除 CSS 过渡 class。 如果过渡组件设置了...
【Vue】黑马Vue入门到高级实战汇总
码农印象
01-23 2024
目录v-text v-cloak计算属性computed计算属性双向绑定监听器watchClass与Style绑定v-bind条件渲染v-ifv-if 与 v-show 比较列表渲染 v-for事件处理 v-on事件修饰符按键修饰符表单数据双向绑定v-model过渡&动画效果过滤效果案例动画效果案例自定义指令MVVM设计模式绑定语法v-bindv-showv-ifv-show 和 v-if 对比 观察者模式v-for数组中响应式的方法keyv-html绑定HTML片段内容防止用户短暂看到{{}}v-
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3925
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Vue 笔记【视频参考尚硅谷】持续更新2022/3/22...
记录成长的小博客
03-19 1191
Vue 第 1 章：Vue 核心 视频学习地址： https://www.bilibili.com/video/BV1Zy4y1K7SH 学习配套资源（源代码、静态页面等）： 链接：https://pan.baidu.com/s/1521h1ATCK-ccmyrCNb2HVA 提取码：612x 1.1. Vue 简介 1.1.1. 官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 1.1.2. 介绍与描述 1. 动态构建用
SpringMVC学习：控制层（Controller）基于注解详解
给时光以文明
07-02 1万+
文章目录一、方法的返回值二、SpringMVC各类注解详解(一) @Controller(二) @RequestMapping1.基本用法2.URL的多种写法2.1 Ant风格（较少使用）2.2 Rest风格2.3 固定格式 在SpringMVC中， 基于注解的控制层（Controller），客户端发送来的请求Request中的URL就映射到Controller层的一个方法，因此，在Controller层中，大多数注解都是基于这个方法的。下面就从应用于方法的各种注解进行学习。 一、方法的返回值 方法
深入理解 Vue 中的 Transition 组件
最新发布
My_wife_QBL的博客
07-02 2197
</p>data() {return {show: true
vue 内置组件transition（进入&离开过渡）的使用
逆风优雅的博客
06-10 8411
Vue 提供了 的封装组件，在以下情况下，可以给任何元素和组件添加进入/离开过渡。transitionProps：事件：用法： 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 案例一：css过渡： 效果图： 案例二：css动画 效果图： 除了使用vue默认的动画，v-enter,v-leave-to这种，我们还可以自定义类名。 transtion也可以通过内置的钩子实现，过渡和动画效果：
真实地图shp_R语言绘制河南不同地区每十万人中有多少人罹患食管癌的图片（地图数据可视化）...
weixin_39593340的博客
11-26 466
写在最前面：数据是我根据经验随手敲的，不代表真实数据！！！数据是我根据经验随手敲的，不代表真实数据！！！数据是我根据经验随手敲的，不代表真实数据！！！=========================================gut杂志在2015年发表了一篇关于食管癌组织学类型的综述，其中用到了衣服这样的图片：我决定模仿一下，用R语言画了一幅河南省的地图。首先是地图数据的下载，来源于GADM...
controller层阶解读（有涉及vue的认识）
qq_40749830的博客
04-12 1840
一、解读controller 层 1、CommonController 解读 @Slf4j --》 简化代码，用于日志输出。 @Slf4j是用作日志输出的，一般会在项目每个类的开头加入该注解，如果不写下面这段代码，并且想用log 。 private final Logger logger = LoggerFactory.getLogger(当前类名.class); 就可以用@Slf4来代替;...
java中的控制层（controller）数据访问层（dao）业务逻辑层的（service）
热门推荐
幽蓝的博客
09-27 5万+
控制层（controller）的职能是负责读取视图表现层的数据，控制用户的输入，并调用业务层的方法； 业务层（service）需要根据系统的实际业务需求进行逻辑代码的编写，有些业务逻辑需要通过与数据库交互的，则业务逻辑层需要调用数据访问层的相关方法实现与数据库的交互，对于一些不需要与数据库进行交互的，则直接编写业务代码，将执行结果反馈给控制层即可； 数据访问层（dao）只负责与数据库的数据交互...
vue数据层思路_vue响应式原理（数据双向绑定的原理）
weixin_42253260的博客
01-30 472
概念渐进式框架每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有，难以避免)所以Angular是带有比较强的排它性的，如果你的应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值