主要内容
项目环境搭建路由导航实现ListView列表网络请求第三方组件-轮播图自定义组件-tabs回到顶部Iconfont引入歌曲详情页歌曲播放歌词处理学习目标
第一节Music项目环境第一部分
Vue
本节作业
聊一聊React和Vue的区别老版本的项目环境如何创建项目第二节VueAPI第二部分
模板语法
文本
数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值：
Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
原始HTML
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令：
这个span的内容将会被替换成为属性值rawHtml，直接作为HTML——会忽略解析属性值中的数据绑定。注意，你不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。
特性
Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令：
使用JavaScript表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
缩写
v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性。当你在使用Vue.js为现有标签添加动态行为(dynamicbehavior)时，v-前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由Vue管理所有模板的单页面应用程序(SPA-singlepageapplication)时，v-前缀也变得没那么重要了。因此，Vue为v-bind和v-on这两个最常用的指令，提供了特定简写：
v-bind缩写
v-on缩写
它们看起来可能与普通的HTML略有不同，但:与
对于特性名来说都是合法字符，在所有支持Vue的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们条件渲染
v-if
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。
也可以用v-else添加一个“else块”：
在template元素上使用v-if条件渲染分组
因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个template元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含template元素。
v-else
你可以使用v-else指令来表示v-if的“else块”
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。
v-else-if
v-else-if，顾名思义，充当v-if的“else-if块”，可以连续使用：
v-show
另一个用于根据条件展示元素的选项是v-show指令。用法大致一样：
不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
v-ifvsv-show
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
列表渲染
用v-for把一个数组对应为一组元素
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用iteminitems形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
在v-for里使用对象
你也可以用v-for来遍历一个对象的属性。
数组更新检测
变异方法
Vue将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()替换数组
变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异(non-mutatingmethod)方法，例如filter()、concat()和slice()。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
你可能认为这将导致Vue丢弃现有DOM并重新渲染整个列表。幸运的是，事实并非如此。Vue为了使得DOM元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
对象变更检测注意事项
还是由于JavaScript的限制，Vue不能检测对象属性的添加或删除：
你还可以使用vm.$set实例方法，它只是全局Vue.set的别名：
本节作业
模板语法中可以存在的语句有那些说出v-if和v-show的区别编写代码，实现给定数组的列表渲染内容:[10,20,30,40]第三节VueAPI第一部分
事件处理
监听事件
可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法
有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：
事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once.passive
计算属性和侦听器
计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage依赖于vm.message，因此当vm.message发生改变时，所有依赖vm.reversedMessage的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的getter函数是没有副作用(sideeffect)的，这使它更易于测试和理解。
计算属性缓存vs方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
在这个示例中，使用watch选项允许我们执行异步操作(访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
Class与Style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
绑定HTMLClass
对象语法
我们可以传给v-bind:class一个对象，以动态地切换class：
上面的语法表示active这个class存在与否将取决于数据属性isActive的truthiness。
你可以在对象中传入更多属性来动态切换多个class。此外，v-bind:class指令也可以与普通的class属性共存。当有如下模板:
和如下data：
结果渲染为：
当isActive或者hasError变化时，class列表将相应地更新。例如，如果hasError的值为true，class列表将变为staticactivetext-danger。
数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表：
绑定内联样式
对象语法
v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用引号括起来)来命名：
直接绑定到一个样式对象通常更好，这会让模板更清晰：
数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：
表单输入与绑定
你可以用v-model指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素使用value属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件。文本
修饰符
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步
.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：
这通常很有用，因为即使在type=number时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：
本节作业
实现列表数据的点击事件实现点击事件阻止冒泡实现文本的双向数据绑定第四节Vue组件
单文件组件
文件扩展名为.vue的single-file