Vue基础渲染方式

最新推荐文章于 2024-07-04 18:16:28 发布

dreaming_drop

最新推荐文章于 2024-07-04 18:16:28 发布

阅读量1.6k

点赞数 1

原文链接：https://cn.vuejs.org/index.html

版权

Vue 是一套用于构建用户界面的渐进式框架，是MVVM模型,它包括声明式渲染、组件系统、客户端路由、状态管理、构建体系，我们可以根据自己的需求来应用其中的功能。在Vue的基础语法中，渲染的方式有条件渲染、列表渲染。

1.条件渲染

用Vue进行条件渲染可以使用v-if和v-show指令，它们都是用于渲染某一部分内容，因为它们的渲染是需要满足条件才能进行渲染，所以叫做条件渲染。其满足的条件是：表达式的返回值为真值时才会发生渲染

比如：

<body>
    <div id="try">
        <p v-if="yes">if:布尔值为真，能看见</p>
        <p v-if="no">if:布尔值为假，不能看见</p>
        <p>if:123</p>
        <p v-show="yes">show:布尔值为真，能看见</p>
        <p v-show="no">show:布尔值为假，不能看见</p>
        <p>show:123</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#try',
            data: {
                yes: true,
                no: false,
            }
        });
    </script>
</body>

视图效果：

文档结构：

从上面的元文档结构可看出来，v-if才是真正的条件渲染，如果布尔值为 false，就不会渲染上去。而 v-show是会渲染上去，只不过如果布尔值为 false，该元素的 display 属性值为 none。

另外说一点，在进行渲染时，Vue 为了能够尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，而为了区别每一个元素，需要添加一个具有唯一值的 key 属性。类似于id属性，做一个唯一的标识。

2.列表渲染

使用Vue进行列表渲染的指令为v-for ，v-for 指令需要使用 (item,i) in arr形式的特殊语法，arr是数据选项data里面的数组，item 是数组元素，i是索引。

比如：

<body>
    <div id="try">
        <p v-for="(item,i) in arr">{{ i }}:{{item}}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#try',
            data: {
                arr: ['我', '是', '谁']
            }
        });
    </script>
</body>

视图效果：

除了数组外，v-for还可以渲染对象，语法为(value，key,i) in obj，obj是数据选项data里面的对象，value是对象的建，key是对象的值，i是索引

比如：

<body>
    <div id="try">
        <ul>
            <li v-for="(value,key,i) in obj">{{ i }}. {{ key }} : {{ value }}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#try',
            data: {
                obj: {
                    name: '名字',
                    age: '年龄',
                    gender: '性别',
                }
            }
        });
    </script>
</body>

视图效果：

与v-if一样，进行渲染时，需要给元素添加一个唯一的key值。

数组更新后渲染

当数组里面的数据发生更新时，Vue 会检测到其更新，然后自动重新渲染视图。其中更新分为变异方法和非变异方法。Vue变异方法的名称与js原生数组中的改变自身数组的方法一致，非变异方法的名称与js原生数组中的不改变自身数组的方法一致。变异方法可以不用进行多余的处理，因为数组是复杂数组类型，变异方法使得原数组已经发生改变，所以Vue会自动重新渲染；而非变异方法不能重新渲染，使用非变异方法时可以将改变之后的数据赋值给原数组即可重新进行渲染。

在 Vue 中2.0版本以上3.0版本以下存在 2 种无法检测的变异的形式：1.利用索引直接设置数组的其中一项：可以Vue 实例的 set 方法来解决；2.修改数组的长度：可以使用数组的splice 方法来解决