Vue.js课堂实例笔记
（一）条件渲染
（1）分支语句结构
实例代码如下：
<!-- 分支语句结构 -->
<!-- v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 -->
<!-- <template> 元素上使用 v-if 条件渲染分组 -->
<!-- v-if作用在<template>上的目的是把<template>包裹的元素作为一个整体 -->
<!-- 而<template>是不会渲染出来的。 -->
<div id="app-1">
<h1>分支语句结构</h1>
<template v-if="see">
<h3>课程列表</h3>
<ul>
<li>课程一号</li>
<li>课程二号</li>
</ul>
</template>
</div>
<script>
var vm_1 = new Vue({
el:"#app-1",
data:{
see:true
}
})
</script>
<!-- v-else -->
<!-- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面 -->
<div id="app-2">
<h3>是否大于0？</h3>
<!-- 随机生成一个数字，判断是否大于0.5，然后输出对应信息： -->
<div v-if="Math.random() >0.5">
YES!
</div>
<div v-else>
NO
</div>
</div>
<script>
var vm_2 = new Vue({
el:"#app-2"
})
</script>
（2）多重分支结构
实例代码如下：
<!-- v-else-if -->
<!-- 多重分支结构 -->
<!-- v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用 -->
<div id="app-3">
<h3>v-else-if</h3>
<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="type">A/B/C</div>
</div>
<script>
var vm_3 = new Vue({
el:"#app-3",
data:{
type:"C"
}
})
</script>
（3）v-show 指令根据条件来展示元素
实例代码如下：
<!-- v-show -->
<!-- v-show 指令根据条件来展示元素 -->
<!-- 控制css的display值，值为false，添加行内样式style="display: none;" -->
<!-- v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 -->
<!-- 注意，v-show 不支持 <template> 元素，也不支持 v-else。 -->
<div id="app-4">
<h3> v-show</h3>
<!-- OK不大于1所以不会显示元素 -->
<div v-show="OK>1">好的 我显示</div>
</div>
<script>
var vm_4 = new Vue({
el:"#app-4",
data:{
OK:1
}
})
</script>
<!-- v-if vs v-show -->
<!-- v-if 是“真正”的条件渲染。v-show元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
使用场景：需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好 -->
（二）列表渲染
（1）v-for 用于数组
实例代码如下：
<h1>列表渲染</h1>
<!-- v-for 用于数组 -->
<!-- 对数组的内容进行迭代遍历，语法形如：v-for="item in items" -->
<!-- items 是数组对象， item是迭代的数组元素。 -->
<div id="app-5">
<h3>v-for 用于数组</h3>
<ol>
<!-- 输出结果：铁头 老李 老顾 阿康 -->
<li v-for="item in items">{{item.name}}</li>
</ol>
</div>
<script>
var vm_5 = new Vue({
el:"#app-5",
data:{
items:[{name:"铁头"},{name:"老李"},{name:"老顾"},{name:"阿康"}]
}
})
</script>
<!-- 获取迭代时数组的下标 -->
<div id="app-6">
<h3>v-for 用于数组</h3>
<ul>
<!-- 输出结果：1,铁头 2,老李 3,老顾 4,阿康 -->
<li v-for="(item,index-1) in items">{{index}},{{item.name}}</li>
</ul>
</div>
<script>
var vm_6 = new Vue({
el:"#app-6",
data:{
items:[{name:"铁头"},{name:"老李"},{name:"老顾"},{name:"阿康"}]
}
})
</script>
（2）v-for 用于对象
实例代码如下：
<!-- v-for 用于对象 -->
<!-- 用 v-for 迭代对象的属性,获取对象的值 v-for="value in object" -->
<div id="app-7">
<h3>v-for 用于对象</h3>
<ul>
<!-- 输出结果：铁头 女 25 -->
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script>
var vm_7 = new Vue({
el:"#app-7",
data:{
object:{
name:"铁头",
sex:"女",
age:"25"
}
}
})
</script>
<!-- 获取key、value, 下标的写法： v-for="(value, key,index) in object" -->
<div id="app-8">
<h3>获取key、value, 下标的写法</h3>
<ul>
<!-- 输出结果：0.name:铁头 1.sex:女 2.age:25 -->
<li v-for="(value,key,index) in object":key="key">{{index}}.{{key}} : {{value}}</li>
</ul>
</div>
<script>
var vm_8 = new Vue({
el:"#app-8",
data:{
object:{
name:"铁头",
sex:"女",
age:"25"
}
}
})
</script>
（3）v-for 在<template>上
实例代码如下：
<!-- v-for 在<template>上 -->
<!-- 类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素 -->
<!-- <template>就是一个模板元素，用来从逻辑包裹多个元素，但<template>本身不显示 -->
<div id="app-9">
<h3> v-for 在template上</h3>
<ul>
<template v-for="item in arr">
<li>{{item.name}}</li>
<li>_________</li>
</template>
</ul>
</div>
<script>
var vm_9 = new Vue({
el:"#app-9",
data:{
arr:[
{name:'铁头'},
{name:'老李'},
{name:'阿康'}
]
}
})
</script>
（4）v-for 和 v-if在一起
实例代码如下：
<!-- v-for 和 v-if在一起 -->
<!-- 处于同一节点，v-for 的优先级比 v-if 更高可以理解为for循环嵌套了一个if语句结构 -->
<div id="app-10">
<h3> v-for 和 v-if在一起的时候</h3>
<ul>
<!-- 循环判断元素，条件成立改变元素 -->
<li v-for="arr in todos" v-if="!arr.isComplete">
{{arr.isComplete }}
</li>
</ul>
</div>
<script>
var vm_10 = new Vue({
el:"#app-10",
data:{
todos:[
{isComplete:'铁头'},
{isComplete:'老李'},
{isComplete:'阿康'}
]
}
})
</script>
还有今天教的数据变化的检测与跟踪，数组更新检测等我打算在有时间的时候好好整理下代码在发出来，这个很重要，今天就先到这了。
——来自胡小哥原创Vue.js课堂笔记（持续更新中...）