Vue的数据渲染

最新推荐文章于 2024-04-14 15:00:58 发布

挽歌听风吟

最新推荐文章于 2024-04-14 15:00:58 发布

阅读量2k

点赞数 2

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45342785/article/details/107665308

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue的数据渲染

Vue.js 的语法非常简洁，要使用它，我们可以通过两种方式，一种是将 Vue.js 当做一个单独的库，在HTML中引入，然后使用其中封装好的各种语法，一种是，利用Node.js提供的服务器，安装 Vue-cli 脚手架，然后在此基础上开发。

我们先使用第一种方式，熟悉Vue的基础语法。

<!-- vue-1.html -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	// 当前页面的逻辑代码
</script>
</body>
</html>

在传统的开发模式中，要将复杂的数据渲染在DOM中，需要使用各种DOM操作方式，对于DOM节点的增、删、改、查操作非常的频繁，代码冗长，且容易产生各种冗余。

框架的数据渲染非常方便，代码简洁，清晰，而且就开发角度而言，大大提高了开发效率，降低了代码冗余。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

但是Vue的 DOM 操作系统，只针对 Vue 实例中按照指定方式声明的数据和允许使用 Vue 语法的DOM区域，普通数据无法使用Vue语法渲染。

<div id="app">
    <!-- 想要在这个区域中使用Vue语法 -->
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
      // 在Vue实例的data对象中，以键值对的形式声明数据，这些数据可以被Vue语法渲染在DOM节点上
  }
});

接下来，我们就看Vue提供的具体的渲染DOM的方式。

一、声明式的渲染

<div id="app">
    <h2>{{ message }}</h2>
</div>

// vue-1.js
let app = new Vue({
  // el声明当前Vue实例中的数据作用的DOM区域  
  el: '#app',
  data: {
      message: 'Hello World'
  }
});

这种渲染方式看起来跟模板字符串比较相似，但是实际上现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。只要 app 中的 message数据改变，页面中的渲染会立刻随之改变。

二、条件渲染

1. v-if
Vue 提供了条件渲染，用来控制切换一个元素是否显示。

<div id="app">
    <!-- 当flag为true时，h2标签在页面上可见，flag为false则不可见 -->
    <h2 v-if="flag">Hello World</h2>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
      flag: true
  }
});

这里我们遇到了一点新东西。h2标签上的 v-if 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。每个指令，都会在渲染的 DOM 上应用特殊的响应式行为。

指令其实就是 Vue 下达给DOM的命令，不同的指令代表代码的不同行为模式。v-if 指令代表的就是条件渲染，根据绑定的值决定要不要渲染这个 DOM 节点。

2. v-else

除了根据一个值，确定要不要渲染某个节点之外，我们还可以根据一个值确定要不要两个节点交替互斥的显示(比如购物类的app中，当购物车中有货物时，就显示购物车，否则显示其他的提示信息)。

<div id="app">
    <!-- 当flag为true时，显示Hello，为false显示World -->
    <h2 v-if="flag">Hello</h2>
    <h2 v-else="flag">World</h2>
</div>

// vue-1.js
let app = new Vue({ 
  el: '#app',
  data: {
      flag: true
  }
});

v-else指令也可以不用写具体的数据:

<h2 v-if="flag">Hello</h2>
<h2 v-else>World</h2>

效果不变，else 总会找到它之前最近的未被匹配的if，与之共用一个判断值。

3. v-else-if
我们还可以使用数据，做多个元素的切换展示。

<div id="app">
    <!--  num < 0 时显示  -->
    <h2 v-if="num < 0 ">I</h2>
    <!-- num == 0时显示 -->
    <h2 v-else-if="num == 0 ">am</h2>
    <!-- num为其他值时显示 -->
    <h2 v-else>tom</h2>
</div>

// vue-1.js
let app = new Vue({ 
  el: '#app',
  data: {
      num: 0
  }
});

注：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

4. v-show

也可以根据v-show指令确定要不要显示元素。

