Vue 学习笔记 —— 常用特性 (二)

Vue 常用特性学习

  • 一、学习概览
  • 二、表单操作
      • 2.1 基于 Vue 的表单操作概览
      • 2.2 input 处理
      • 2.3 radio 单选框处理
      • 2.4 checkbox 处理
      • 2.5 select 下拉框处理
        • 2.5.1 选择一条数据
        • 2.5.2 select 选择多条数据
      • 2.6 textarea 文本框处理
      • 2.7 表单域修饰符
        • 2.7.1 number 类型
        • 2.7.2 trim 去除两边空格
        • 2.7.3 lazy 事件
  • 三、自定义命令
      • 3.1 不带参数的自定义指令
      • 3.2 带参数的自定义指令
      • 3.3 局部自定义命令
  • 四、计算属性 (computed)
      • 4.1 计算属性功能
      • 4.2 计算属性的基本使用
      • 4.3 演示效果
  • 五、侦听器 (watch)
      • 5.1 侦听器的基本使用
      • 5.2 侦听器小实例,用户验证小 demo
  • 六、过滤器(filters)
      • 6.1 过滤器的基本使用
      • 6.2 全局过滤器
      • 6.3 局部过滤器
      • 6.4 携参过滤 (小案例,时间格式化)
  • 七、Vue 生命周期讲解
      • 7.1 生命周期阶段
      • 7.2 使用场景
      • 7.3 真实案例

做一名在校大学生,我的梦想是做一名独立的开发者,具备全栈思维额能力的一名开发者,我的技术栈是 SpringBoot + Vue 学习记录来自

一、学习概览

  1. 表单操作
  2. 自定义指令
  3. 计算属性
  4. 监听器
  5. 滤器器
  6. 生命周期

二、表单操作

2.1 基于 Vue 的表单操作概览

  • input 单行文本
  • textarea 多行文本
  • select 下拉多选
  • radio 单选框
  • checkbox 复选框

2.2 input 处理

我们点击 form 表单,默认需要点击 submit 按钮就会提交,然后 action 就会跳转到相对的页面,但是我们要禁用 action 跳转,就得使用 js 来处理点击事件,后台调用 ajax 来请求后端的数据。

但是在 vue 中,可以使用 v-model 来绑定我们存储的数据,然后使用 @click 来解决点击事件

		<div id="app">
			<form action="">
				<span>姓名:span>
				<input type="text" v-model="uname" />
				
				
				<input type="submit" value="提交" @click.prevent="handleClick">
			form>
		div>
		<script src="../vue.js" type="text/javascript" charset="utf-8">script>
		<script type="text/javascript">
			// 表单操作
			var app = new Vue({
				el: "#app",
				data: {
					uname: "abc"
				},methods:{
					handleClick:function() {
						// 使用 ajax 调用后台的方法
						console.log(this.uname);
					}
				}
			})
		script>

2.3 radio 单选框处理

单选框也是通过 v-model 显示指定数据

	<div id="app">
		<span>性别:span>
		<span>
			<input type="radio" id="male" value="1" v-model="gender">
			<label for="male">label>
			<input type="radio" id="female" value="2" v-model="gender"/>
			<labe for="female">label>
		span>
		<input type="submit" value="提交" @click.prevent="handleClick">
	div>
			
	<script type="text/javascript">
		// 表单操作
		var app = new Vue({
			el: "#app",
			data: {
				gender:1 // 指定默认的 radio 的值
			},methods:{
				handleClick:function() {
					// 使用 ajax 调用后台的方法
					console.log(this.gender);
				}
			}
		})
	script>

2.4 checkbox 处理

