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("数据已更新"); }

其中：