Vue.js条件渲染与列表渲染指南_vue如何利用js渲染同样布局的li-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42210428/article/details/139220017

title: Vue.js条件渲染与列表渲染指南
date: 2024/5/26 20:11:49
updated: 2024/5/26 20:11:49
categories:

前端开发

tags:

VueJS
前端开发
数据绑定
列表渲染
状态管理
路由配置
性能优化

在这里插入图片描述

第1章：Vue.js基础与环境设置

1.1 Vue.js简介

Vue.js (读音：/vjuː/，类似于 “view”) 是一套用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是，Vue.js
被设计为可以自底向上逐层应用。这意味着，你可以在一个大型的单页应用中或者可复用的组件库中使用 Vue，同时也可以将 Vue
用于简单的页面级别的交互。

Vue.js的核心库只关注视图层，不包含任何其他功能，这让它比其他大型框架更加轻量级、易用。如果需要，你还可以使用 Vue.js
生态系统中的一系列高质量的可选工具和库，例如 vue-router、vuex、vue-resource等。

1.2 安装与配置

1.2.1 使用 CDN 加载

将以下代码添加到你的 HTML 中：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {
  
  { message }}
</div>
<script>
    new Vue({
     
     
        el: '#app',
        data: {
     
     
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

1.2.2 使用 npm 安装

首先，需要安装 Node.js 和 npm。确保已安装最新版本，可以从Node.js 官方网站下载。

接下来，在终端中执行以下命令：

npm install -g @vue/cli

创建一个新项目：

vue create my-project

选择 “Manually select features”，然后选择 “Vue 3” 和 “Router”，最后选择 “In dedicated config files” 以进行更细粒度的配置。

1.3 Vue的核心概念：组件、数据绑定与响应式系统

1.3.1 组件

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，带有数据、逻辑和方法等，也可以在不同的组件中复用。

在 Vue.js 中，每个 Vue 实例都是一个组件，可以通过el选项，将它们安装到 DOM 上。

1.3.2 数据绑定

数据绑定是 Vue.js 的核心功能之一。在 Vue.js 中，数据绑定可以用{ { }}标签或 v-bind 指令来实现。


<div id="app">
  <p v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </p>
  <p>{
  
  { message }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })
</script>

1.3.3 响应式系统

Vue.js 的响应式系统会在数据变化时，自动更新 DOM。这意味着，你可以在 Vue.js 中，将数据绑定到模板中，当数据发生变化时，模板会自动更新。

<div id="app">
  {
  
  { message }}
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>

在这个示例中，当你更改message的值时，视图会自动更新。

第2章：条件渲染基础

2.1 v-if与v-show

Vue.js 提供了两种条件渲染的方法：v-if和v-show。

v-if是“真正”的条件渲染，因为它会在条件不满足时完全删除 DOM 元素。

v-show只是简单地切换 CSS 属性display。

v-if也是“惰性”的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-if也是可以与v-else及v-else-if一起使用的：

<div id="app">
  <p v-if="Math.random() > 0.5">这是一个随机数大于 0.5 的段落。</p>
  <p v-else>这是一个随机数小于 0.5 的段落。</p>
</div>

2.2 逻辑运算符与三元表达式

Vue.js 支持使用 JavaScript 中的所有逻辑运算符：!、&&和||。
AD：漫画首页

<div id="app">
  <p v-if="type === 'A'">这是类型为 A 的段落。</p>
  <p v-else-if="type === 'B'">这是类型为 B 的段落。</p>
  <p v-else>这是类型不是 A 或 B 的段落。</p>
</div>

你也可以使用三元表达式：

<div id="app">
  {
  
  { message.length > 0 ? message : '没有消息' }}
</div>

2.3 computed属性与条件渲染

computed属性是 Vue.js 中的一个计算属性，可以用于条件渲染中。

<div id="app">
  <p v-if="isEven">{
  
  { message }} 是偶数。</p>
  <p v-else>{
  
  { message }} 是奇数。</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 10
    },
    computed: {
      isEven: function () {
        return this.message % 2 === 0
      }
    }
  })
</script>

2.4 递归组件与列表条件渲染

在 Vue.js 中，可以使用name选项来递归组件。

<div id="app">
  <tree :data="data"></tree>
</div>
<script>
  Vue.component('tree', {
    template: `
      <ul>
        <li v-for=