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库，有兴趣可以看看官网的例子
监听器主要是有特殊情况，需要自定义监听器时使用，其实大多时候可以用计算属性就能解决。
版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