07.vue.js实战笔记（MVVM模式、生命周期、双向绑定、过滤器、指令与事件）

本文链接：https://blog.csdn.net/Annexiaobin/article/details/103027748

前言：

个人觉得梁灏这本《vue.js实战》对于想学好vue.js的人来说，算是一本非常不错的书了，第二次阅读，希望比第一次能更加理解，更能灵活运用，所以记录一下，算是为以后复习做准备吧。

1.MVVM模式

Model--View--ViewModel

当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然；

View和ViewModel之间通过双向绑定（data-binding）建立联系。

（jQuery思想就是直接操作DOM，随着代码增多，直接操作DOM会难以维护，而vue.js通过MVVM的模式拆分为视图和数据两部分，并将其分离，因此使用vue.js只需要关心数据即可，所以使用vue.js时一定要转换思想，操作数据比直接操作DOM省事。）

2.vue.js开发模式

vue.js是一个渐进式的JavaScript框架，可以直接通过script加载CDN文件，也可以使用vue-cli配合webpack、vuex和vue-router

//script引入CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="book in books">{{book.name}}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                books:[
                    {name:'vue.js实战'},
                    {name:'《JavaScript语言精粹》'},
                    {name:'《JavaScript高级程序设计》'}
                ]
            }
        })
    </script>
</body>
</html>

3.vue数据双向绑定

通过v-model实现数据的双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="请输入你的名字">
        <h1>你的名字：{{name}}</h1>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name:''
            }
        })
    </script>
</body>
</html>

通过构造函数Vue就可以创建一个vue的根实例：

var app = new Vue({ // 选项 })

el选项用于指定一个页面中已存在的DOM元素来挂载Vue实例，可以是HTMLElement，也可以是css选择器：

el:document.getElementById('app') 或 el:'#app'

Vue实例本身也会代理data对象里的所有属性，所以当var app = new Vue （{ data：{a:1} }），可以直接通过app.a访问a

4.vue生命周期

八大生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

说明：

1.beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用

2.created 在实例创建完成后立即被调用，完成数据观测、属性和方法的运算，初始化事件，$el属性未见

3.beforeMount 在挂载开始之前被调用，相关的render函数首次被调用，只在虚拟DOM生成HTML

4.mounted 在el被新创建的vm.$el替换，并挂载在实例上之后调用

5.beforeUpdate 在数据更新之前调用

6.update 在由于数据更改导致虚拟DOM重新渲染和打补丁之后调用

7.beforeDestroy 在实例销毁之前调用，实例仍然完全可用

8.destroyed 在实例销毁之后调用，调用后，所有的事件监听器被移除，所有子实例会被销毁，在服务端渲染器不被调用。

分阶段分析生命周期钩子函数：

（1）阶段一：创建和挂载

beforecreate ： el和data并未初始化

created ：完成了data数据的初始化 el没有

beforeMount ：完成了el和data的初始化

mounted ：完成挂载

（2）阶段二：更新

beforeupdata ：虚拟DOM中根据data变化去更新HTML

updated ：将虚拟DOM更新完成的HTML更新到页面中

（3）阶段三：销毁

beforeDestroy ：销毁之前调用

destroyed ：销毁之后调用，之后再执行命令，页面不会同步更新。

注：生命周期钩子函数里的this指向的是调用它的vue实例。

5.插值与表达式

使用双大括号{{ }}文本插值，会自动将双向绑定的数据实时显示出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{date}}</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                date:new Date()
            },
            mounted(){
                var _this = this
                this.timer = setInterval(() => {
                    _this.date = new Date()
                }, 1000);
            },
            beforeDestroy(){
                if(this.timer){
                    clearInterval(this.timer)
                }
            }
        })
    </script>
</body>
</html>

v-html 输出HTML 而不是将数据解释后的纯文本；

v-pre可跳过这个元素和它的子元素的编译过程

6.vue过滤器

在{{ }}插值的尾部添加管道符 ‘|’ ，对数据进行过滤，通过filters选项来设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{date | formatDate}}</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var padDate = function(value){
            return value < 10 ? '0' + value : value
        }
        var app = new Vue({
            el:"#app",
            data:{
                date:new Date()
            },
            filters:{
                formatDate(value){
                    var date = new Date(value)
                    var year = date.getFullYear()
                    var month = padDate(date.getMonth()+1)
                    var day = padDate(date.getDate())
                    var hours = padDate(date.getHours())
                    var minutes = padDate(date.getMinutes())
                    var seconds = padDate(padDate(date.getSeconds()))
                    // 将整理好的数据返回出去
                    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' +seconds  
                }
            },
            mounted(){
                var _this = this
                this.timer = setInterval(() => {
                    _this.date = new Date()
                }, 1000);
            },
            beforeDestroy(){
                if(this.timer){
                    clearInterval(this.timer)
                }
            }
        })
    </script>
</body>
</html>

过滤器可以串联：{{message | filterA | filterB}}；

也可以接收参数：{{message | filterA（‘arg1’，‘arg2’）}} （这里是第二和第三个参数，第一个是数据本身）

过滤器用于简单的文本转换，复杂的数据变换需要用到计算属性。