Vue框架简介

一、Vue是什么

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

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

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

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

二、Vue的特点

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

1.组件化

    组件化就是将实现页面某一部分功能的结构、样式和逻辑,封装成为一个整体，使其高内聚，低耦合，达到可复用的目的。一个.vue文件就是一个组件。

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

2.声明式编码

举例：

    数据：fruit[{id:apple,price:2.00},{id:pear,price:5.00},{id:grape,price:10.00}

    容器：<ul id="list"></ul>

    效果：

• app:2.00
• pear:5.00
• grape:10.00

命令式编码（js）

<!--容器-->
<ul id="list"></ul>
<script type="text/javascript">
    let fruit=[
        {id:apple,price:2.00},
        {id:pear,price:5.00},
        {id:grape,price:10.00}
    ]
    // 声明变量字符串
    let fruitStr=''
    // 拼接字符串
    fruit.forEach(f = >{
        fruitStr += '<li>${f.id}:${f.price}</li>'
    });
    // 获取list元素
    let list=document.getElementById('list')
    // 操作DOM元素，修改内容
    list.innerHTML = fruitStr
</script>

声明式编码

<ul id="list">
    <li v-for="f in fruit">
        {{f.id}}:{{f.price}}
    </li>
</ul>

     如果数据fruit发生改变，命令式编码会重新拼接字符串，然后将修改后的字符串替换到div，而声明式编码因为是直接将变量放在元素上的，所以数据改变后，元素中的数据会自动改变。

3.虚拟DOM

    虚拟DOM是由普通的JavaScript对象来描述DOM对象，虚拟DOM大大提高了浏览器的性能。

    如果上面的数据fruit在一次操作中更新了10次，传统的开发模式会操作DOM对象10次，而引入虚拟DOM后，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作。