vue.js

一套用于构建用户界面的渐进式框架。

官方教程：https://cn.vuejs.org/v2/guide/
在线编辑：https://codepen.io/pen

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

Vue模版语法

插值

• 文本：<span>{{ msg }}</span>
• 只执行一次插值，后续不随对象改变：<span v-once>{{ msg }}</span>
• 插入html标签：<span v-html="msg"></span>
• 特性（html标签上的属性）：<div v-bind:id="msg"></div>
• JavaScript 表达式（不能访问用户创建的全局变量）：{{ msg ? 'YES' : 'NO' }}

指令

• v-if 让Vue判断是否加载此标签：<p v-if="boolean">现在你看到我了</p>
• v-bind 可以传参到url：<a v-bind:href="url"></a>
• v-on 用于监听DOM事件：<a v-on:click="doSomething"></a>
• 动态参数 方括号内写 JavaScript 表达式，不可有null或引号或空格：
  <a v-bind:[attributeName]="url"></a>
  <a v-on:[eventName]="doSomething"></a>
• 指令修饰符 "."：
  .prevent 告诉 v-on 指令对于触发的事件调用 event.preventDefault()
  如：<form v-on:submit.prevent="onSubmit"></form>

缩写

Vue对于常用的 v-bind 和 v-on 提供了缩写，并且官网声称支持Vue的浏览器都会支持这种写法：

• v-bind = : 如：
  <a v-bind:href="url">完整语法</a>
  <a :href="url">缩写</a>
• v-on = @ 如：
  <a v-on:click="doSomething">完整语法</a>
  <a @click="doSomething">缩写</a>

---

计算属性 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库，有兴趣可以看看官网的例子
监听器主要是有特殊情况，需要自定义监听器时使用，其实大多时候可以用计算属性就能解决。

版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