checkbox 可以一次选择多个值,所以 checkbox 的值使用 数组来保存,数据绑定同样是使用 v-model 来完成

	<div id="app">
			<span>爱好:span>
			<input type="checkbox" id="ball" value="1" v-model="hobby">
			<label for="ball">篮球label>
			<input type="checkbox" id="sing" value="2" v-model="hobby">
			<label for="sing">唱歌label>
			<input type="checkbox" id="code" value="3" v-model="hobby">
			<label for="code">写代码label>
			<input type="submit" value="提交" @click.prevent="handleClick">
	div>
		<script type="text/javascript">
		// 表单操作
		var app = new Vue({
			el: "#app",
			data: {
				hobby:['2','3'] // 默认选中的值
			},methods:{
				handleClick:function() {
					// 使用 ajax 调用后台的方法
					console.log(this.hobby);
				}
			}
		})
	script>

2.5 select 下拉框处理

2.5.1 选择一条数据

下拉框选择一条值的时候和单选框的情况是一样的,一样使用 v-model 来绑定

		<div id="app">
			<span>专业:span>
			<select v-model="project">
				<option value="0">请选择专业..option>
				<option value="1">计算机option>
				<option value="2">软件工程option>
				<option value="3">通信工程option>
				<option value="4">物联网工程option>
			select>
			<input type="submit" value="提交" @click.prevent="handleClick">
		div>
		<script type="text/javascript">
		// 表单操作
		var app = new Vue({
			el: "#app",
			data: {
				project:3 // 选择单个内容

			},
			methods: {
				handleClick: function() {
					// 使用 ajax 调用后台的方法
					console.log(this.project);
				}
			}
		})
	script>

2.5.2 select 选择多条数据

我们在 select 中加一条属性, multiple ,然后就和 多选框的情况是一样的啦,下面就会默认选中 2 和 4的 option

	<div>
		<span>专业:span>
		<select v-model="project" multiple="multiple">
			<option value="0">请选择专业..option>
			<option value="1">计算机option>
			<option value="2">软件工程option>
			<option value="3">通信工程option>
			<option value="4">物联网工程option>
		select>
	div>
		<script type="text/javascript">
			// 表单操作
			var app = new Vue({
				el: "#app",
				data: {
					project:['2','4']
				},
				methods: {
					handleClick: function() {
						// 使用 ajax 调用后台的方法
						console.log(this.project);
					}
				}
			})
		script>

2.6 textarea 文本框处理

使用的方法和 input 是一样的,但是要注意,在 vue 中不能在 textarea 中加入内容,如果该标签被 v-model 处理,他得知最终会显示为 data 中的数据

	<div id="app">
		<span>介绍:span>
		<textarea v-model="desc">textarea>
	div>
		<script type="text/javascript">
			// 表单操作
			var app = new Vue({
				el: "#app",
				data: {
					desc:"haha"
				},
				methods: {
					handleClick: function() {
						// 使用 ajax 调用后台的方法
						console.log(this.project);
					}
				}
			})
		script>

2.7 表单域修饰符

  • number 转换为数值
  • trim:去掉开始和结尾的空格
  • lazy:将 input 事件转换为 change 事件

2.7.1 number 类型

一般情况在 JavaScript 中计算的都是 字符串拼接,如果我们要进行数值类型计算,就要使用类型转换


<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符title>
	head>
	<body>
		<div id="app">
			<div>
				<h3>numberh3>
				<input type="text" v-model="num"/>
				<button @click="calc">计算button>
			div>
		div>
		<script src="../vue.js">script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					num: ''
				},methods:{
					calc: function() {
						console.log(this.num + 12)
					}
				}
			})
		script>
	body>
html>

Vue 学习笔记 —— 常用特性 (二)_第1张图片
要计算整数,我们只需要这么做: ,将 v-model 加上 .number 属性就好了
Vue 学习笔记 —— 常用特性 (二)_第2张图片

2.7.2 trim 去除两边空格

Vue 学习笔记 —— 常用特性 (二)_第3张图片

2.7.3 lazy 事件

默认 v-model 使用的是 input 事件,我们可以在输入的内容加一个插值表达式,发现数值是和我们输入的内容一起变化的。但是我们加上 lazy 事件之后,就会变成 change 事件,简而言之,就是变成了失去焦点事件,当失去焦点了才会触发

