学习文档（4）

目录

Vue简介

MVVM思想

Vue指令

内容输出指令

条件渲染指令

列表渲染指令

数据绑定指令

Vue简介

Vue2.x官网：https://v2.cn.vuejs.org

Vue3.x官网：https://cn.vuejs.org

官网（2.x版本）对vue的定义是：vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

使用Vue.js可以让Web开发变得简单，它提供了许多现代Web开发常用的高级功能：

• 解耦视图和数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM(virtual|DOM)

MVVM思想

Vue设计上使用的MVVM（Model-View-ViewModel）模式

• Model：模型，负责存储和提供数据
• View：视图，负责页面展示
• ViewModel：视图模型，是View和Model之间的桥梁。它负责处理View和Model之间的交互，比如将Model的数据转换为View可以展示的格式，或者将用户在View的操作转换为Model的数据更新

MVVM将View的状态和行为抽象，把视图层和业务逻辑层分离，ViewModel就是完成这些工作的。

MVVM模式的优势

• 低耦合：View可独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化时Model可以不变，当Model变化时View也可以不变。
• 可重用性：由于三个部分相对独立，所以可重用性高，一个Model可以用于多个View，一个ViewModel的业务逻辑也可以作用于多个View
• 独立开发：同样由于独立性，设计人员可以专注于View视图的开发，擅长业务逻辑的开发人员可以专注开发ViewModel，更易于团队合作

Vue指令

指令（Directives）是特殊的带有前缀 v- 的特性。指令的职责就是其表达式的值改变时把某些特殊的行为应用到DOM上。

内容输出指令

v-text和v-html主要负责渲染数据为标签内容

    <div id="app">
        <!-- JSON变量 -->
        <p>{{msg}}</p>
        <!-- 数字类型 -->
        <p>{{98}}</p>
        <!-- 字符串类型 -->
        <p>{{"Hello Vue!"}}</p>
        <!-- JavaScript表达式 -->
        <p>{{"Hello" + name}}</p>
        <p>{{10 / 5}}</p>
        <!-- 三元表达式 -->
        <p>{{ ok ? 'YES':'NO'}}</p>
        <p>{{msg.split('').reverse().join('')}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                msg : "Musrache语法",
                name : "菲菲",
                ok : true
            }
        })
    </script>

运行效果

使用插值和v-text指令的方式显示html代码时，并不渲染为html解析结果，而是作为文本内容输出，类似于jQuery的text()方法，而v-html指令会将html解析结果渲染，类似于jQuery中的html()方法

条件渲染指令

作为模板语言，条件判断也是必不可少的，其中v-if和v-else指令是控制元素是否需要出现在DOM树结构中，注意v-else指令必须紧跟着v-if指令的后面，中间不能添加其他元素。而v-show是控制元素是否需要显示在页面中，此元素会一直存在于DOM树结构中

    <div id="app">
        <div v-if="ok">我是v-if指令控制的DIV</div>
        <div v-else>我是v-else指令控制的DIV</div>
        <div v-show="show">我是v-show指令控制的DIV</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                ok : true,
                show : true
            }
        })
    </script>

效果图

我们设置数据ok为true，show也为true，查看浏览器运行效果，并键入F12打开”开发者工具“中的Elements选项卡，查看对应的DOM结构，可以发现我们写了3个DIV元素，但是在DOM结构中只有v-if和v-show的DIV存在，v-else对应的DIV因为不满足条件，被删除了。

接下来我们把ok和show都设置为false

            data : {
                ok : true,
                show : true
            }

运行结构如图所示，页面只显示了v-else指令内容，而v-show是通过将CSS样式中display设置为none的方式隐藏的，依然存在于DOM结构中

下面我们总结一下v-if 和 v-show的区别，v-if控制的是元素是否需要出现在DOM结构中，作用时添加和删除元素，v-show控制的是元素的隐藏和显示，无论是否显示都一直在DOM结构中。其各自的使用场景为：

• v-if指令有更高的切换消耗，因为条件成立时是需要通过添加元素改变DOM树结构的，不成立时又要删除元素并且内部指令不执行，如果频繁的显示和隐藏性能消耗大，适合首次加载时是否需要渲染，后续不再更改条件
• v-show无论条件是否成立，元素都必须添加到DOM树中，所以有更高的初始渲染消耗，通过CSS样式来控制是否显示，性能消耗小，适合频繁切换显示隐藏的元素

列表渲染指令

v-for指令课遍历data中的数据，根据循环次数生成被指令修饰的DOM元素。

<div id="app">
        <ul>
            <!-- 使用v-for修饰的li标签会重复生成 -->
            <!-- course是循环元素（课程），index是下标 -->
            <li v-for="(course,index) in courses" :key="index">
                {{index}}、课程:{{course.name}}
                <ul>
                    <!-- 循环嵌套，显示课程的章节信息 -->
                    <li v-for="(chapter,idx) in course.chapters" :key="idx">
                        {{idx}}、章节：{{chapter.name}} 课时：{{chapter.lesson}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                courses : [
                    {
                        name : "前端框架入门" , chapters:[
                            {name : "Vue.js",lesson : 4},
                            {name : "React.js",lesson : 8},
                            {name : "Angular.js",lesson : 16}
                        ]
                    },
                    {
                        name : "后端框架入门", chapters:[
                            {name : "MyBatis",lesson : 8},
                            {name : "Spring",lesson : 8},
                            {name : "SpringMVC",lesson : 16}
                        ]
                    }
                ]
            }
        })
    </script>

效果图

注意：key属性能够为每项提供一个唯一的标识，理性的key是数据的唯一键，示例代码中使用index小标实际上是不恰当的，如果删除或者新增数据，下标是会方式变化的，可能导致各种问题出现，所以 key属性建议使用数据中每项的唯一键，比如ID作为key

数据绑定指令

v-model指令能够实现表单输入与数据的双向绑定，双向绑定指的是在Vue实例对象中的data与其渲染的DOM元素内容保持一致，无论哪一方被改变，另一方也会相应的更新。

v-model只能使用在 <input>、<select>、<textarea> 等表单元素上，与其值进行双向绑定

<div id="app">
        <!-- 写死src，不能动态改变 -->
        <img src="images/vue.png"/>
        <!-- 使用v-bind指令，可动态改变src -->
        <img v-bind:src="imageSrc"/>
        <!-- 简写写法 -->
        <img :src="imageSrc"/>
        <!-- 绑定对象，则属性值为true的添加，false的不添加 -->
        <p v-bind:class="{ class: hasA, classB: hasB }">段落1</p>
        <!-- 绑定数组，则数组中的样式都会添加 -->
        <p v-bind:class="classArray">段落2</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el : "#app",
            data : {
                imageSrc : 'images/vue.png',
                hasA : false,
                hasB : true,
                classArray : ['classA','classC']
            }
        });
        setTimeout(function(){
            // 3秒后修改图片属性值，查看图片是不是变化了
            app.imageSrc = 'images/react.png';
        },3000)
    </script>

效果图(刚加载)

效果图（3秒后）

在运行实例代码后，我们需要等待3秒后，可以看到两张图片的变化，因为我们通过Vue实例对象修改了imageSrc这个属性，导致用v-bind:src绑定此属性的两张图片的src跟着变化

效果图（段落结构）

而在“开发者工具”周的Element选项卡，会方向段落1中只用到了类样式classB，因为hasB为true值。段落2则使用了数组，所以类样式ClassA和ClassC都存在