表单修饰符、自定义指令、计算属性、侦听器、过滤器、生命周期_综合

文章目录

Vue 的常用特性
一、表单基本操作
- 表单修饰符
二、自定义指令
- Vue.directive 注册全局指令
- 自定义指令局部指令 directives
三、计算属性 computed
- 计算属性与方法的区别
四、侦听器 watch
- 注册表单验证案例
五、过滤器
- 过滤器中传递参数
六、生命周期

Vue 的常用特性

一、表单基本操作

通过v-model

获取单选框中的值
获取复选框中的值
复选框 checkbox 这种的组合时 data 中的值我们要定义成数组否则无法实现多选
获取下拉框和文本框中的值

表单修饰符

.number 转换为数值
注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串
.trim 自动过滤用户输入的首尾空白字符
只能去掉首尾的不能去除中间的空格
.lazy 将input事件切换成change事件
.lazy 修饰符延迟了同步更新属性值的时机，即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
在失去焦点或者按下回车键时才更新

二、自定义指令

Vue.directive 注册全局指令

注意点：

在自定义指令中如果以驼峰命名的方式定如
Vue.directive('focusA',function(){})
在HTML中使用的时候只能通过 v-focus-a 来使用
el 为绑定的 DOM 元素
binding 为自定义的函数形参，通过 自定义属性 传递过来的值存在 binding.value 里面

<input type="text" v-a='msg'>
<script>Vue.directive('a', {
      inserted: function (el, binding) {
      el.style.backgroundColor = binding.value.qwe}}) </script>

自定义指令局部指令 directives

局部指令，需要定义在 directives 的选项，用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准

let vm = new Vue({
    el: '#box',data: {
    msg: {
    }},methods: {
    },directives: {
    color: {
    inserted: function (el, binding) {
    el.style.backgroundColor = binding.value.qwe}}}
})

三、计算属性 computed

使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的，就是基于 data 的数据来计算的，data 数据改变，计算结果也改变
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

<body><div id="box"><div>{
   {msg}}</div><div>{
   {msg.split('').reverse().join('')}}</div><div>{
   {reverseString}}</div></div><script src="./vue.js"></script><script>let vm = new Vue({
      el: '#box',data: {
      msg: '远近渔'},computed: {
      // reverseString 这个是我们自己定义的名字reverseString: function () {
      // 当data 中的值改变的时候// reverseString 会自动发生计算// 这里一定要有return// 否则调用 reverseString 的时候无法拿到结果return this.msg.split('').reverse().join('')}},methods: {
      },directives: {
      }})</script>
</body>

计算属性与方法的区别

计算属性 computed 是基于他们的依赖进行缓存的

当多次调用 reverseString 的时候只要 data 里面的 num 值不改变他会把第一次计算的结果直接返回
直到 data 中的 num 值改变，计算属性才会重新发生计算

方法 methods 不存在缓存

调用 methods 中的方法的时候，他每次会重新调用

四、侦听器 watch

使用 watch 来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是 data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

<body><div id="box"><div><span>名：</span><span><input type="text" v-model='aName'></span></div><div><span>姓：</span><span><input type="text" v-model='bName'></span></div><div>{
   {abName}}</div></div><script type="text/javascript" src="./vue.js"></script><script type="text/javascript">let vm = new Vue({
      el: '#box',data: {
      aName: '远近渔',bName: '渔渔子',abName: '远近渔 渔渔子'},methods: {
      },computed: {
      },watch: {
      // val 是 aName 的最新值aName: function (val) {
      this.abName = `${
        val} ${
        this.bName}`},bName: function (val) {
      this.abName = `${
        this.aName} ${
        val}`}},directives: {
      }})</script>
</body>

注册表单验证案例

<body><div id="box"><div><span>用户名：</span><span><input type="text" name="" id="" v-model.lazy='a'></span><span>{
   {b}}</span></div></div><script type="text/javascript" src="./vue.js"></script><script type="text/javascript">let vm = new Vue({
      el: '#box',data: {
      a: '',b: ''},methods: {
      checkName: function (a) {
      let that = this // 调用接口，但是可以使用定时任务的方式模拟接口调用setTimeout(function () {
      if(a == 'admin') {
      that.b = '存在'} else {
      that.b = '111'}}, 2000)}},computed: {
      },watch: {
      a: function (val) {
      // 调用后台接口验证this.checkName(val)this.b = 'loading......'}},directives: {
      }})</script>
</body>

五、过滤器

格式化数据，比如将字符串格式化为首字母大写，格式化日期
过滤器可以用在两个地方：双花括号插值和v-bind表达式
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
支持级联操作
过滤器不改变 data，只是改变渲染的结果，并返回过滤后的版本

Vue.filter ('过滤器名称', function () {
    // 过滤器业务逻辑
})

<body><div id="box"><input type="text" v-model='msg'><div v-cloak>{
   {msg | a | b}}</div><div>{
   {msg | ccc}}</div><div :abc='msg | a'></div></div><script src="./vue.js"></script><script>// 自定义过滤器Vue.filter('a', function (val) {
      return `${
        val.charAt(0).toUpperCase()}${
        val.slice(1)}`});Vue.filter('b', function (val) {
      return `${
        val.charAt(0).toLowerCase()}${
        val.slice(1)}`});let vm = new Vue({
      el: '#box',data: {
      msg: ''},// 全局过滤器filters: {
      ccc: function (val) {
      return `${
        val.charAt(0).toUpperCase()}${
        val.slice(1)}`}},methods: {
      },computed: {
      },watch: {
      },directives: {
      }})</script>
</body>

过滤器中传递参数

第一个形参接受的是元素的值，后面才接收传参

<body><div id="box"><div>{
   {date | a('yyyy-MM-dd')}}</div></div><script src="./vue.js"></script><script>Vue.filter('a', function (val, arg) {
      if (arg == 'yyyy-MM-dd') {
      var ret = ''ret += `${
        val.getFullYear()}-${
        val.getMonth()+1}-${
        val.getDate()}`return ret}})let vm = new Vue({
      el: '#box',data: {
      date: new Date()},filters: {
      },methods: {
      },computed: {
      },watch: {
      },directives: {
      }})</script>
</body>

六、生命周期

就是 Vue 实例从创建到销毁的过程
这些过程中会伴随着一些函数的 自调用，我们称这些函数为 钩子函数

挂载	初始化相关属性
beforeCreate
created
beforeMount
mounted	一旦此函数触发就代表初始化完成了

更新	元素或组件的变更操作
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前，页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，页面上数据已经替换成最新的

销毁	销毁相关属性
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用