这个 lazy 事件非常适合用于验证账户是否符合条件,这里集合 ajax 就会很简单
Vue 学习笔记 —— 常用特性 (二)_第4张图片
Vue 学习笔记 —— 常用特性 (二)_第5张图片

三、自定义命令

官网

前面用过的 v-xxx 都是vue 中的内置指令,但是内置指令不满足某些场景的使用功能,所以我们可以使用自定义组件,接下来编写一个简单的自动聚焦的方法

3.1 不带参数的自定义指令

Vue 学习笔记 —— 常用特性 (二)_第6张图片

3.2 带参数的自定义指令

根据自定义指令,改变颜色


<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令title>
	head>
	<body>
		<div id="app">
			
			<input type="text" v-color="msg" />
		div>

		<script src="../vue.js">script>
		<script>
			// 自定义指令 带参数
			Vue.directive('color',{
				bind: function(el, binding) {
					// 根据指令的参数设置背景色
					console.log(binding.value.color);
					el.style.backgroundColor = binding.value.color;
				}
			});
			var app = new Vue({
				el:"#app",
				data:{
					msg: {
						color: 'orange'
					}
				},
			})
			
		script>
	body>
html>

Vue 学习笔记 —— 常用特性 (二)_第7张图片

3.3 局部自定义命令

前面定义过的样子就相当于一个全局的自定义命令。因此有全局的定义,就有对应的局部自定义命令的定义。

我们直接在 一个 vue 实例当中定义 directives 属性即可。

因此我定义了两个方法,分别是聚焦,和颜色改变的方法


<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令title>
	head>
	<body>
		<div id="app1">
			<input type="text" v-color="msg" />
			<input type="text" v-focus />
		div>
		<script src="../vue.js">script>
		<script>
			// 局部指令  两者的作用是一样的。
			var app1 = new Vue({
				el: "#app1",
				data: {
					msg: {
						color: 'rgba(0,0,0,0.3)'
					}
				},
				// 设置局部指令
				directives: {
					color: {
						bind: function(el, binding) {
							// 根据指令的参数设置背景色
							console.log(binding.value.color);
							el.style.backgroundColor = binding.value.color;
						}
					},
					// 自动聚焦的功能
					focus: {
						inserted: function(el) {
							el.focus();
						}
					}
				}
			})
		script>
	body>
html>

在这里插入图片描述

四、计算属性 (computed)

4.1 计算属性功能

首先计算属性和方法的使用基本差不多,但是计算属性也有它独有的特点

  1. 对应比较复杂的运算逻辑,使用计算属性可以提高运行效率 (因为它还提供了缓存机制)
  2. 计算属性是依赖于 data 当中的数据
  3. 计算属性第一次计算会将结果缓存起来,第二次在运算的时候会将计算的记过直接取出来

4.2 计算属性的基本使用

下面以一个反转字符串为例,我们来看下综合运行的情况。


<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令title>
	head>
	<body>
		<div id="app">

			<div>原生字符串:{{msg}}div>
			<div>反转字符串:{{msg.split('').reverse().join('')}}div>
			<h2>计算属性测试h2>
			<div>计算属性方法实现:{{reverseMessage}}div>
			<div>计算属性方法实现:{{reverseMessage}}div>
			<div>计算属性方法实现:{{reverseMessage}}div>
			<h2>方法测试h2>
			<div>方法实现反转字符串:{{reverseMsg()}}div>
			<div>方法实现反转字符串:{{reverseMsg()}}div>
			<div>方法实现反转字符串:{{reverseMsg()}}div>
		div>

		<script src="../vue.js">script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: "Hello World"
				},
				// 计算属性使用,基于 data 中的数据变化的。抽取复杂的数据,使用计算属性是模板内更简单
				// 计算属性和 method 的区别:计算属性有缓存的,效率更高
				// 计算属性是基于他们的依赖的,依赖 data 中的数据。
				// 计算属性第一次计算之后就会把结果保存起来,第二次计算时,会直接访问结果,而不会进行运算
				methods: {
					reverseMsg: function() {
						console.log("方法执行了")
						return this.msg.split('').reverse().join('')
					}
				},
				computed: {
					reverseMessage: function() {
						console.log("计算属性执行了");
						return this.msg.split('').reverse().join('')
					}
				}
			})
		script>
	body>
