VUE 入门基础

Posted 2020-08-24 柠檬先生

六，条件渲染
　　v-if 添加一个条件块
　　　　<h1 v-if=“ok”>Yes</h1>
　　也可以用v-else 添加else 块

　　<template> 中 v-if条件组

　　因为v-if 是一个指令，需要将它添加到一个元素上，但是如果我们想切换多个元素呢可以把一个<template>
　　元素当做包装元素，并在上面使用v-if,最终的渲染结果不会包括它。
　　　　<template>
　　　　　　<h1>Title</h1>
　　　　　　<p>Paragraph 1</p>
　　　　　　<p>Paragraph 2</p>
　　　　</template>

　　v-else
　　　　可以用v-else 指令给v-if 添加一个else 块
　　　　<div v-if="Math.random() > 0.5">
　　　　　　Sorry
　　　　</div>
　　　　<div v-else>
　　　　　　Not sorry
　　　　</div>
　　　　v-else 元素必须紧跟在v-if元素或者v-else-if 的后面 否则它不能被识别。
　　v-else-if
　　　　作用 v-if 的else-if 块，可以链式的多次使用
　　　　<div v-if="type ===‘A‘">
　　　　　　A
　　　　</div>
　　　　<div v-else-if="type ===‘B‘">
　　　　　　B
　　　　</div>
　　　　<div v-else-if="type ===‘C‘">
　　　　　　C
　　　　</div>
　　　　<div v-else>
　　　　　　Not A/B/C
　　　　</div>
　　v-else-if必须跟在v-if或者v-else-if之后
　　使用key控制元素的可重用
　　vue提供一种方式让你可以自己决定是否要复用元素，你要做的是添加一个属性key ,key 必须带有唯一的值。
　　　　<template v-if="loginType === ‘username‘">
　　　　　　<label>Username</label>
　　　　　　<input placeholder="Enter your username" key="username-input">
　　　　</template>
　　　　<template v-else>
　　　　　　<label>Email</label>
　　　　　　<input placeholder="Enter your email address" key="email-input">
　　　　</template>
　　　　<label> 元素仍然会被复用，因为没有添加了key 属性
　　v-show
　　　　v-show 的元素会始终渲染并保持在DOM 中v-show 是简单的切换元素的css 属性display
　　　　v-show 不支持<template>语法

七，列表渲染
　　v-for
　　　　用v-for 指令根据一组数组的选项列表进行渲染，v-for 指令需要以 item in items 形式的特殊语法
　　　　items 是源数组并且 item 是数组元素迭代的别名。
　　基本用法
　　　　<ul id="example-1">
　　　　　　<li v-for=‘item in items‘>{{item.message}}</li>
　　　　</ul>
　　　　var example1 = new Vue({
　　　　　　el:‘#example-1‘,
　　　　　　data: {
　　　　　　　　items: [
　　　　　　　　{message:‘Foo‘},
　　　　　　　　{message:‘Bar‘}
　　　　　　　　]
　　　　　　}
　　　　})
　　　　结果：
　　　　　　Foo
　　　　　　Bar
　　　　v-for 块中 ，我们拥有对父作用域属性的完全访问权限。
　　　　<ul id="example-2">
　　　　　　<li v-for="(item,index) in items">
　　　　　　　　{{parentMessage}} - {{ index }} - {{ item.message }}
　　　　　　</li>
　　　　</ul>
　　　　var example2 = new Vue({
　　　　　　el: ‘#example -2‘,
　　　　　　data: {
　　　　　　　　parentMessage: ‘Parent‘,
　　　　　　　　　　items: [
　　　　　　　　　　　　　　{message: ‘Foo‘},
　　　　　　　　　　　　　　{message: ‘Bar‘}
　　　　　　　　　　]
　　　　　　}
　　　　})
　　　　结果：
　　　　　　Parent - 0 -Foo
　　　　　　Parent - 1 - Bar
　　　　也可以用 of 替代 in 作为分隔符，因为它是最接近 javascript 迭代器的语法：
　　　　　　<div v-for="item of items"></div>

