【vue详细笔记】常用特性（表单、自定义指令、计算属性、侦听器、过滤器、生命周期）
vue常用特性
文章目录
- vue常用特性
-
- 一、表单操作
-
- 1、基于vue的表单操作
-
- input单行文本
- audio单选框
- checkbox多选框
- select下拉选项
- textaea多行文本
- 代码示例：
- 2、表单域修饰符
-
- number转化为数值
- trim去除两边的空格
- lazy将input事件切换为change事件
- 二、自定义指令
-
- 1、自定义全局`v-focus`指令
- 2、带参数的自定义指令
- 3、局部指令
- 三、计算属性
-
- 1、计算属性用法
- 2、计算属性与方法的区别
- 四、侦听器
-
- 1、侦听器应用场景
- 2、侦听器用法
-
- 实现一个场景
- 3、侦听器应用场景实例
- 五、过滤器
-
- 1、过滤器是什么
- 2、自定义过滤器
-
- 全局过滤器
- 局部过滤器
- 3、使用方法
-
- 方式一
- 方式二
- 方式三
- 4、带参数的过滤器
- 六、生命周期
-
- 1、主要阶段
-
- 挂载(初治化相关属性)
- 更新(元素或组件的变更操作)
- 销毁(销毁相关属性)
- 更新(元素或组件的变更操作)
- 销毁(销毁相关属性)
一、表单操作
1、基于vue的表单操作
input单行文本
audio单选框
checkbox多选框
select下拉选项
如果使用多选的时候，添加一个属性multiple
textaea多行文本
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<form action="">
<div>
<span>姓名：span>
<span>
<input type="text" v-model='uname' >
span>
div>
<div>
<span>爱好：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>
span>
div>
<div>
<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'>
<label for="female">女label>
span>
div>
<div>
<span>职业：span>
<select v-model='occupation' multiple='true'>
<option value="0">请请选择职业···option>
<option value="1">教师option>
<option value="2">程序员option>
<option value="3">资深程序员option>
select>
div>
<div>
<span>个人简介：span>
<textarea v-model='desc'>textarea>
div>
<div>
<button v-on:click.prevent='handle'>提交button>
div>
form>
div>
<script type="text/javascript" src="../script/vue.min.js">script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
uname:'lisi',
gender:1,
hobby:['1'],
// occupation:2
occupation:['2','3'],
desc:'nihao'
},
methods:{
handle:function(){
// console.log(this.uname);
// console.log(this.gender);
// console.log(this.hobby);
// console.log(this.hobby.toString());
// console.log(this.occupation);
console.log(this.desc);
},
}
})
script>
body>
html>
2、表单域修饰符
number转化为数值
方便计算操作
v-model.number
<input type="text" v-model.number='age'>
<button @click='handle'>点击</button>
data: {
age: ''
},
methods:{
handle:function(){
console.log(this.age +12);
}
}
在输入框中输入一个数，那么得到的结果是他与12的和
trim去除两边的空格
v-model.trim
lazy将input事件切换为change事件
v-model.lazy
失去焦点的时候触发
二、自定义指令
内置指令不满足需求，所以我们要自定义
1、自定义全局v-focus指令
获取元素焦点
注册：
// 注册一个全局自定义指令： v-focus
Vue.directive('focus',{
// 当被绑定的元素插入到 DOM 中时
inserted:function(el){
// 获取元素焦点
el.focus()
}
})
使用：
<input type="text" v-focus>
作用：默认指针在该输入框上
2、带参数的自定义指令
改变元素背景色
注册：
//方法一：
Vue.directive('color',{
inserted:function(el,binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color);
el.style.backgroundColor = binding.value.color
}
})
//方法二
Vue.directive('color',{
bind:function(el,binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color);
el.style.backgroundColor = binding.value.color
}
})
data: {
msg:{
color: 'orange'
}
}
使用：
//方法一：
<input type="text" v-color='msg'>
//方法二：
<input type="text" v-color='{color:"orange"}'>
3、局部指令
将自定义指令设置为局部指令
directives: {
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
new Vue({
el: '#app',
data: {
},
methods:{
},
directives: {
color:{
inserted:function(el,binding){
// 根据指令的参数设置背景色
// console.log(binding.value.color);
el.style.backgroundColor = binding.value.color
}
},
}
})
三、计算属性
1、计算属性用法
表达式中的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
用法：
computed: {
reverseString: function(){
return this.msg.split('').reverse().join('')
}
}
//调用：
<div>{
{
reverseString}}</div>
2、计算属性与方法的区别
- 计算属性是基于他们的依赖进行缓存的
- 方法不存在缓存
在计算属性computed中的逻辑第一次实现的时候会缓存，为了下次使用方便，节省性能
在方法中的逻辑第一次实现的时候不会缓存，下次使用的时候还会执行
四、侦听器
1、侦听器应用场景
数据变化时执行异步或开销大的操作
2、侦听器用法
引入新的属性：watch
实现一个场景
在输入框中输入名跟姓，他们之间用空格分开，在输入名跟姓的时候在输入框下面动态改变，效果如下：
使用侦听器的方法实现：
html结构：
<div>
<span>
名：
</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>
姓：
</span>
<span>
<input type="text" v-model='LastName'>
</span>
</div>
<div>{
{
fullName}}</div>
vue：
data: {
firstName:'Jim',
LastName: 'Green',
fullName: 'Jim Green'
}
watch: {
firstName:function(val){
//val:表示变化之后的值
this.fullName = val+' '+this.LastName
},
LastName:function(val){
this.fullName = this.firstName+' '+val
}
}
使用methods方法实现：
{
{fullName()}}
data: {
firstName:'Jim',
LastName: 'Green'
}
methods:{
fullName:function(){
return this.firstName + ' ' + this.LastName
}
}
两种方法都能实现，但是我们可以看到，后者代码更简洁，其实侦听器方法能完成某些特定场景需求，而methods方法不能完成。
3、侦听器应用场景实例
实现用户名是否可用
具体案例请看《【vue案例】vue实现用户名是否可用》一文
五、过滤器
1、过滤器是什么
格式化数据，比如将字符串格式化为首字母大写，将日期格式化指定格式等
2、自定义过滤器
全局过滤器
Vue.filter('name',function(val){
})
局部过滤器
filters:{
name:function(val){
}
}
3、使用方法
方式一
{ {msg | upper}}
示例代码：
使用过滤器将 输入单词的首字母转换为大写，并更新到页面
<input type="text" v-model='msg'>
<span>{
{
msg | upper}}</span>
Vue.filter('upper',function(val){
//拿到第一个字符charAt(0)转化为大写，然后拼接上用slice截取的从第二个字符开始到结尾的字符
return val.charAt(0).toUpperCase() + val.slice(1)
})
方式二
{ {msg | upper | lower}}
示例代码：
使用过滤器将 输入单词的首字母转换为大写在转换为小写，并更新到页面
{
{msg | upper}}
{
{msg | upper |lower}}
Vue.filter('lower',function(val){
//拿到第一个字符charAt(0)转化为大写，然后拼接上用slice截取的从第二个字符开始到结尾的字符
return val.charAt(0).toLowerCase() + val.slice(1)
})
方式三
示例代码：
测试
效果图：
4、带参数的过滤器
Vue.filter('name',function(value,arg){})
使用：
例子:使用过滤器格式化日期
{
{date | format('yyyy-MM-dd')}}
Vue.filter('format',function(val,arg){
if(arg == 'yyyy-MM-dd'){
var ret = ''
ret += val.getFullYear()+'-'+(val.getMonth()+1)+'-'+val.getDate()
return ret
}
return val
})
data: {
date:new Date()
}
//输出：2020-11-1
六、生命周期
vue实例的生命周期
1、主要阶段
挂载(初治化相关属性)
-
beforeCreate
在实例初始化后，数据观测和事件配置之前被调用
-
created
在实例创建完成后被立即调用
-
beforeMount
在挂载开始之前被调用
-
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
更新(元素或组件的变更操作)
-
beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前
-
updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
销毁(销毁相关属性)
-
beforeDestroy
实例销毁之前调用
-
destroyed
实例销毁后调用
{
{msg}}
methods:{
update:function(){
this.msg = 'hello'
},
destroy:function(){
this.$destroy()//销毁特殊点
}
}
在挂载开始之前被调用
-
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
更新(元素或组件的变更操作)
-
beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前
-
updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
销毁(销毁相关属性)
-
beforeDestroy
实例销毁之前调用
-
destroyed
实例销毁后调用
{
{msg}}
methods:{
update:function(){
this.msg = 'hello'
},
destroy:function(){
this.$destroy()//销毁特殊点
}
}
ps ： 如果觉得写得不错，点个
在走吧！