vue.js
一套用于构建用户界面的渐进式框架。
官方教程:https://cn.vuejs.org/v2/guide/
在线编辑:https://codepen.io/pen
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
Vue模版语法
插值
- 文本:{{ msg }}
- 只执行一次插值,后续不随对象改变:{{ msg }}
- 插入html标签:
- 特性(html标签上的属性):
- JavaScript 表达式(不能访问用户创建的全局变量):{{ msg ? ‘YES’ : ‘NO’ }}
指令
- v-if 让Vue判断是否加载此标签:
现在你看到我了
- v-bind 可以传参到url:
- v-on 用于监听DOM事件:
- 动态参数 方括号内写 JavaScript 表达式,不可有null或引号或空格:
<a v-bind:[attributeName]=“url”>
<a v-on:[eventName]=“doSomething”> - 指令修饰符 “.”:
.prevent 告诉 v-on 指令对于触发的事件调用 event.preventDefault()
如:
缩写
Vue对于常用的 v-bind 和 v-on 提供了缩写,并且官网声称支持Vue的浏览器都会支持这种写法:
- v-bind = : 如:
完整语法
缩写 - v-on = @ 如:
完整语法
<a @click=“doSomething”>缩写
计算属性 computed
其实Vue的模版语法中就可以写javascript表达式:
{{ message.split('').reverse().join('') }}
但是为了增强可读性与后期维护性,Vue实例还有更强大的"计算"属性:computed 。
var vm = new Vue({
el: '#example',
data: {message: 'Hello'},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
然后直接用 {{reversedMessage}}
就可以获取值,而且此计算方法内使用的message具有响应性,所以在控制台修改message值时,reversedMessage也会跟着修改。
**PS:计算属性是有缓存的。**就是说如果响应式依赖的值(上面例子的message)没有改变,那么多次调用统一计算属性,会获得第一次计算的结果。官方的解释是提高大量运算同一数值时的运算速度。所以,此计算属性带有一定监听的功能。
另外,以上讲的都是计算属性内的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]
}
}
}
这里是当主动执行:vm.fullName = 'willson H'
时,就会调用setter方法。
我感觉是多此一举,需求上如果需要修改fullName时多半是要修改firstName和lastName的,此时也会主动触发computed,手动添加个setter反而让Vue看起来更复杂。
方法属性 methods
可直接在花括号中调用
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
以上两个例子的计算结果是完全相同的, 计算属性是基于它们的响应式依赖进行缓存的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。方法属性则每次调用都会重新计算。
侦听属性 watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。意思就是当数据源发生变化时,都会调用监听属性内对应的方法。
<div id="div1">
城市:<input v-model="city">
整理:<p>{{cityStr}}</p>
</div>
var vm = new Vue({
el: '#div1',
data: {
city: '',
cityStr: ''
},
watch: {
city: function (val) {
if(val.indexOf('市')<0){
this.cityStr = val + '市'
}else{
this.cityStr = val
}
}
}
})
我举的例子比较简单,官网给的例子涉及了lodash工具库和axios http库,有兴趣可以看看官网的例子
监听器主要是有特殊情况,需要自定义监听器时使用,其实大多时候可以用计算属性就能解决。
版权声明:文章内容总结于网络,如侵犯到原作者权益,请与我联系删除或授权事宜