Vue.js学习基础小结（二）

Vue.js学习基础小结（二）

一、表单

1、核心指令：v-model

• 单选
  • 一组单选v-model需要绑定给同一个变量！
  • 一组单选，每个单选项都需要有一个value值！
  • 某个单选项的value值和v-model绑定的变量值一致，该单选项被选中！
• 多选
  • 一组多选v-model需要绑定给同一个变量！ 变量是数组类型！
  • 一组多选，每个多选项都需要有一个value值！
  • 某个多选项的value值在v-model绑定的数组变量里面，那么该多选项将会被选中！
• 勾选
  • checkbox作为勾选！ v-model绑定给布尔值！ 不需要value！
• 下拉框
  • 对select直接绑定 v-model即可，有无value值都行，若无就直接获取option值

2、表单修饰符

• 语法

<标签 v-model.修饰符="变量" />

• 类型
  • trim 去除两端空格
  • number 变成数字
  • lazy 输入完才修改

 <div id="app">
        <input type="text" v-model.number="age">
        <input type="text" v-model.trim="info">
        <input type="text" v-model.lazy="msg">

**注意：**一个表单一般用一个对象来存储所有数据

二、自定义指令 directive

1、作用

实现自己操作DOM或者对组件进行操作，解决内置指令不满足开发需求

2、定义

• 自定义指令全局注册
• 语法：

Vue.directive(‘指令名’,{
inserted(el,binding){
el是使用该节点的DOM节点
binding.value 是指令绑定的数据
}
})

//实例：
  Vue.directive('focus', {
            inserted(el, binding) {
                el.focus();
            }
        });

• 自定义指令局部注册
• 语法：

new Vue({

​ …,

​ directives:{

​ 指令名1:{配置选项},

​ 指令名2:{配置选项}

​ }

​ })

//实例：
 var vm = new Vue({
            el: '#app',
            data: {
                reg: /^1[|3|4|5|6]\d{9}$/,
                msg: 'asdasdasdasd'
            },
            methods: {},
            directives: {
                myhtml: {
                    inserted(el, binding) {
                        el.innerHTML = binding.value
                    }
                }
            }
        });

三、计算属性 computed

1、定义：

计算属性，本质是属性，只不过需要计算（函数）得到！

2、作用：简化模板书写

对data里面的某个数据进行加工处理！ 对data里面的数据进行加工处理后赋给新变量，到模板中展示，避免直接在模板中操作数据，让模板难以维护

3、使用：

computed:{
        属性名:function(){   // 计算属性的值是一个函数，且这个函数需要有返回值！
            return 值
        }
}

// 模板里面
{{属性名}}

//实例
var vm=new Vue({
    ...
    computed: {
                rvmsg() {
                    console.log("调用了计算属性中rvmsg方法");
                    return this.msg.split('').reverse().join('');
                }
            }
})
  

4、注意点：

• 计算属性依赖的data里面的数据只要变化了，计算属性就会重新计算!
• 计算属性不允许被修改!

5、计算属性和Imethods的区别?

计算属性依赖的变量发生了变化才会重新运行计算，methods只要模板更新了，方法就会被调用!

6、计算属性和监听区别

• 作用不同，计算属性是对data数据加工处理，减少模板维护压力，监听是监听数据的变化
• 计算属性内只能有同步执行；监听里面可以存着异步处理

四、监听器 watch

1、定义

监听Vue实例或组件实例里面的数据变化！

2、语法

//浅监听 (基本数据类型)
         watch: {
             监听的变量: function(新值, 老值) {}
         }


//深监听(引用数据类型)
         watch: {
                 监听的变量: {
                     deep: true，
                     handler: function(newal) {
                     }
                    }
                }

3、案例

var vm = new Vue({
           ...
            watch: {
                num(newval, oldval) {
                    this.total = newval * this.price
                },
                person: {
                    deep: true,
                    immediate: true,
                    handler: function(newval) {
                        console.log(newval);
                        this.msg = `小明今年${newval.age}`
                    }
                }
            }
        })

五、过滤器 filter

1、含义和作用

对data立面的数据做某一类的处理（比如格式时间、保留小数位），其本质是一个工具函数！可以让我们在模板里面直接处理数据

2、语法

// 全局注册,一次一个！
Vue.filter('过滤器名1',function(val,形参){
		return 处理后的结果
})

Vue.filter('过滤器名2',function(val,形参){
		return 处理后的结果
})

// 局部注册
new Vue({
    ...,
    filters:{
       过滤器名1:function(val,形参){
          return 处理后的结果
       },
       过滤器名2:function(val,形参){
          return 处理后的结果
       }
    }
})

3、使用

{{ 变量 | 过滤器名 }}
{{ 变量 | 过滤器名(实参) }}

// 串联
{{ 变量 | 过滤器名1 | 过滤器名2 }}
{{ 变量 | 过滤器名1(实参) | 过滤器名2 }}

4、案例

<div id="app">
        {{num1 |tofix}}==== {{num1|tofix(3)}}<br> {{num1|tofix|pix}}
        <br> {{num2|pix('$')}}===={{num2|tofix(3)|pix('$')}}

    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 过滤器： 在模版里面对数据进行加工处理
        // 全局注册器
        Vue.filter("tofix", function(val, ws = "1") {
            return val.toFixed(ws)
        })
        var vm = new Vue({
            el: '#app',
            data: {
                num1: 156.5455,
                num2: 5645.56496
            },
            // 局部注册器
            filters: {
                pix: function(val, str = "￥") {
                    return str + val;
                }
            }
        })
    </script>

六、生命周期

1、定义

vue实例从产生到结束的过程！

2、发展阶段

• • 创建阶段
• • • beforeCreate 创建之前 不能操作data里面的数据，因为数据还没有初始化好！
    • created 创建之后 最先开始可以获取data里面数据的地方！ 【重要！】 可以请求数据！
• • 挂载阶段
• • • beforeMount 挂载之前
    • mounted 挂载之后 【重要！】 DOM编译完成！存在真实的DOM节点！ 请求数据！ 插件初始化！
• • 更新阶段
• • • beforeUpdate 更新之前
    • updated 更新之后 【重要！】 插件初始化！
• • 消亡阶段
• • • beforeDestroy 消亡之前 重要 【判断是否保存了！】
    • destroyed 消亡之后 重要 释放一些相关信息（定时器！等等！）