　　Template v-for
　　　　如同 v-if 模板，你也可以用带有v-for 的<template> 标签来渲染多个元素块
　　　　<ul>
　　　　　　<template v-for="item in items">
　　　　　　　　<li>{{ itme.msg}}</li>
　　　　　　　　<li class="divider"></li>
　　　　　　</template>
　　　　</ul>
　　对象迭代 v-for
　　　　也可以用v-for 通过一个对象的属性来迭代
　　　　<ul id="repeat-object">
　　　　　　<li v-for="value in object">
　　　　　　　　{{value}}
　　　　　　</li>
　　　　</ul>
　　　　new Vue({
　　　　　　　　el: ‘#repeat-object’,
　　　　　　　　data: {
　　　　　　　　　　object: {
　　　　　　　　　　　　　　FirstName: ‘John‘,
　　　　　　　　　　　　　　LastName: ‘Doe‘,
　　　　　　　　　　　　　　Age: 30
　　　　　　　　}
　　　　　　}
　　　　})
　　　　结果：
　　　　　　John
　　　　　　Doe
　　　　　　30
　　　也可以提供第二个的参数为键名：
　　　　<div v-for="(value,key) in object">
　　　　　　{{ key}} : {{ value }}
　　　　</div>

　　第三个参数为索引
　　　　<div v-for="(value,key,index) in object">
　　　　　　{{ key }} ,{{key}} ,{{ value }}
　　　　</div>
　　整数迭代 v-for
　　　　v-for 也可以取整数，在这种情况下，它将重复多次模板
　　　　　　<div>
　　　　　　　　<span v-for="n in 10">{{n}} </span>
　　　　　　</div>
　　组件 和v-for
　　　　在自定义数组里，你可以想任何普通元素一样使用v-for
　　　　　　<my-component v-for="item in items"></my-component>
　　　　　　然而他不能自动传递传递数据到组件里，因为组件有自己独立的作用域，为了传递数据到组件里，我们要用props.
　　　　　　<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index">
　　　　　　</my-component>
　　key
　　　　为了给vue 一个提示，以便它跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为，每一项
　　　　提供一个唯一key 属性，理想的key 值是每一项都有唯一id ，它的工作方式类似于一个属性，所以你需要v-bvind 来绑定动态值。
　　　　<div v-for="item in items" :key="item.id"></div>
　　　　建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。
　数组更新检测
　　变异方法
　　　　vue包含一组观察数组的变异方法，所以我们将会触发视图更新，这些方法如下。
　　　　push() pop() shift() unshift() splice()
　　　　sort() reverse()
　　重塑数组
　　　　变异方法会改变原始的数组，也有非变异方法，如：filter(),concat().slice(),这些不会改变原始数组，但是总是返回一个新数组，使用非变异方法的时候，可以用新数组变异方法时，可以用新数组替换久数组。
　　　　example1.items = example1.items.filter(function (item) {
　　　　　　　　return item.message.match(/Foo/)
　　　　})
　　显示过滤/ 排序结果
　　想要显示一个数组的过滤或排序副本，而不时间改变或重置原始数据，可以创建过滤或排序数组的计算属性。
　　　　　　<li v-for="n in evenNumbers">{{ n }}</li>
　　　　　　　　data: {
　　　　　　　　　　numbers: [1,2,3,4,5]
　　　　　　　　},
　　　　　　　　computed: {
　　　　　　　　　　evenNumbers: function() {
　　　　　　　　　　evenNumbers: function(){
　　　　　　　　　　return this.numbers.filter(function (number){
　　　　　　　　　　　　return number % 2 ===0
　　　　　　　　　　})
　　　　　　　　}
　　　　　　}
　　　　}
　　可以在计算属性不合适的情况下（列如，在嵌套 v-for 循环中） 使用method方法：
　　　　　　<li v-for="n in even(number)">{{ n }}</li>
　　　　　　　　data: {
　　　　　　　　　　numbers: [1,2,3,4,5]
　　　　　　　　},
　　　　　　　　methods: {
　　　　　　　　　　even: function(unmbers) {
　　　　　　　　　　return numbers.filter(function(number){
　　　　　　　　　　　　　　return number % 2 === 0
　　　　　　　　　　　　})
　　　　　　　　　　}
　　　　　　　　}