Vue学习笔记——two：Vue常用特性

Vue常用特性

表单操作

基于Vue的表单操作

• input单行文本
  • 通过v-model双向绑定
• textarea多行文本
• select下拉多选
• radio单选框
• checkbox多选框

表单域修饰符

• number：转化为数值（默认是字符串）
• trim：去掉开始和结尾的空格
• lazy：将input事件切换为change事件

 <div id="app">
        <!-- <input type="text" name="" id="" v-model="age"> -->
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='trimc'>
        <input type="text" v-model.lazy='changet'>
        <div>{
    
    {
    
    changet}}</div>
        <input type="submit" value="点击" @click="handle">
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                age: '',
                trimc: '',
                changet: ''
            },
            methods: {
    
    
                handle(){
    
    
                    console.log(this.age);
                    console.log(this.trimc);
                    console.log(this.changet);
                }
            }
        });
    </script>

自定义指令

1. 为何需要自定义指令

   内置指令不满足需求

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

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

3. 自定义指令用法

<div id="app">
        <input type="text" v-focus>
    </div>
    <script>
        Vue.directive('focus' ,{
    
    
            inserted: function(el){
    
    
                //获取元素的焦点
                el.focus();
            }
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    },
            methods: {
    
    }
        });
    </script>

钩子函数参数

• el：指令所绑定的元素，可用来直接操作DOM
• binding：一个对象，包含：
  • name：指令名，不包括v-，前缀
  • value：指令的绑定值，
  • oldValue：指令绑定的前一个值

局部指令

添加一个额外的指令。

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

计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

computed:{
	reversedMessage: function(){
		return this.msg.split('').reverse().join('')
	}
}

计算属性与方法的区别

• 计算属性是基于它们的依赖进行缓存的
• 方法不存在缓存

<div id="app">
        <input type="text" v-model="msg" name="" id="">
        <div>{
    
    {
    
    reversed}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg:""
            },
            methods: {
    
    },
            computed:{
    
    
                reversed: function(){
    
    
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

过滤器

过滤器的作用

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

过滤器的定义

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

过滤器的使用

//upper:过滤器得名称 
<div>{
   
   {msg | upper}}</div>
<div>{
   
   {msg | upper | lower}}</div>
<div v-bind:id | formatId></div>

局部过滤器

filters:{
	capitalize: function(){}
}

<div id="app">
        <input type="text" v-model="msg">
        <div>{
    
    {
    
    msg | upper}}</div>
        <div>{
    
    {
    
    msg | upper | lower}}</div>
        <div :upp="msg | upper" >{
    
    {
    
    msg}}</div>
    </div>
    <script>
        Vue.filter('upper', function(val){
    
    
            return val.toUpperCase();
        });
        Vue.filter('lower', function(val){
    
    
            return val.toLowerCase();
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ''
            },
            methods: {
    
    },
        });
    </script>

侦听器

侦听器用于监听数据，当数据发生变化是就通知侦听器所绑定的方法

应用场景

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

（与计算属性有相似的地方）

watch: {
	//方法，val表示当前数据的最新值
	firstName: function(val){
		this.fullName = val + this.lastName;
	},
	lastName: function(val){
		this.fullName = this.firstName + val;
	}
}

案例

验证用户名是否可用

需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以用。

操作：

1、通过v-model实现数据绑定

2、需要提供提示信息

3、需要侦听器监听输入信息的变化

4、需要修改触发的事件

<div id="app">
        用户名：<input type="text" v-model.lazy="msg">
        <div>{
    
    {
    
    tip}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el: "#app",
            data: {
    
    
                msg: '',
                tip: ''
            },
            methods: {
    
    
                checkname: function (uname) {
    
    
                    //调用接口，可用定时任务模拟接口调用
                    let that = this;
                    setTimeout(function () {
    
    
                        //模拟接口调用
                        if (uname == 'admin') {
    
    
                            that.tip = '用户名已经存在'
                        }else{
    
    
                            that.tip = '可以注册'
                        }
                    },2000)
                }
            },
            watch: {
    
    
                msg: function (val) {
    
    
                    //调用后台接口验证用户名的合法性
                    this.checkname(val);
                    this.tip = "正在验证。。。"
                }
            }
        });
    </script>

侦听器

1、采用侦听器监听用户名的变化

2、调用后台接口进行验证

3、根据验证的结果调整提示信息

生命周期（生命周期钩子函数）

主要阶段

• 挂载（初始化相关属性）
  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
• 更新（元素或组件的变更操作）
  1. beforeUpdate
  2. updated
• 销毁（销毁相关属性）
  • beforeDestroy
  • destroyed

<div id="app">
        <input type="text" name="" id="" v-model="msg">
        <button @click="destroy">销毁</button>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ""
            },
            methods: {
    
    
                destroy: function(){
    
    
                    this.$destroy();
                }
            },
            beforeCreate() {
    
    
                console.log("beforeCreate...");
            },
            created() {
    
    
                console.log("create...");
            },
            beforeMount(){
    
    
                console.log("beforeMount...");
            },
            mounted(){
    
    
                console.log("mounted...");
            },
            beforeUpdate(){
    
    
                console.log("beforeUpdate...");
            },
            updated(){
    
    
                console.log("updated...");
            },
            beforeDestroy(){
    
    
                console.log("beforeDestroy...");
            },
            destroyed(){
    
    
                console.log("destroyed...");
            },
        });
    </script>

生命周期示意图

[图来自官网]

销毁就是释放一些资源

mounted：表示初始化已完成，模板已存在。

Vue实例的产生过程

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