Vue Guide

2016-05-14

Vue 01

v-if-else:
- 这个就厉害了, v-if, v-else, v-else-if 都可以用,就写在tag的声明里即可
- 达成条件的就渲染,否则不渲染!
- 在llf里面用这个方法可以实现在登录页面里的时间设计.
v-on: 事件处理器
- v-keyup 比如说 v-on:keyup="txtKeyup($event)" 当然,这需要 jquery 的选择器支持
- keyup 的方法是用 this.srcElement.tagName, id, innerHtml 来输出, 同时可以用 event.key ? event.key : "" 来打印出按了那个键
匈牙利命名法 btnOK

Computed: {
      priceInTax: {
          get: function(){
              return this.price*1.08;
          },
          set: function(){
              this.price = value/1.08
          }
      }

}

计算属性总而言之就是和 data, method 是一样的 data 类型,在 html 声明 `` 就可以取得计算之后的值,和我们 llf 里面的 update 之类的方法其实效果相同!!!! 这个就太棒了!
- 获得 priceInTax 会走get, 赋值给 priceInTax 会走 set.
Watch

Watch: {
    price: function(newVal,oldVal){
        console.log(newVal,oldVal);
        this.priceInTax = Math.round(this.price*1.08);
        this.princeChinaRMB = Math.round(this.priceInTax/16.75)
    }
}

方法来源angular

Vue 02

表单控件绑定 v-model
- 这个不难，重点在于如果在 v-model 中多个对象绑定一个 array，既可以实现复选框
元素显示 v-show
- 标记是否显示html元素
- 简单例子： v-show=“result” 如果 result 是 true 即显示否则不显示！
- 重点是在 DOM 中 v-show 不显示的元素不会消失！！！
  - 相对来说 v-if-else-if， DOM 只会渲染应该显示的元素。

Vue 03- 单选框

这里的radio代表单选框，存在两个 radio 的 input 的情况下，选择其中一个就会取消选择另一个。选择其中一个就可以像所绑定的 v-model 中传递 value 的数据

下拉框

下拉框可以在 tag 中加入 multiple 来实现按住 ctrl 复选。体验不好
之后简单的将 DOM 用 v-model 和 array 绑定即可。

组件

通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。实际上，如果你这么做：

Vue.component('my-component', {
  template: '<span></span>',
  data: {
    message: 'hello'
  }
})

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1"></button>',
  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例的却引用了同一个data对象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

router切换时，原来的组件确实已经销毁了，你可以看到ready生命周期函数是每次都触发了的。你这里的问题不在于组件是否销毁，因为setInterval事件本身和组件没有关系。

setInterval相当于该组件申请的一种资源，在使用该组件时获取，在离开该组件时释放。这个过程只能是你手动进行的。所以你应该在离开该组件时，比如 route 的 deactivate 或者 beforeDestroy 生命周期函数里手动 clearInterval。

其实很多框架里都是这样，比如桌面程序中某个窗口初始化时需要打开数据库连接（我们也可以视为一种资源），当窗口关闭时，程序本身并不知道“打开数据库连接”的反向操作是什么。所以我们需要在窗口销毁的回调方法里手动去释放这个资源，去写断开连接的代码。

随便看看 :D