Vue基础总结（1）｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天，内容主要包括对Vue简介，初步认识

这是我参与「第四届青训营」笔记创作活动的第1天

一、Vue简介

1、vue是什么？

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

构建用户界面：数据驱动界面

渐进式：vue可以自底向上逐层应用

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的vue插件

2、vue是谁开发的？

尤雨溪

3、vue的特点

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

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

举例：将数据写入容器展示

命令式编码（javascript编写）

//准备html字符串
let htmlStr = ''
//遍历数据拼接html字符串
persons.forEach( p => {
    hrmlStr += '<li>${p.id} - ${p.name} - ${p.age}</li>'
});
//获取list元素
let list = document.getElementById('list')
//修改内容（亲自操作DOM）
list.innerHTML = htmlStr

声明式编码

<ul id = "list">
    <li v-for = "p in persons">
        {{p.id}} - {{p.name}} - {{p.age}}
    </li>
</ul>

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

原生js实现：数据 -> 页面真实DOM（Real-DOM）

vue实现：数据 -> 虚拟DOM（Virtual-DOM）存在Diff比较 -> 页面真实DOM（Real-DOM）

二、初识Vue

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

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

1、js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。

js表达式是特殊的js代码（语句），会生成一个值。

（1）a

（2）a+b

（3）demo(1) // 函数调用表达式

（4）x === y ？ 'a' : 'b'

2、js代码（语句）

（1）if() {}

（2）for() {}

<!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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <!-- 容器的作用就是：为vue提供模板，呈现最终数据。 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>

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

        // 创建Vue实例
        const x = new Vue({
            el:'#root', // el用于制定当前vue实例为哪个容器服务，值通常为css选择器字符串。另一种写法为el:document.getElementById('root'),这样就是亲自找到一个元素，然后配置到el内，前者是指定选择器自己寻找。
            data:{ // data用于存储数据，数据供el所指定的容器使用，值暂时写成一个对象。
                name:'ljx'
            }
        })
    </script>
</body>
</html>

补一、JS背景

JavaScript诞生于1995年，由网景公司发明。

起初命名为LiveScript，后来由于SUN公司的介入，更名为JavaScript。

1996年微软公司在其最新的IE3浏览器中引入JScript。此时市面上存在两个版本，一个是网景公司的JavaScript和微软公司的JScript。

为确保不同的浏览器上运行的JavaScript标准一致，几个公司共同制定的JS的标准命名为ECMAScript（ES）。

ECMAScript是一个标准，这个标准要由各个浏览器厂商实现，不同的浏览器厂商对该标准有不同的实现。

JS属于脚本语言，浏览器本身并不会执行JS代码，而是通过内置的JS引擎（解释器）对JS代码逐行解释每一句源码（转换为机器语言），然后由计算机执行。

补二、JavaScript构成：ECMAScript + DOM + BOM

ECMAScript 标准

DOM 文档对象模型：提供一组对象可以操作网页

BOM 浏览器对象模型：提供一组对象可以操作浏览器

补三、JS特点

解释型语言。无需编译即可运行。

类似于C和Java的语法结构。

动态语言。变量的值较为任意，可以保存各种类型的数据。

基于原型的面向对象。

本篇总结：

这篇笔记的主要内容是简单介绍Vue，初步认识Vue的工作流程并且对应补充Js的一些背景知识。

vue是什么？是谁开发的？特点又是什么？
JavaScript的背景？由哪三部分构成？特点是什么？

从整体使用的角度，对Vue有一个初步理解

今天也是有收获的一天~

Vue基础总结（1） ｜ 青训营笔记