v-for指令渲染列表
#key
预期：number | string | boolean | symbol
key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用key时，它会基于Key的变化重新排列元素顺序，并且会移除key不存在的元素。
有相同父元素的子元素必须有独特的Key。重复的Key会造成渲染错误。
最常见的组合 v-for :
<ul>
<li v-for=" item in items " :key="item.id">{{ item }} </li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它，当遇到如下场景可能会用到：1. 完整地触发组件的声明周期钩子 2. 触发过渡
<transition>
<span :key="text">{{ text }}</span>
</transition>
// 当text发生改变时，<span>总是会被替换而不是被修改，因此会触发过渡
绑定class的几种方式
通过数据驱动的方式实现类的动态化绑定
绑定Style
计算属性
在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。因此，官网也说过，任何复杂的逻辑处理，都应使用计算属性。
<div id="example">
<p> message: "{{ message }}"</p>
<p> computed message : " {{ reversedMessage }} "</p>
</div>
var vm = new Vue({
el : '#example',
data ：{
message : 'student'
},
computed ：{
//计算属性的getter
reversedMessage ：function () {
// this 指向的是 vm 实例
return this.message.split(' ').reverse().join()
}
}
})
条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
必须是兄弟相连的元素，中间不能放其他的元素！
在 <template> 元素上使用 v-if 条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<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>
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：
<template v-if="loginType === 'username'">
<label> Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if与v-show的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if与v-for不推荐同时使用
不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
组件与路由页面
组件的定义：主要负责构建用户界面，包含 HTML JS Style
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function (){
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({
el: '#components-demo'
})
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
data必须是一个函数
当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count:0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data:function(){
return{
count:0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例，会共享同一个对象。
路由页面
用于操作页面的跳转实现, 在uniapp中，放在pages里面页面，都叫路由页面，同时路由页面必须有注册在pages.json中。
路由的功能：是框架统一管理，需要在pages.json中配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样，所以在uni-app的路由用法与Vue-Router方式管理路由不同。
路由的跳转：uni-app有两种页面路由跳转方式：1.使用navigator组件跳转 2.调用API跳转
页面栈：框架以栈的形式管理当前所有的页面，当发生路由切换的时候，页面栈的表现如下：
路由方式 页面栈表现 触发时机
初始化 新页面入栈 uni-app 打开的第一个页面
打开新页面 新页面入栈 调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
页面重定向 当前页面出栈，新页面入栈 调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回 页面不断出栈，直到目标返回页 调用 API uni.navigateBack ,使用组件 <navigator open-type="navigateBack"/> 、 用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换 页面全部出栈，只留下新的 Tab 页面 调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用 户切换 Tab
重加载 页面全部出栈，只留下新的页面 调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>
定义一个list.vue组件
组件的使用步骤：1从外部引入 2. 注册 3. 使用在view中
uni.navigateTo(object): 保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原来的页面
<template>
<view>
<h3>自定义页面</h3>
</view>
</template>
<script>
export default {
data () {
return {}
},
methods: {
onLoad() {
//编程式导航，通过路径，实现页面的跳转
uni.navigateTo({
url : '/pages/list/list'
})
}
}
<style>
</style>
然后操作路由去实现页面的跳转
注：如果页面没有发生跳转，可能需要重新编译一下，可能是出现了缓存。
