vuea标签href写值_web前端Vue项⽬实战-Music
上篇讲到vue的使⽤⽅法，今天这⼀篇介绍vue的实操，可以⼤家更加加固去学习web前端vue技术。
第⼀节 Music项⽬环境第⼀部分
本届作业
1. 聊⼀聊React和Vue的区别
2. ⽼版本的项⽬环境如何创建项⽬
第⼆节 Vue API 第⼆部分
模板语法
⽂本
数据绑定最常见的形式就是使⽤“Mustache”语法 (双⼤括号) 的⽂本插值：
<
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。⽆论何时，绑定的数据对象上 msg属性发⽣了改变，插值处的内容都会更新。
通过使⽤ v-once 指令，你也能执⾏⼀次性地插值，当数据改变时，插值处的内容不会更新。但请留⼼这会影响到该节点上的其它数据绑定：
<
原始HTML
双⼤括号会将数据解释为普通⽂本，⽽⾮ HTML 代码。为了输出真正的 HTML，你需要使⽤ v-html 指令：
<
这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使⽤ v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于⽤户界⾯ (UI)，组件更适合作为可重⽤和可组合的基本单位。
提⽰：
你的站点上动态渲染的任意 HTML 可能会⾮常危险，因为它很容易导致 XSS 攻击。请只对可信内容使⽤ HTML 插值，绝不要对⽤户提供的内容使⽤插值。
特性
Mustache 语法不能作⽤在 HTML 特性上，遇到这种情况应该使⽤ v-bind 指令：
<
使⽤JavaScript表达式
迄今为⽌，在我们的模板中，我们⼀直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式⽀持。
<
单个表达式，所以下⾯的例这些表达式会在所属 Vue 实例的数据作⽤域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式不会⽣效。
⼦都不会
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会⽣效，请使⽤三元表达式 -->
{{ if (ok) { return message } }}
缩写
v- 前缀作为⼀种视觉提⽰，⽤来识别模板中 Vue 特定的特性。当你在使⽤ Vue.js 为现有标签添加动态⾏为 (dynamic behavior) 时，v-前缀很有帮助，然⽽，对于⼀些频繁⽤到的指令来说，就会感到使⽤繁琐。同时，在构建由 Vue 管理所有模板的单页⾯应⽤程序 (SPA -single page application)时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常⽤的指令，提供了特定简写：
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有⽀持 Vue 的浏览器都能被正确地解析。⽽且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深⼊地了解它们的作⽤，你会庆幸拥有它们
条件渲染
v-if
v-if 指令⽤于条件性地渲染⼀块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以⽤ v-else 添加⼀个“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
在 <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 块”，可以连续使⽤：
<
A
</
B
</
C
</
v-show
另⼀个⽤于根据条件展⽰元素的选项是 v-show 指令。⽤法⼤致⼀样：
href标签怎么用<
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件和⼦组件适当地被销毁和重建。
惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会开始渲染条件块。
v-if 也是惰性的
相⽐之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进⾏切换。
⼀般来说，v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好。
列表渲染
⽤ v-for 把⼀个数组对应为⼀组元素
我们可以⽤ v-for 指令基于⼀个数组来渲染⼀个列表。v-for 指令需要使⽤ item in items 形式的特殊语法，其中 items 是源数据数组，⽽别名。
item 则是被迭代的数组元素的别名
<
在 v-for ⾥使⽤对象
你也可以⽤ v-for 来遍历⼀个对象的属性。
数组更新检测
变异⽅法
Vue 将被侦听的数组的变异⽅法进⾏了包裹，所以它们也将会触发视图更新。这些被包裹过的⽅法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组
变异⽅法，顾名思义，会改变调⽤了这些⽅法的原始数组。相⽐之下，也有⾮变异 (non-mutating method) ⽅法，例如 filter()、
concat() 和 slice() 。它们不会改变原始数组，⽽总是返回⼀个新数组。当使⽤⾮变异⽅法时，可以⽤新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
ssage.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并⾮如此。Vue 为了使得 DOM 元素得到最⼤范围的重⽤⽽实现了⼀些智能的启发式⽅法，所以⽤⼀个含有相同元素的数组去替换原来的数组是⾮常⾼效的操作。
对象变更检测注意事项
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
你还可以使⽤ vm.$set 实例⽅法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)
本届作业
1. 模板语法中可以存在的语句有那些
2. 说出v-if和v-show的区别
3. 编写代码，实现给定数组的列表渲染内容:[10,20,30,40]
第三节 Vue API第⼀部分
事件处理
监听事件
可以⽤ v-on 指令监听 DOM 事件，并在触发时运⾏⼀些 JavaScript 代码。
<
事件处理⽅法
然⽽许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可⾏的。因此 v-on 还可以接收⼀个需要调⽤的⽅法名称
// 也可以⽤ JavaScript 直接调⽤⽅法
<() // => 'Hello Vue.js!'
内联处理器中的⽅法
除了直接绑定到⼀个⽅法，也可以在内联 JavaScript 语句中调⽤⽅法
<
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以⽤特殊变量 $event 把它传⼊⽅法：
<
// ...
methods: {
warn: function (message, event) {
// 现在我们可以访问原⽣事件对象
if (event) event.preventDefault()
alert(message)
}
}
事件修饰符
在事件处理程序中调⽤ event.preventDefault() 或 event.stopPropagation() 是⾮常常见的需求。尽管我们可以在⽅法中轻松实现这点，但更好的⽅式是：⽅法只有纯粹的数据逻辑，⽽不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表⽰的。
.stop
.prevent
.capture
.self
.once
.
passive
<!-- 阻⽌单击事件继续传播 -->
计算属性和侦听器
计算属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。