Vue的列表渲染及组件渲染

Posted 2020-12-23 tcz1018

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 = ‘‘
    }
  }
})