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

文章目录

前言
一、VUE简介
- 1.1 搭建Vue开发环境
- 1.2 初始Vue
- 1.3 Vue模板语法
- 1.4 数据绑定
- 1.5 el和data的两种写法
- 1.6 MVVM模型
- 1.7 数据代理
- - Object.defineProperty方法
  - 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入门教程(一)相关推荐

零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
微服务和VUE入门教程(26): 微服务之turbine
微服务和VUE入门教程(26): 微服务之turbine 微服务和VUE入门教程(0): 着手搭建项目微服务和VUE入门教程(1): 搭建前端登录界面微服务和VUE入门教程(2): 注册中心微服 ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
前端 IndexDB 操作入门教程
前端 IndexDB 操作入门教程 idb-js 基于indexdb本地数据库的封装文档地址安装: npm install idb-js --save 使用: 第一步: 引入Idb import ...
GIS地图基础知识--入门教程
wenzhanhttp://www.gisbbs.net/viewthread.php?tid=106&extra=page%3D1 GIS地图基础知识--入门教程 GIS 地图知识 1 ...
sql数据库教程百度云_【推荐】零基础水彩画入门教程|零基础水彩教程百度云...
零基础水彩画入门教程|零基础水彩教程百度云! 照着教程画却总是画不好,这些水彩技法你真的学会了吗? 盲目地照着葫芦画瓢,不懂控制确实很难学会,可以关注一下公众号:每日学绘画,可以领取水彩电子书和全套视 ...

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