Vue学习(4)---模板语法、指令、计算属性、侦听器
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
文本输出利用Mustache语法({{}}取值)
{{msg}} 将会被代替为数据对象data中msg属性的值(并且是插值处的内容会随着msg改变而改变)
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
举一些例子
html输出则使用v-html
属性绑定则使用v-bind
- 参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
比如 v-bind 可以绑定一些原有的属性 style href class 进而来动态的更新属性
v-on 可以绑定原生事件 点击 聚焦之类的操作
指令可以接收参数 v-bind: v-on: 都可以带一个参数
甚至可以携带一个动态参数 v-bind:[value]="xxxx"
实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
我们可以在{{}}中书写js表达式 当然v-bind:id="'value'+id" 这样也可以
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，而不能包含语句和流控制
- 修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
preventDefault是取消浏览器对当前事件的默认行为
有什么用?
比如 如果我们自己定义了组件 使用这个组件的时候 如果想要绑定浏览器的原生事件 (自定义组件绑定事件默认不是原生事件)
就可以使用修饰符解决这个问题
<comp v-on:click="handleClick"></comp> //自定义组件,这么写无效 无法绑定原生事件
<comp v-on:click.native="handleClick"></comp> //绑定了原生事件
- 缩写
有些使用频繁的指令 为他们提供了简写
v-bind缩写: v-on缩写@
计算属性
虽然我们可以在模板内部使用表达式来计算值 {{}}
<div>
{{"这是测试"+message}}
</div>
但是,这样其实加重了视图层的逻辑 为了减少复杂逻辑 应当使用计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
所以，对于任何复杂逻辑，你都应当使用计算属性。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性依赖于对应需要的普通属性,因此当普通属性改变时,计算属性重新计算,重新渲染到页面上
在计算属性中可以设置get,set函数
get函数类似于原来计算属性的定义 也要返回一个计算的值
而set函数可以帮我们更新普通属性
<div id="app">
{{fullName}}
<p>{{firstName}}</p>
<p>{{lastName}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
firstName:"57",
lastName:"one",
},
computed:{
fullName:{
get:function() {
return this.firstName+" "+this.lastName;
},
set:function(value){
console.log("change");
var arr=value.split(" ");
this.firstName=arr[0];
this.lastName=arr[1];
}
}
}
})
我们可以在控制台中改变计算属性fullName的值
同时也会改变 普通属性firstName与lastName的值(也就是改变值时候 调用了计算属性的set方法)
计算属性缓存vs方法
方法也可以达到这这样的效果,我们可以在{{}}调用函数来进行同样的效果显示
但是不同的使 方法在重新渲染时候 总会再一次执行该函数
而计算属性使依赖于对应的普通属性,如果这些普通属性没有发生变化，那么不会重新执行函数(计算属性对应的函数)
计算属性vs侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
正如侦听器字面意思 可以监听数据的变化
<script>
var vm=new Vue({
el:'#app',
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:28,
},
//利用侦听器
//内置缓存
watch:{
firstName:function() {
console.log("计算了一次");
this.fullName=this.firstName+" "+this.lastName;
},
lastName:function(){
console.log("计算了一次");
this.fullName=this.firstName+" "+this.lastName;
}
}
