Vue的列表渲染及组件渲染

Posted tcz1018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的列表渲染及组件渲染相关的知识,希望对你有一定的参考价值。

Vue的列表渲染

注:其实使用的还是相关的vue的指令进行相应的数据绑定和渲染 在前边写过一个博客来说指令的相关内容但是写的不细,就是写了相应的使用方法,在此要提到之前遇到的一个问题 就是前端拿到返回数据进行数据渲染·列表展示的时候,之前就是直接解析出数组直接在DOM上边写一个v-for 进行数据渲染达到数据展示的效果,但是其实这样是不合适的 ,vue的初衷就是使用单页面应用,更多的使用js来完成更多的功能 所以尽量让相应的耦合度低一些,创建一个组件,将数据配置好,js渲染完成之后直接扔上去 显示出来 这样就是没有直接在DOM上进行操作,想想是不是这个道理

(一)列表渲染

1.1使用v-for把一个数组对应为一组元素

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
data() {
return{
	items: [
	      { message: ‘Foo‘ },
	      { message: ‘Bar‘ }
	    ]
	}
  }

1.2 在V-for中,可以直接访问所有的父作用区域的值 举例表示 同时在渲染是显示索引数值
Such as:

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
data(){
	return{
	  parentMessage: ‘Parent‘,
	    items: [
	      { message: ‘Foo‘ },
	      { message: ‘Bar‘ }
	    ]
	 }
  }

这里的v-for语法 使用of或者in都可以

(在v-for里面使用对象)

举例:

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
 data: {
 return{
	 object: {
	      title: ‘How to do lists in Vue‘,
	      author: ‘Jane Doe‘,
	      publishedAt: ‘2016-04-10‘
	    }
	}
  }

直接获取对象的名字也可以

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

一样也有索引

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

区别不大 咋说呢 渲染数据都可以 其实在写的时候多发散下思维 很多就想明白了 不能只跟着他的语法走 这样就被禁住了 慢慢想其实他们做这个框架也是有一定的道理的 肯定也是很多东西去写的是不 不存在很多弊端的

数据更新及相关检测

记住一一句话只要数据变了 视图就会响应

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组 筛查数组

filter()、concat() 和 slice()
//在这里面是改变数组了 进行修改 所以直接去替换掉就可以了

举例子

<li v-for="n in evenNumbers">{{ n }}</li>
data(){
	return{
	  numbers: [ 1, 2, 3, 4, 5 ]
	}
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

然后你还可以自己直接写吗 对吧 反正就是这些东西了 你自己怎么用都行
嵌套循环进行筛查显示

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

拓展 : v-for 直接数据循环 反正就是这些东西学习的时候看一遍 在具体使用到的时候 接的起来 然后回来看看 就记住了 以后多总结一下 就变成你自己的东西了

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

template是使用 v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

注意:
技术图片

组件使用v-for

使用自定义组件使用

<my-component v-for="item in items" :key="item.id"></my-component>

任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要使用 prop

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

组件使用 重要 举例 举例

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
注意这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的,因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同,但是可以避开一些潜在的浏览器解析错误

vue的官方实例

Vue.component(‘todo-item‘, {
  template: ‘    <li>      {{ title }}      <button v-on:click="$emit(‘remove‘)">Remove</button>    </li>  ‘,
  props: [‘title‘]
})

new Vue({
  el: ‘#todo-list-example‘,
  data: {
    newTodoText: ‘‘,
    todos: [
      {
        id: 1,
        title: ‘Do the dishes‘,
      },
      {
        id: 2,
        title: ‘Take out the trash‘,
      },
      {
        id: 3,
        title: ‘Mow the lawn‘
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ‘‘
    }
  }
})



以上是关于Vue的列表渲染及组件渲染的主要内容,如果未能解决你的问题,请参考以下文章

vue sChart组件使用不渲染问题及示例

如何将 Vue 组件从列表渲染中拆分出来?

Vue 指令数据及事件绑定条件和列表渲染

Vue3 渲染一个可扩展的异步组件列表

Vue条件渲染及列表渲染

Vue条件渲染及列表渲染