Vue常见特性

最新推荐文章于 2022-04-27 13:52:28 发布

泊一

最新推荐文章于 2022-04-27 13:52:28 发布

阅读量768

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/w_D_lufei/article/details/103232404

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue常见特性

1. Vue常见特性概览

表单操作
自定义指令
计算属性
侦听器
过滤器
生命周期

2. 表单操作

2.1 基于Vue的表单操作

Input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框

<!-- 
		1、 两个单选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个单选框必须要有value属性  且value 值不能一样 
		3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
		gender 的值就是选中的值，我们只需要实时监控他的值就可以了
	-->
<body>
  <div id="app">
    <form action="http://www.example.com">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </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>
        <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>
      </div>
      <div>
        <span>职业：</span>
        <!-- multiple 多选 -->
        <select v-model='occupation' multiple>
          <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>
        <!-- prevent 是阻止表单提交时 默认刷新的行为 -->
        <input type="submit" value="提交" @click.prevent='handle'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'lisi',
        gender: 2,
        // 默认会让当前的 value 值为 2 的单选框选中
        hobby: ['2', '3'],
        occupation: ['2', '3'],
        desc: 'nihao'
      },
      methods: {
        handle: function () {
          console.log(this.uname)
          console.log(this.gender)
          console.log(this.hobby.toString())
         // toString()把数组转化为字符串
          console.log(this.occupation)
          console.log(this.desc)
        }
      }
    });
  </script>
</body>

2.2 表单域修饰符

number：转化为数值

<input v-model.number="age" type="number">
trim：去掉开始和结尾的空格，不能去除中间的空格

<input v-model.trim="msg">
lazy : 将input事件切换为change事件(失去焦点后触发)

<input v-model.lazy="msg" >

<body>
  <div id="app">
    <input type="number" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>
    <button @click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表单域修饰符
    */
    var vm = new Vue({
      el: '#app',
      data: {
        age: '',
        info: '',
        msg: ''
      },
      methods: {
        handle: function () {
          console.log(this.age + 13)
          console.log(this.info)
          console.log(this.msg)
        }
      }
    });
  </script>
</body>

3 自定义指令

3.1 为何需要自定义指令？

内置指令不满足需求

3.2 自定义指令的语法规则（获取元素焦点）

//全局指令
Vue.directive('focus', {
	inserted: function(el) {
	// 获取元素的焦点
	el.focus();
	}
})

3.3 自定义指令用法

基本用法
<input type="text" v-focus>
带参数的自定义指令（改变元素背景色）

Vue.directive('color', {
	//inserted 是内置的钩子函数
	//el 代表绑定的元素 binding代表传入的参数
	inserted: function(el, binding) {
	el.style.backgroundColor = binding.value.color;
	}
})

//调用要用v-加上自定义的指令名
<input type="text" v-color='{color:"orange"}'>

3.4 局部指令——只能在当前组件使用

directives: {
	focus: {
	// 指令的定义
	inserted: function (el) {
		el.focus()
	}
 }
}

<body>
  <div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
      directives: {
        color: {
          bind: function (el, binding) {
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function (el) {
            el.focus();
            // 自动聚焦到输入框里
          }
        }
      }
    });
  </script>
</body>

4 计算属性 computed

4.1 为何需要计算属性？

模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的，当数据没有变化时，就从缓存拿值，不会重新计算
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

4.2 计算属性的用法

<div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
		直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>  //5050
    <div>{{reverseString}}</div>  //5050
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div> //oahiN
    <div>{{reverseMessage()}}</div> //oahiN
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          //字符串没有reverse(翻转方法)，先通过split转化为数组，然后用reverse,最后用join转化为字符串
          return this.msg.split('').reverse().join('');
        }
      },
      //computed  属性 定义 和 data 以及 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果    
          return total;
        }
      }
    });
  </script>

4.3 计算属性与方法的区别

计算属性是基于它们的响应式依赖进行缓存的,当计算的值没有发生改变时，就会从缓存中提取，不会再计算一次,与data里的数据绑定，当这里的数据改变时，才会重新调用函数进行计算
方法不存在缓存，会重复计算

5 侦听器 watch

5.1 侦听器的应用场景

数据变化时执行异步或开销较大的操作

5.2 侦听器的用法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      <span>用户名：</span>
      <span>
        <!-- .lazy 表单域修饰符 当输入框失去焦点时触发-->
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*      
      侦听器
      1、采用侦听器监听用户名的变化
      2、调用后台接口进行验证
      3、根据验证的结果调整提示信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },
      methods: {
        checkName: function (uname) {
          // 调用接口，但是可以使用定时任务的方式模拟接口调用
          var that = this;
          setTimeout(function () {
            // 模拟接口调用
            if (uname == 'admin') {
              that.tip = '用户名已经存在，请更换一个';
            } else {
              that.tip = '用户名可以使用';
            }
          }, 2000);
        }
      },
      watch: {
        uname: function (val) {
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });

  </script>
</body>

</html>

6 过滤器

6.1 过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

6.2 过滤器的基本使用

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。

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

过滤器可以用在两个地方：双花括号插值和v-bind表达式。

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
支持级联操作
过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本
全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

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

<div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
	  然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
 	-->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>

<script type="text/javascript">
   //  lower  为全局过滤器     
   Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
       //filters  属性 定义 和 data 以及 methods 平级 
       //  定义filters 中的过滤器为局部过滤器 
      filters: {
        //   upper  自定义的过滤器名字 
        //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
        upper: function(val) {
         //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

6.3 过滤器中的传递参数

 <div id="box">
        <!--
			filterA 被定义为接收三个参数的过滤器函数。
  			其中 message 的值作为第一个参数，
			普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
		-->
        {{ message | filterA('arg1', 'arg2') }}
    </div>
    <script>
        // 在过滤器中 第一个参数 对应的是  管道符前面的数据   n  此时对应 message
        // 第2个参数  a 对应 实参  arg1 字符串
        // 第3个参数  b 对应 实参  arg2 字符串
        Vue.filter('filterA',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        
        new Vue({
            el:"#box",
            data:{
                message: "哈哈哈"
            }
        })

    </script>

7. 生命周期

事物从出生到死亡的过程
Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

7.1 主要阶段

挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
更新（元素或组件的变更操作）
① beforeUpdate
② updated
销毁（销毁相关属性）
① beforeDestroy
② destroyed

7.2 实例的产生过程

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

在这里插入图片描述

8. 数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

`push()`	往数组最后面添加一个元素，成功返回当前数组的长度
`pop()`	删除数组的最后一个元素，成功返回删除元素的值
`shift()`	删除数组的第一个元素，成功返回删除元素的值
`unshift()`	往数组最前面添加一个元素，成功返回当前数组的长度
`splice()`	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值
`sort()`	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
`reverse()`	reverse() 将数组倒序，成功返回倒序后的数组

9. 替换数组

不会改变原始数组，但总是返回一个新数组

filter	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

泊一

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue常见特性

文章目录Vue常见特性Vue常见特性概览表单操作1. 基于Vue的表单操作2. 表单域修饰符自定义指令1. 为何需要自定义指令？2. 自定义指令的语法规则（获取元素焦点）3. 自定义指令用法4. 局部指令——只能在当前组件使用计算属性1. 为何需要计算属性？2. 计算属性的用法Vue常见特性Vue常见特性概览表单操作自定义指令计算属性侦听器过滤器生命周期表单操作1. 基于V...
复制链接

扫一扫