提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、VUE简介
总结

前言

学习背景

由于作者之前虽然上手了Vue项目，但实际上并没有系统学习过Vue相关基础知识，对其中的原理理解得不够深刻，因此作者目前在看尚硅谷有关Vue的系列教程，并通过博客的形式将所学习的知识点进行记录，便于他人快速上手学习和自身复习~

一、VUE简介

vue：一套用于构建用户界面的渐进式框架。

特点：

采用组件化模式，提高代码复用率，且让代码更好维护；
声明式编码，让编码人员无需直接操作DOM，提高开发效率；
使用虚拟DOM+Diff算法，尽量复用DOM节点

1.1 搭建Vue开发环境

打开Vue官网，安装部分我们可以看到有开发版本和生产版本两种：开发版本适合在开发过程中使用，包含完整的警告和调试模式；生产版本适合在项目完成上线时使用，较为轻量级。
在这里插入图片描述
下载下来，分别是vue.js和vue.min.js文件：

可以通过下面代码使用vue：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <script src="vuejs/vue.js"></script>
</head>

<body>

</body>

</html>

但通常会出现以上报错：
在这里插入图片描述

错误一是因为没有下载Vue Devtools拓展工具，可以去谷歌商店下载安装拓展程序；
错误二是因为提醒你使用的是开发版本，当项目上线时使用生产版本。

输入vue.config可以看到以下全局配置信息：
在这里插入图片描述

productionTip属性为boolean类型，设置为false以阻止vue在启动时生成生产提示。
添加以下代码，错误二提示即可消失：

    <script>
        Vue.config.productionTip = false;
    </script>

1.2 初始Vue

以下是一个使用vue的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1> Hello {
   
   {name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
      
      
            el: '#root', // 指定当前Vue示例为哪个容器服务，值通常为CSS选择器字符串
            data: {
      
           // data中用于存储数据
                name:'lalala'
            }
        })
    </script>
</body>
</html>

注意事项：

想让vue工作，就必须先创建一个实例，且要传入一个配置对象
root容器中的代码依然复合html规范，只不过混入特殊的Vue语法
root容器中的代码称为vue模板；
Vue实例和容器是一一对应的；
真实开发中只有一个Vue实例，并且配合着组件一起使用
{ {XXX}}里面的XXX要写js表达式，且XXX可以自动读取到data中所有属性
一旦data中的数据发生改变，那么页面中用到数据的地方会自动更新

效果图如下：
在这里插入图片描述

1.3 Vue模板语法

Vue模板语法有2大类：

插值语法
功能：用于解析标签体内容
写法：{ {XXX}}，XXX是js表达式，且可以直接读取到data中的所有属性
指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
举例：v-bind:herf=“XXX” 或简写为 :herf=“XXX”，XXX同样要写js表达式，且可以直接读取到data中的所有属性

1.4 数据绑定

使用v-bind和v-model指令如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1> Hello {
   
   {name}}</h1>
        单向数据绑定：<input type="text" name="" id="" v-bind:value="name">
        双向数据绑定：<input type="text" name="" id="" v-model:value="name">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
      
      
            el: '#root', // 指定当前Vue示例为哪个容器服务，值通常为CSS选择器字符串
            data: {
      
           // data中用于存储数据
                name:'lalala'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

打开开发者工具，选择vue，可以看到Root组件，点击Root即可看到绑定的数据
当修改数据时，可以注意到两个数据绑定指令都能成功更新数据；
当在v-bind对应的输入框中修改数据时，可以看到data绑定的数据没有发生改变；
然而当在v-model所对应的的文本输入框中修改数据时，可以看到data绑定的数据相应地发生变化，并且其他使用data数据的地方跟着发生改变。

在这里插入图片描述

总结如下：

Vue有两种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还能从页面流向data
注意：双向绑定一般都应用于表单类元素上（如：input、select等）
v-model:value=“XXX” 可以简写为v-model=“XXX”，因为v-model默认收集的是value值

1.5 el和data的两种写法

在控制台打印创建的Vue实例，可以看到以下信息：
在这里插入图片描述

$符号后面是我们实例所对应的可以使用的属性，找到Vue原型所对应的的属性，如下所示：

除了使用el指定Vue实例为哪个容器服务时，还可以使用如下语句：

    <script type="text/javascript">
        Vue.config.productionTip = false;

        const v = new Vue({
      
      
            // el: '#root', // 指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
            data: {
      
           // data中用于存储数据
                name:'lalala'
            }
        })
        v.$mount('#root');
    </script>

data也有以下两种写法：对象式和函数式；

// 第一种：对象式
 data: {    
     name:'lalala'
 }
 // 第二种：函数式
 data: function() {
     return{
         name:'lalala'
     }
 }

注意：采用函数式方法时，data函数可以将:function省略，注意不要使用箭头函数：当前写法this对应的vue实例，如果采用箭头函数的写法，所对应的的this是window。

1.6 MVVM模型

M：模型（Model）:对应data中的数据
V:视图（View）：模板
VM：视图模型（ViewModel）：Vue实例对象

1.7 数据代理

Object.defineProperty方法

如果想给person对象增加age属性，可以使用Object.defineProperty方法，相比于直接添加，需要设置enumerable、writable、configurable属性才能被枚举、修改和删除；
如果想把number与age绑定，当number的值变化时，age所对应的值变化；同时当age所对应的值改变时，number所对应的的值也发生改变，此时需要使用getter和setter方法。

		let number = 19;
        let person = {
    
    
            name: '张三',
            sex: '男'
            // age: number
        }

        Object.defineProperty(person, 'age', {
    
    
            value: 18,
            enumerable: true,   // 控制属性是否可以被枚举
            writable: true,     // 控制属性是否可以被修改
            configurable: true,    //  控制属性是否可以被删除

            get() {
    
    
                return number;
            }, 

            set(value) {
    
    
                number = value;
            }
        })

- 数据代理：通过一个对象代理对另一对象中属性的操作
简单的示例如下：

        let obj = {
    
    x: 100};
        let obj1 = {
    
    y: 200};
        Object.defineProperty(obj1, 'x', {
    
    
            get() {
    
    
                return obj.x;
            },
            set(value) {
    
    
                obj.x = value;
            }
        })

Vue中的数据代理

打印vm实例，可以看到也是通过getter和setter来进行数据代理：
在这里插入图片描述

实际上Vue数据代理的具体原理如下：

在这里插入图片描述
不难找到Vue实例中的_data属性，确实存储了data的相关数据，之后通过在Vue实例中创建相应的属性，通过Object.defineProperty完成数据代理。

总结

本文主要总结了Vue实例创建、模板语法、数据绑定、MVVM模型、数据代理等相关知识。

前端基础-VUE入门教程(一)