Java语言-104：Vue框架

1、Vue框架简介：
    是一套用于构建用户界面的渐进式框架。
2、与其它大型框架的区别：
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
3、Vue框架的特点：
    1）轻量级
    2）JS语法
    3）上手快
4、与jQuery框架的比较：
    jQuery框架关注DOM，Vue框架不关注DOM，关注数据。
5、Vue的基本框架
    1）el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制
    2）data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好（所有的需使用的数据都需要在这里定义后方可使用）
    3）methods：事件处理方法对象
6、事件处理：
    v-on：click
7、数据绑定：
    1）v-bind      属于属性绑定。可给v-bind：class一个对象，以动态地切换class。该指令可以与普通的class特性共存。（必须绑定一个属性对象方可使用）
    2）{{}}      内存括号中为绑定的对象，此时表示该对象
    3）v-html：以原始数据方式进行绑定
注意：绑定的位置可以是文本、属性、CSS（如style和class）
8、Vue的常用指令
    1）条件指令：
    v-if
        例如：
        <p v-if = "boolean">
            {{绑定内容1}}
        </p>   ：表示boolean为true时执行绑定内容1，为false时继续从</p>朝下执行程序
    v-else
        例如：
        <p v-else>
            {{绑定内容2}}
        </p>
        表示boolean为false时，执行v-else，即执行绑定内容2
    v-else-if
        格式：v-else-if = “true/false”
            <p v-if = "boolean">
                 {{message0}}
            </p>
            <p v-else-if = "boolean1">
                 {{message1}}
            </p>
            .........
            表示当boolean为true时，执行message0
                      boolean为false时，执行v-else-if = “boolean1”
            boolean1位true时，执行message1
            boolean1位false时，执行v-else-if = “booleanN”
            ............
    2)v-show