【Vue系列二】—Vue学习历程的知识分享！

前言

本篇讲述了Vue中常见的表单操作，自定义指令，计算属性和监听属性，过滤器，Vue生命周期等重要知识

一、常见表单操作

input

<input type="text" v-model="uname">

radio

<li>
    <span>性别：</span>
    <input type="radio" id="male" value="1" v-model="gender">
    <label for="male">男</label>
    <input type="radio" id="fenale" value="2" v-model="gender">
    <label for="fenale">女</label>
</li>

checkbox

<li>
    <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>
</li>




const vm = new Vue({
    el: '#app',
    data: {
        uname: 'ifer',
        gender: '1',
        hobby: ['1']
    },
    methods: {
        handle() {
            console.log(this.hobby);
        }
    },
});

select

<li>
    <span>职业：</span>
    <select name="" v-model="occupation" multiple>
        <option value="0">请选择职业</option>
        <option value="1">教师</option>
        <option value="2">软件工程师</option>
        <option value="3">律师</option>
    </select>
</li>

textarea

<li>
    <span>简介：</span>
    <textarea v-model="desc" name="" id="" cols="30" rows="10"></textarea>
</li>

二、自定义指令

自动获取焦点

<div id="app">
    <!-- 使用指令 -->
    <input type="text" v-focus>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    // 定义指令
    Vue.directive('focus', {
        inserted: function(el) {
            // el 表示指令所绑定的元素
            el.focus();
        }
    });
    var vm = new Vue({
        el: '#app',
    });
</script>

带参数的自定义指令

指令后面的名字会直接当变量处理，会去 data 中查找，除非明确指定具体的数据，例如对象或字符串

<input type="text" v-color='{color: "red"}'>

<input type="text" v-color="'red'">



<div id="app">
    <!-- 使用指令 -->
    <input type="text" v-color="msg">
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    // 定义指令
    Vue.directive('color', {
        bind: function(el, binding) {
            // el 表示指令所绑定的元素，binding.value 代表 msg 这个对象的值
            el.style.backgroundColor = binding.value.color;
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: {
                color: "red"
            }
        }
    });
</script>

局部指令

只在本组件中有效

三、计算属性computed

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

计算属性是基于他们的依赖（data 中的数据）进行缓存的，方法不存在缓存

<div id="app">
    <p>{{reverseString}}</p>
    <p>{{reverseString}}</p>
    <p>{{reverseMsg()}}</p>
    <p>{{reverseMsg()}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        computed: {
            reverseString: function() {
                // 只会执行一次，节省性能
                console.log('computed');
                return this.msg.split('').reverse().join('');
            }
        },
        methods: {
            reverseMsg: function() {
                // 每调用依次就会执行一次
                console.log('methods');
                return this.msg.split('').reverse().join('');
            }
        },
    });
</script>

四、监听属性watch

• 数据一旦发生变化就通知监听器所绑定方法

• 应用场景：比较适合数据变化时执行异步或开销大的操作

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <div>{{fullName}}</div>
    <div>{{fullName2}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Yang',
            lastName: 'Kang',
            fullName: 'Yang Kang'
        },
        computed: {
            // 计算属性的方式
            fullName2: function() {
                return this.firstName + ' ' + this.lastName;
            }
        },
        watch: {
            // 侦听器的方式
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName;
            },
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

五、过滤器

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

先定义在使用

<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg | upper}}</p>
    <!-- 首字母先变大写再变小写 -->
    <p>{{msg | upper | lower}}</p>
    // 先获取到 msg 的内容再使用 upper 过滤器
    <div :abc="msg|upper">测试数据</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    Vue.filter('upper', function(val) {
        return val.charAt(0).toUpperCase() + val.slice(1);
    });
    Vue.filter('lower', function(val) {
        return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        }
    });
</script>

带参数的过滤器

value 是要处理的数据，第二个参数才参与对应关系

<div id="app">
    <p>{{date | format('yyyy-MM-dd')}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
    // value 是要处理的数据，第二个参数才参与对应关系
    Vue.filter('format', function(value, arg) {
        if(arg === 'yyyy-MM-dd') {
            var res = '';
            res += value.getFullYear() + '-' + (value.getMonth()+1) + '-' + value.getDate();
            return res;
        }
        return value;
    });
    var vm = new Vue({
        el: '#app',
        data: {
            date: new Date()
        }
    });
</script>

六、生命周期

创建阶段

beforecreate

实例初始化之后，数据观测和事件配置之前被调用，这个阶段实例的data和methods是读不到的

created

实例创建之后，渲染之前，this.$el 属性目前不可见，$el 是 Vue 实例关联的 DOM 元素

挂载阶段

beforemount

在挂载开始之前被调用，this.$el 可用，但是并不能获取渲染后的内容

mounted

元素已经渲染到页面上了，可以获取渲染后的内容

更新阶段

beforeupdate

数据更新时调用，发生在虚拟 DOM 打补丁之前

updated

由于数据更新导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子

销毁阶段

beforedestory

实例销毁之前调用

destoryed

实例销毁后调用

Vue.nextTick

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<body>
    <div>
        <div>{{msg}}</div>
        <button @click="change">change</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // Vue 依赖数据来驱动视图更新
        // Vue 实现的响应式并不是数据变化后视图立即变化，该更新的过程是异步的
        // 由于 created 钩子函数还未对 DOM 进行任何渲染，所以在 created 钩子函数中进行的 DOM 操作，需要通过 this.$nextTick 或 Vue.nextTick 来完成
        const vm = new Vue({
            el: '#app',
            name: 'App',
            data: {
                msg: 'Hello World'
            },
            created() {
                this.$nextTick(() => {
                    console.log(this.$refs.msg);
                });
            },
            methods: {
                change() {
                    this.msg = 'xxx';
                    // 注意 console.log 输出的不是顺时状态，而是对象的最后状态，可以通过断点或 JSON.stringify 查看瞬时状态
                    console.log(this.$refs.msg);
                    debugger;
                    this.$nextTick(() => {
                        console.log(this.$refs.msg.innerHTML);
                    });
                }
            },
        });
    </script>
</body>

</html>

最后，给大家留个小案例实现一下，用本篇内容实现图书馆图书管理案例（图书的增删改查功能用所学知识实现）

留言区留言或者私信我可以获取案例代码~

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！