掌握前端三大语言：HTML、CSS、JavaScript终于要开始开始学习进阶内容了，呜呜呜~，听说vue很难？管它难不难冲就完事了

1.Vue简介

1.1 Vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：把拿到手中的数据，通过某种办法，变成用户可以看见的界面

渐进式：可以自底向上逐层的应用。通俗来讲：

简单应用：只需一个轻量小巧的核心库。复杂应用：可以引入各式各样的vue插件

1.2 开发者及版本发展历程

开发者：尤雨溪 IT界华人的骄傲

版本发展历程：

2013年受Angular框架的启发，尤雨溪开发一款轻量框架-Seed同年12改名Vue，版本号0.6.0.

2014年正式对外发布，版本号0.8.0

2015年10月27日，正式发布Vue1.0.0 Evangelion （新世纪福音战士）

2016年10月1日，正式发布Vue2.0.0. Ghost in the Shell （攻壳机动队）

2020年9月18日，正式发布Vue3.0.0 One Piece （海贼王）

随着近几年Vue的分量越来越重，已然成为国内前端工程师必备技能，当然这都不是重点，为了海贼王，我也得学到Vue3.0，这是儿时的一个梦，只是以这种方式呈现出来。

1.3 Vue的特点

1.采用组件化模式，提高代码的复用率，且让代码更好维护。

组件化：说白了就是将某一模块的三大基础语言，封装到一起。咳咳~，这样更好的 copy

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

1.4 学习Vue之前要掌握的JavaScript基础知识

譬如：ES6语法规范、ES6模块化、包管理器、原型和原型链、数组常用方法、axios、promise….

1.5 如何学习Vue？

这里可以从vue的官网入手，里面的教程详细的介绍了vue的配置与安装，里面的API也详细的介绍了vue相关语法的使用，遇到不熟悉的语法命令这里都可以找到，以及还有其它的一些功能方面这里不在赘述，链接地址如下：https://cn.vuejs.org/

1.6 Vue的开发环境配置

三步：

1.下载开发版本的vue，在官网就能找到

2.安装开发者调试工具Vue.js devtools,嗯~，这个工具在谷歌的应用商城下载，但在国内访问不了，如果下载不了，私我。

3.阻止vue在启动时生成生产提示

Vue.config.productionTip = false

2.Vue打印Hello World？

前言：

嗯~,在网页上输出Hello World 很简单，直接div容器里套一个一级标签<h1>hello world</h1>。就能在页面上显现出来，那我们为啥还要用vue呢，这不是多此一举吗？在这我要声明一点，如果我们要是用常规的前端三大基础语言在网面上写，内容就会固化，说白了，就是把内容写死了，如果后期进行网页内容的更新维护这不很麻烦？所以在这里引入Vue进行数据的管理与更新。

编程过程：

2.1 引入vue：

官网上有两个vue版本，开发版本(包含完整的警告和调试模式)和生产版本(删除了警告，33.46KB min+gzip)在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

2.2 准备好一个容器，一般常借用Id选择器，for example:

<div id="test"> //id为test，为vue建立起联系
    <h1>Hello world</h1>
</div>

2.3 创建Vue实例和id选择器建立联系

<script>
    Vue.config.productionTip = false //阻止 vue在启动时生成生产提示

    //创建Vue实例
    new Vue({
        el:'#test', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择字符串
        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'World'
        }
    })
</script>

如果我们想将Hello Word 中的World进行内容的更改，我们就需要选择特定的容器进行内容的更改，那么<h1>Hello World</h1>显然不能满足我们的要求，所有我们要用一个变量来替代我们要改变的内容，如代码所示，采用 name:’World’ 前者是变量，后者是我们要替换的值。如下

<div id="root">
    <h1>Hello {{name}}</h1>
</div>

这样就在页面上输出Hello World了，如果想修改World改为People，修改name的值即可。这里Vue的基础搭建与使用已经介绍完毕，当然也只是最基础，呜呜呜~

2.4 初始Vue的注意事项

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

4.容器和vue实例只能一对一;

5.真实开发的实例只有一个Vue实例，并且会配合着组件一起使用；

6.{{xxx}}中的数据发生改变，那么模板中用到该数据的地方也会自动更新

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

注意区分：js表达式和 js代码（语句）

1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：

(1). a

(2). a+b

(3). test(1)

(4). x == y?’a’:’b’

2.js代码(语句)

(1). if(){}

(2). for(){}