<div id="app">
    <!-- flag为true时显示，为false隐藏 -->
    <h2 v-show="flag">Hello World</h2>
</div>

// vue-1.js
let app = new Vue({ 
  el: '#app',
  data: {
      flag: true
  }
});

注：
v-if系列是控制要不要创建元素，v-show系列是控制要不要显示元素。如果这个元素在页面中是不断地被显示/隐藏，就使用v-show，如果这个元素在某次操作之后就确定要不要渲染，之后也不会更改，就使用v-if。

三、循环渲染

Vue 提供 v-for 指令来渲染列表类的数据到DOM节点。

1. 渲染数组

<div id="app">
    <!-- user是自定义声明的一个局部变量，只作用当前这个循环内部，代表每次循环到的userList中的数据 -->
    <div v-for="user in userList">
        <strong>{{ user.name }}</strong>
        <span>{{ user.age }}</span>
    </div>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
    userList: [{
        name: 'tom',
        age: 18
    },{
        name: 'jerry',
        age: 17
    },
    {
        name: 'jim',
        age: 19
    }]
  }
});

除了可以循环到数组中的元素之外，还可以循环到当前元素的下标。

<div id="app">
    <div v-for="(user,index) in userList">
        <!-- index就是下标 -->
        <i>{{ index }}</i>
        <strong>{{ user.name }}</strong>
        <span>{{ user.age }}</span>
    </div>
</div>

2. 渲染对象

可以使用 v-for 指令渲染对象。

<div id="app">
    <div v-for="(val, key, i) in user">
        <!-- 键值对在对象中的顺序 -->
        <i>{{ i }}</i>
        <!-- 值 -->
        <strong>{{ val }}</strong>
        <!-- 键 -->
        <span>{{ key }}</span>
    </div>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
      user: {
          name: 'tom',
          age: 19,
          sex: '女'
      }
  }
});

3. 渲染字符串

可以使用v-for指令渲染字符串。

<div id="app">
    <div v-for="(val, i) in str">
        <!-- 字符 -->
        <strong>{{ val }}</strong>
        <!-- val在str中的位置 -->
        <span>{{ i }}</span>
    </div>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
     str: 'hello'
  }
});

4. 根据数字循环渲染指定数量的节点

<div id="app">
    <!-- img会被渲染5次 -->
    <img src="star.png" v-for="n in 5">
</div>

四、使用指令渲染

除了 {{ }} 之外，指令也可以将数据渲染在DOM节点上。
1. v-html

<div id="app">
    <div v-html="str"></div>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
     str: 'hello'
  }
});

注：

v-html 是以 innerHTML的方式渲染数据的。
v-html 绑定的好处是当vue.js文件没有被加载出来时，浏览器会认为v-html指令只是一个普通的自定义属性，不会将代码暴露在浏览器中。

2. v-bind
前面的几种渲染方式都是将数据渲染在标签内，但是有时候我们需要动态的为某些元素的属性绑定一些数据。要使用 v-bind。

<div id="app">
    <!-- 当flag为true时，div 会添加一个 'active-box'的类名 -->
    <div v-bind:class="{{ flag ? 'active-box' : '' }}"></div>
</div>

// vue-1.js
let app = new Vue({
  el: '#app',
  data: {
      flag: true
  }
});

v-bind 可以简写：

<div :class="{{ flag ? 'active-box' : '' }}"></div>

注：
使用v-bind时，属性内的执行代码需要用 {{ }} 包括。

挽歌听风吟

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue的数据渲染

Vue的数据渲染Vue.js 的语法非常简洁，要使用它，我们可以通过两种方式，一种是将 Vue.js 当做一个单独的库，在HTML中引入，然后使用其中封装好的各种语法，一种是，利用Node.js提供的服务器，安装 Vue-cli 脚手架，然后在此基础上开发。我们先使用第一种方式，熟悉Vue的基础语法。<!DOCTYPE html><html><head> <title></title>
复制链接

扫一扫