html>

4.3 演示效果

我们看下两个方法分别打印了几次Vue 学习笔记 —— 常用特性 (二)_第8张图片
计算属性只打印了一次,只有第一次调用的时候才会打印。这也证明了计算属性在某方面确实性能比方法搞很多

五、侦听器 (watch)

侦听器简单的来说就是数据有变化就通知监听器所绑定的方法。

侦听器主要用来侦听属性

侦听器的关键字是 watch,使用起来和 计算属性差不多

5.1 侦听器的基本使用

接下来我们以一个用户姓 与 名 的拼接的小案例来演示侦听器的使用


<html>
	<head>
		<meta charset="utf-8">
		<title>侦听器title>
	head>
	<body>
		<div id="app">
			<div>名:div>
			<span>
				<input type="text" v-model="firstName" />
			span>
			
			<div>姓:div>
			<span>
				<input type="text" v-model="lastName" />
			span>
			<div>
				{{fullname}}
			div>
			
			
			<div>
				计算属性:{{fullName}}
			div>
		div>
		
		<script src="../vue.js">script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					firstName: 'Gorit',
					lastName: 'Smith',
					fullname: 'Gorit Smith'
				},
				computed: {
					fullName: function () {
						return this.firstName + ' ' + this.lastName;
					}
				},
				watch: {
					// 属性监听,和 data 里的属性一一对应
					firstName: function(val) {
						this.fullname = val + ' ' + this.lastName;
					},
					lastName: function(val) {
						this.fullname = this.firstName + ' ' + val;
					}
				}
			})
		script>
	body>
html>

Vue 学习笔记 —— 常用特性 (二)_第9张图片

Vue 学习笔记 —— 常用特性 (二)_第10张图片

5.2 侦听器小实例,用户验证小 demo

侦听器的使用情景一般在 ajax 验证用的比较多,接下来我们就以一个简单的用户验证为例演示 watch 的使用场景。

验证基本流程

  1. 我们使用 v-modal 实现用户的双向绑定
  2. 监听器用来监听用户输入的用户名的变化
  3. 用户输入完毕,调用后台 接口 实现验证,这里简化操作,使用 定时器模拟 ‘验证’ 的操作。
  4. 再将验证的结果返回给前台。

<html>
	<head>
		<meta charset="utf-8">
		<title>账户验证title>
	head>
	<body>
		<div id="app">
			<div>
				<span>用户名:span>
				<span>
					<input type="text" v-model="username">
				span>
				<span v-html="tip">span>
			div>
		div>
		
		<script src="../vue.js">script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					username: '',
					tip: ''
				},
				methods: {
					checkName: function(username) {
						let that = this;
						// 接口调用,但是可以使用定时任务的模仿是模拟接口调用
						setTimeout(function() {
							// 模拟接口调用, 要使用 this 获得 tip的值,但是 setTimeout 的 this 是 windows,所以需要在外面缓存一个 this
							if (username === 'admin') {
								that.tip = '账户名已经存在,请更换一个'
							} else {
								that.tip = '用户名可以使用'
							}
						},2000);
					}
				},
				watch: {
					// 监听的属性,使用函数处理
					username: function(val) {
						// 调用后台接口验证用户名的合法性
						this.checkName(val);
						// 修改提示信息
						this.tip = '正在验证...';
					}
				}
			})
		script>
	body>
html>

Vue 学习笔记 —— 常用特性 (二)_第11张图片
Vue 学习笔记 —— 常用特性 (二)_第12张图片

六、过滤器(filters)

6.1 过滤器的基本使用

