← 返回首页

Vue 笔记

学习 Vue 1.x 时的一些笔记。

发布 2016年5月14日 标签 #javascript #vue

~/posts/vue-guide $ cat post.md

/ 语言 EN / 中文
/ 主题 / /

Vue 01

  • v-if-else：v-if、v-else、v-else-if 都可以写在标签的声明里。条件成立时渲染，否则不渲染。 可以用在登录页之类按时间区分的场景。

  • v-on：事件处理器

    • 比如 v-on:keyup="txtKeyup($event)"。
    • keyup 的处理函数里可以读 this.srcElement.tagName、id、innerHtml，配合 event.key ? event.key : "" 打印出按下的键。

  • 命名上习惯用匈牙利命名法，比如 btnOK。

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

  • computed 和 data、method 是同一类东西，模板里 {{ priceInTax }} 就能取到计算结果。

    • 读 priceInTax 走 get，写 priceInTax 走 set。

  • watch

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

（API 风格借鉴自 Angular。）

Vue 02

  • 表单控件绑定 v-model

    • 多个 input 绑到同一个 array，可以实现复选框。

  • 元素显示 v-show

    • 控制元素是否显示。
    • 例：v-show="result"，result 为 true 时显示，否则隐藏。
    • v-show 隐藏的元素仍然留在 DOM 中。
      • 相对地，v-if/v-else-if 只会渲染要显示的那一支。

Vue 03 — 单选框

  • radio 是单选控件。两个 radio input 共用同一个 v-model 时，选中一个会自动取消另一个，被选中的会把对应 value 写回 model。

下拉框

  • 下拉框可以在标签上加 multiple 来支持按 ctrl 复选，体验一般。
  • 普通情况下用 v-model 绑定一个 array 就够了。

组件

通过 Vue 构造器传入的选项大多数也能用在组件里。data 是个例外，它必须是函数。

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

上面这种写法是错的。下面这种也有问题：

var data = { counter: 0 };
Vue.component("simple-counter", {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    // 技术上 data 是函数了，Vue 不会警告，
    // 但每个组件实例引用的还是同一个 data 对象。
    data: function () {
        return data;
    },
});

切换 router 时原来的组件确实被销毁了，每次挂载都会走 ready 生命周期。但 setInterval 本身和组件无关——它是组件申请的一种资源，进入时申请、离开时释放，这个过程要自己来。所以 clearInterval 应当放在 router 的 deactivate 或 beforeDestroy 里。

很多框架都是这种模式。比如桌面程序里某个窗口初始化时打开数据库连接（也是一种资源），关闭窗口时框架本身不知道”打开数据库连接”的反向操作是什么，需要在窗口销毁的回调里手动断开。

← 返回首页