vue基础三
2024-09-25 13:29:11
1.模板语法
在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的 JSX 语法。
1.1插值
#文本 数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:<span>Message: {{ msg }}</span>
#纯html 双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html
指令。
#属性 Mustache 不能在 HTML 属性中使用,应使用 v-bind指令。
#js表达式 这里每个绑定都只能包含单个表达式。
<!--合格的表达式-->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
1.2指令
指令(Directives)是带有
v-
前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for
,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。#参数 一些指令能接受一个“参数”,在指令后以冒号指明。
#修饰符 修饰符(Modifiers)是以半角句号 .
指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()。
1.3 Filters
#过滤器 Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind
表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
1.4缩写
#v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
#v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
2.计算属性
2.1.1基础例子
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这种情况下,模板不再简单和清晰。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑,你都应当使用计算属性。
<!--html-->
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<!--js-->
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
2.1.2计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果:<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。相比而言,每当重新渲染的时候,method 调用总会执行函数。
2.1.3计算属性 vs WatchedProperty
Vue.js 提供了一个方法
$watch
,它用于观察 Vue 实例上的数据变动。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch
回调。2.1.4计算setter
计算属性默认只有一个getter,也可以提供一个setter
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
2.2观察Watchers
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过
watch
选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。最新文章
- *POJ1830 高斯消元
- 浏览器-07 chromium 渲染1
- CSS篇
- python代码优化---就喜欢细节
- 我的Logo设计简史
- [转]JS中对象与字符串的互相转换
- linux中touch命令参数修改文件的时间戳(转)
- 蓝桥杯 ALGO-108	最大体积 (动态规划)
- 05文件与IO
- 今天学习image在html中的应用
- tarjan 算法讲解(转)
- hdoj 1201 18岁生日
- POJ1251 Jungle Roads 【最小生成树Prim】
- 扩展方法之ToDictionary()
- 转: 【Java并发编程】之十三:生产者—消费者模型(含代码)
- OC学习6——面相对象的三大特性
- Android内嵌PDF预览
- Spark RDD、DataFrame原理及操作详解
- kali 创建快捷方式的方法
- Java匿名内部类的继承者、终结者————lambda表达式