Vue.js 介绍

Vue 是主流的 渐进式 JavaScript 框架 ，所谓的渐进式就是说：

可以和传统的网站开发架构融合在一起，例如：可以简单地把它当作一个类似 JQuery 库来使用
也可以使用 Vue 全家桶框架来开发大型的单页面应用程序

使用 vue.js 主要有以下优势：

vue.js 体积小、编码简洁优雅、运行效率高、用户体验好
无 DOM 操作，它能提高网站应用程序的开发效率

vue.js 的主要使用场景如下：

一般是需要开发单页面应用程序（SPA）的时候去用
单页面应用程序
因为 Vue 是渐进式的，Vue 其实可以融入到不同的项目中，即插即用

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把接触过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

<body>
    <div id="box">
    </div>
    <script>
    //    var obj = {
    //        myname:"kerwin"
    //    }

        var obj = {}
        var obox = document.getElementById("box")
        Object.defineProperty(obj,"myname",{
            get(){
                console.log('被访问了')
                return obox.innerHTML
            },  
            set(value){
                console.log("修改",value)
                obox.innerHTML = value
            }
        })
    </script>
</body>

Object.defineProperty 有以下缺点。

1、无法监听 es6 的 Set、Map 变化；

2、无法监听 Class 类型的数据；

3、属性的新加或者删除也无法监听；

4、数组元素的增加和删除也无法监听。

Vue 的使用方式

CDN 方式

对于制作原型或学习，可以使用下面的方式使用最新版本的 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

对于生产环境，推荐链接到一个明确的版本好和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js/"></script>

也可以将这些内容下载到本地，然后引入本地文件的方式进行调用：

<script src="../lib/vue.js"></script>

npm 方式

在本地创建 vue-learn 的目录，并使用 VS Code 打开
使用命令窗口打开项目目录，然后使用下面的命令下载 vue

$ npm install vue@2.6.10

在该目录下创建 helloworld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    message: ''
                }
            },
        })
    </script>
</body>
</html>

new Vue() 实例化 vue 应用程序

el 选项：元素 element 的缩写，指定被 Vue 管理的 DOM 节点入口（值为选择器），必须是一个普通的 HTML 标签节点（一般是 div，不能为 html 或 body）

data 选项：指定初始化数据，在 Vue 所管理的 DOM 节点下，可通过模板语法来进行使用

标签体显示数据：{{xxxx}}

表单元素双向数据绑定：v-model

分析 MVVM 模型

MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格：

Model：模型，数据对象（data 选项当中的）
View：视图，模板页面（用于渲染数据）
ViewModel：视图模型，其实本质上就是 Vue 实例

它主要是通过数据来驱动视图，把需要改变视图的数据初始化到 Vue 中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。Vue 是声明式编程，关于声明式编程和命令式编程：

声明式编程：按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作 DOM 元素
命令式编程：类似 JQuery 这样的，需要手动去操作 DOM 才能实现对应功能

Vue Devtools 插件安装

Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目，具体步骤如下：

使用谷歌浏览器访问：chrome://extensions，然后右上角打开开发者模式

将插件直接拖到页面的空白处，浏览器会自动安装

安装成功后的效果如下

当访问 Vue 开发的页面时，按 F12 可以看到 Vue 标签页

Vue 实例生命周期

每个 Vue 实例在被创建的时候都要经过一系列的初始化过程。生命周期分为三大阶段：初始化显示、更新显示和销毁 Vue 实例

初始化阶段的钩子函数：
- beforeCreate()：实例创建前，数据和模板均未获取到
- created()：实例创建后，最早可访问到 data 数据，但模板未获取到
- beforeMount()：数据挂载前，模板已获取到，但数据未挂载到模板上
- mounted()：数据挂载后，数据已挂载到模板中
更新阶段的钩子函数：
- beforeUpdate()：模板更新前，data 改变后，更新数据模板前调用
- updated()：模板更新后，将 data 渲染到数据模板中
销毁阶段的钩子函数：
- beforeDestory()：实例销毁前
- destroyed()：实例销毁后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app"> 
        <h1> {{ message }} </h1> 
    </div> 
    <script> 
        var vm = new Vue({
            el: '#app',
            data: {
                message: '梦学谷' 
            },
            beforeCreate() {
                console.log('beforeCreate()', this.$el, this.$data) 
            },
            created() { // 已初始化 data 数据，但数据未挂载到模板中
                console.log('created()', this.$el, this.$data) 
            },
            beforeMount() { // 模板已获取到，但是数据未挂载到模板上
                console.log('beforeMount()', this.$el, this.$data)
            },
            mounted() { // 编译完成 ，数据已挂载到模板中
                console.log('mounted()', this.$el, this.$data) 
            },
            beforeUpdate() { // 当 data 改变后，去更新模板中的数据前调用 // 注意：浏览器问题，需使用 this.$el.innerHTML 获取更新前的 Dom 模板数据
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data) 
            },
            updated() { // data 被 Vue 渲染之后的 Dom 数据模板
                console.log('updated()', this.$el.innerHTML, this.$data) 
            },
            beforeDestroy() { // 销毁实例前调用
                console.log('beforeDestroy()')
            },
            destroyed() {
                // 销毁实例后调用
                console.log('created()');
            }
        }).$mount('#app') //  // 实例中未使用 el 选项，可使用$mount()手动挂载 Dom
        
        // vm.$destroy() 销毁 Vue 实例
    </script>
</body>
</html>

02-VueJS 入门简介