首先,我们需要自定义一个过滤规则,然后在插值表达式中,加上过滤规则,就完成了过滤器的基本使用,我们将会在下面介绍过滤器的基本定义

使用场景:

  1. 插值表达式
  2. 属性绑定

过滤器的使用基本有三种方式

			<div>
				普通过滤{{msg | upper}}
			div>
			<div>
				级联操作:{{msg | lower | upper}}
			div>
			<h3> 全局属性:属性绑定 h3>
			<div :abc="msg | upper">
				测试数据
			div>

竖杠右边的就是我们定义的过滤规则

6.2 全局过滤器

我们以首字母大小转换的为例,通过过滤器,将首字母变换大写,和小写来演示全局过滤器的使用


<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器title>
	head>
	<body>
		<div id="app">
			
			<input type="text" v-model="msg" />
			<h2>全局数据h2>
			<div>
				首字母大写 {{msg | upper}}
			div>
			<div>
				首字母小写: {{msg | lower}}
			div>
			<div>
				级联操作:{{msg | lower | upper}}
			div>
			<h3> 全局属性:属性绑定 h3>
			<div :abc="msg | upper">
				测试数据
			div>
		div>
		
		<script src="../vue.js">script>
		<script>
			// 1. 自定义过滤器
			Vue.filter('upper', (val) => {
				// 过滤器首字母大写业务, 原生 js API 处理
				return val.charAt(0).toUpperCase() + val.slice(1);
			})
			Vue.filter('lower', (val) => {
				// 过滤器首字母小写业务, 原生 js API 处理
				return val.charAt(0).toLowerCase() + val.slice(1);
			})
			var app = new Vue({
				el:"#app",
				data:{
					msg: ''
				}
			})
		script>
	body>
html>

级联操作:解释一下,级联操作,会以最终的为准,我这里是首字母先转换为小写,在转换为大写,所以看到的是大写的效果。
Vue 学习笔记 —— 常用特性 (二)_第13张图片

全局属性绑定:
在这里插入图片描述

6.3 局部过滤器

局部过滤器使用的对象是 filters,同其他的对象一样,都需要将结果返回


<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器title>
	head>
	<body>
		<div id="app">
			<h3>局部指令:反转字符串h3>
			<div>
				{{msg | reversed}}
			div>
		div>
		
		<script src="../vue.js">script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					msg: ''
				},
				// 局部过滤器指令
				filters: {
					reversed: function(val) {
						return val.split('').reverse('').join('');
					}
				}
			})
		script>
	body>
html>

在这里插入图片描述

6.4 携参过滤 (小案例,时间格式化)

我们以时间格式化的案例来讲解过滤器携带参数


<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器title>
	head>
	<body>
		<div id="app">
			<div>
				带参数的过滤器:{{date | format('yyyy-MM-dd')}}
			div>
		div>
		
		<script src="../vue.js">script>
		<script>
				
			Vue.filter('format', (value, arg1) => {
				// value 就是过滤器传过来的 date,arg1 是我们自己要传入的参数(格式)
				if (arg1 == 'yyyy-MM-dd') {
					var ret = '';
					ret = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
					return ret;
				}
				return value;
			})
			var app = new Vue({
				el:"#app",
				data:{
					date: new Date()
				},
			})
		script>
	body>
html>

当然网上有比较好的方案,这里只是演示基本使用
在这里插入图片描述

七、Vue 生命周期讲解

7.1 生命周期阶段

  • 挂载(初始化相关属性)
    • beforeCreate
    • created
    • beforeMount
    • mounted
  • 更新 (元素或组件的变更操作)
    • beforeUpdate
    • updated
  • 销毁 (销毁相关属性)
    • beforeDestory
    • destroyed

7.2 使用场景

① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mountgd e|被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。销毁的时候使用 this.$destory()

7.3 真实案例

我们在开发 Vue 项目的时候,比如要加载列表数据,一般会在 created 方法里调用这个获取数据列表的方法。

你可能感兴趣的:(前端技术整合)