Vue基础二
作者：互联网
系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
表单操作
1.input单行文本
2.textarea多行文本
3.select下拉对选
4.radio单选框
5.checkbox多选框
6.表单修饰符
- number 转化为数值
- trim去掉开头和结尾的空格
- lazy将input事件切换为change事件 change事件每次失去焦点的时候会触发 input输入内容的时候就会触发
<input v-model.number="age" type="number">
自定义指令
内置指令不满足需求
自定义指令语法规则（获取元素焦点）
Vue.directive('focus',{
inserted:function(el) {
//获取元素的焦点
el.focus();
}
})
自定义指令用法
<input type="text" v-focus>
带参数的自定义指令（改变元素背景色）
Vue.directive('color'),{
inserted:function(el,binding) {
el.style.backgroundColor=binding.value.color;
}
}
指令的用法
<input type="text" v-color='{color:"orange"}'>
局部指令 只能在本组件中使用
directives: [
focus: {
//指令的定义
inserted:function(el) {
el.focus()
}
}
}
计算属性
表达式的计算逻辑可能比较复杂，使用模板内容更加简洁
计算属性的用法
<div>{{reversedMessage}}</div>
computed: {
reversedMessage: function() {
return this.msg.split('').reverse().join('')
}
}
计算属性和方法的区别
- 计算属性是基于他们的依赖进行缓存的
- 方法不存在缓存
过滤器
过滤器作用为格式化数据，比如该字符串格式化为首字母大写，将日期格式化为指定的格式等
-自定义过滤器
Vue.filter('过滤器名称',function(value){
//过滤器业务逻辑
})
过滤器的使用
<div>{{mag|upper}}</div>
<div>{{mag|upper|lower}}</div>
<div v-bind:id="id|formatId"></div>
局部过滤器
filters: {
capitalize:function(){
}
}
侦听器
侦听器
数据一旦发生变化就通知侦听器所绑定的方法
侦听器的应用场景
数据变化时执行异步或者开销较大的操作
侦听器的用法
watch: {
firstName: function(val){
this.fullName=val+''+this.lastName;
},
lastName：function(val){
this.fullName=this.fristName+''+val;
}
}
数据的变化主要是通过val的变化 来改变的
案例分析
验证用户名是否存在
1、通过v-model实现数据的绑定
2、需要提供提示信息
3、需要提供侦听器监听输入信息的变化
4、需要改变触发的事件
侦听器侦听用户名的变化
调用后台接口进行验证
根据验证的结果调整提示信息
生命周期
主要阶段
- 挂载（初始化相关属性）
beforeCreate
create
beforeMount
mounted
- 更新(元素或者是组件的变更操作)
beforeUpdate
updated
-销毁(销毁相关属性)
beforeDestroy
destroyed
-
-
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
数组先关的API
变异方法（修改原有数据）
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
替换数组(生成新的数组)
- filter()
- concat()
- slice()
数组的响应式数据变化
- Vue.set(vm.itms,indexOflten,newValue)
- Vm.$set(vm.items,indexOfltem,newValue)Vue实例对象调用
参数一表示要处理的数组名称
参数二表示要处理的参数索引
参数三表示要处理的数组的值
标签：function,el,Vue,自定义,基础,侦听器,指令,过滤器 来源： https://blog.csdn.net/weixin_46513544/article/details/119978346