Vue.js学习笔记

MVVM架构

Vue.js采用MVVM（Model-View-ViewModel）架构，主要包括三层：

数据层（Model）：负责数据的存储和持久化

视图层（View）：负责数据的展示

控制器（ViewModel）：实现数据层和视图层的双向同步

通过简单的示例，可以快速理解Vue.js的基本工作原理。

表单修饰符

v-model是Vue.js的核心表单修饰符，用于实现表单数据与 Vue 实例的双向绑定。

简单输入：v-model.trim 可以控制输入的 trimming

单选框：通过v-model实现选项的加绑

多选框：multiple属性可用来设置多选

Checkbox：通过v-model实现复选框的绑定

自定义指令

自定义指令可以扩展Vue.js的功能，例如添加自定义的指令，如v-focus和v-color。


   
Vue.directive("focus", {
  inserted: function (e) {
    e.focus();
  }
});
   
Vue.directive("color", {
  bind: function (e, binding) {
    e.style.backgroundColor = binding.value.color;
  }
});
< input type="text" v-focus >
< input type="text" v-color="msg" class="txt" >

侦听器

侦听器（watch）用于在数据变化时执行回调函数，常用于实时反射数据变化。

章 节:
- created：初始化完成时触发
- mounted：.vue组件挂载完成时触发
- beforeUpdate：数据更新前触发
- updated：数据更新后触发
示例：
data() {
  return {
    fName: '',
    lName: '',
    aName: ''
  }
},
watch: {
  fName(val) {
    this.aName = this.lName + val;
  },
  lName(val) {
    this.aName = val + this.fName;
  }
},
methods: {}

计算属性

与侦听器不同，计算属性（computed）会对其依赖进行缓存，提高性能。

computed: {
  reverseStr() {
    return this.msg.split('').reverse().join('');
  }
},
methods: {
  reverseMsg() {
    return this.msg.split('').reverse().join('');
  }
}

过滤器

过滤器（filter）用于对数据格式化，可以用于输出简化显示。

< p >{msg | lower}
过滤器注册：
Vue.filter("lower", function (v) {
  return v.charAt(0).toLowerCase() + v.slice(1);
});
 结果将变为: 'school'

内置过滤器 toComputed 可用于转换类型：

{{ num | toComputed型 }}
重点在于，过滤器的执行顺序：第一个参数（name）要先传，然后是具体参数。

生命周期

Vue.js的生命周期方法完整清晰，便于在不同阶段执行逻辑。

mounted: function () {
   console.log("组件已挂载");
 },
 beforeUpdate: function () {
   console.log("数据更新前");
 },
 updated: function () {
   console.log("数据已更新");
 }

其中：