view ...">

vuejs1.x 笔记合集

vuejs1.x 的笔记都整合到这里了。

# vuejs1.x 中的过滤器高级用法

当过滤器用于 model 时,需要考虑回填的现象。

默认情况下,过滤之后的新值会回填到 data 中,有时后我们需要对回填的值做处理,参考以下代码(引用自官方文档):

Vue.filter("currencyDisplay", {
  // model -> view
  // 在更新 `<input>` 元素之前格式化值
  read: function(val) {
    return "$" + val.toFixed(2);
  },
  // view -> model
  // 在写回数据之前格式化值
  write: function(val, oldVal) {
    var number = +val.replace(/[^\d.]/g, "");
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2));
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 发现的问题(疑似 bug)

当第一次 data 赋值,过滤器不会将过滤之后的新值回填,当重新输入 input 内容,model 修改时,data 被赋予过滤之后的值。

# vuejs1.x 中定义异步组件实例

官方文档中描述得不是很详细。这里做个笔记。

<div id="full">
  <home></home>
</div>
1
2
3
// 定义异步组件,主页
Vue.component("home", function(resolve, reject) {
  $.ajax({
    url: "main.html",
    dataType: "text",
    type: "get",
    success: function(html) {
      resolve({
        template: html,
        ready: function() {},
      });
    },
  });
});

var full = new Vue({
  el: "#full",
  ready: function() {},
  data: {
    isLogin: true,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22