不是专业的前端开发但因为E2E开发和架构设计的需要必须对前端框架有一些了解。这两年项目前端在用vue就记录一下vue的使用心得。vue心得componentcomponent vue组件可在其中完成界面呈现V逻辑处理MC。也可以接收父组件传过来的props作为公共页面使用。一般在里引用component即可呈现该组件像这样templatedividapplayoutrepair-plan/repair-planbutton编辑/buttonbutton保存/buttonbutton评审/buttonbutton发布/button/layout/div/templaterest调用使用axios我们的项目对axios做了一层封装。的含义有几种含义import里的别名指向src目录 放在事件名前表示事件响应方法比如input组件的input方法能够获取input输入的值。绑定冒号的含义单向绑定相当于v-bind例如buttonclasstable-button:loadingexportLoadingclickexportExcel{{t(button.export)}}/button表示button组件的loading属性动态绑定exportLoading变量exportLoading变量发生变化按钮的呈现就会不同即数据流向是从model层流向view层 。v-model双向绑定冒号或v-bind是model-view的单向绑定要双向绑定用v-model。双向绑定的原理其实就是“v-bindview层绑定事件监听”。数据绑定原理核心是Object.defineProperty()这个函数提供了元编程的能力类似于python里的setattr和java里的反射。一个例子如下letobj{name:bibi,sex:male,age_:18//age_作为age的隐藏字段};console.log(obj.age);Object.defineProperty(obj,age,{//访问obj.age就会触发get方法get(){console.log(age getter called)returnobj.age_;},//设置obj.age就会触发set方法set(newVal){console.log(age setter called);// 直接设置obj.age会造成死循环所以我们存在age_隐藏字段里obj.age_newVal;},enumerable:true,})obj.age20;console.log(obj.age);打印结果为undefined age setter called age getter called 20可见Object.defineProperty能捕获一个对象的setter和getter事件。当我们修改一个对象的属性时setter事件触发就可以在其中做一些事情比如更新视图。vue的v-bind机制就是这个原理术语叫数据劫持。angularJS的数据绑定原理与vue不同用的是脏数据检测感兴趣的参考这里。数据绑定意义重大它真正体现了数据驱动开发控制器完全与视图分离而不必关心视图的展现。响应式数据ref和reactive都用于创建界面关联的响应式数据功能上两者是等价的只是访问方式不一样。ref 得到的是一个引用对象必须用.value才能访问其值。当对.value赋值时相当于替换了整个对象。reactive 常用于对象比如代表一个对话框的所有字段。不支持替换整个对象。我们常常看到基本类型用ref包装成一个对象这是为什么呢因为非如此vue无法感知基本类型的变化基本类型是值类型也就无法去更新界面了。你可能有疑问实际当中数组类型也常用ref包装。这是因为如果数组用reactive包装当你从后台获得一个新数组想直接覆盖旧数组reactive就会失效前面讲的reactive不支持替换整个对象用ref就不会有这个问题了。vue组件的内置方法data()方法返回待绑定的数据供v-model或v-bind使用。created()和mounted()方法简言之created在模板渲染成DOM前调用mounted则在模板渲染成DOM后调用。因此mounted函数里是可以访问DOM树节点的而created里则不行。vue组件的methods属性使用methods属性来给Vue组件设置自定义方法。Vue对象ref为DOM节点加上ref属性就可以在vue里直接访问DOM节点了这样写this.$refs.xxxRef.attrxxxRef是DOM的ref属性名。js语法delete操作符从对象中移除一个属性注意是从对象里删除掉这个属性而非把属性值设为null或undefined。对象展开运算符{… obj}表示展开对象obj的所有可遍历属性。等价于lua的unpack。常见问题$t在某些控件属性里不生效比如el-table-column 的 label 属性是一个普通 HTML 属性需要使用 v-bind 指令或简写为 :来绑定表达式这样 $t 函数才能正确执行el-table :datarecentAlarms stylewidth: 100% el-table-column :label$t(alarm.time) propalarmTime width180不能写成普通属性的字符串插值形式el-table-column label{{$t(alarm.time)}} propalarmTime width180el-form验证required异常el-form里的el-form-item有个prop属性它指向el-form的model对象的某个属性即model对象必须包含这个属性不然框架会认为el-form-item的值没填从而不停的报required错误。该异常情形在动态表单里很容易出现。
vue心得
不是专业的前端开发但因为E2E开发和架构设计的需要必须对前端框架有一些了解。这两年项目前端在用vue就记录一下vue的使用心得。vue心得componentcomponent vue组件可在其中完成界面呈现V逻辑处理MC。也可以接收父组件传过来的props作为公共页面使用。一般在里引用component即可呈现该组件像这样templatedividapplayoutrepair-plan/repair-planbutton编辑/buttonbutton保存/buttonbutton评审/buttonbutton发布/button/layout/div/templaterest调用使用axios我们的项目对axios做了一层封装。的含义有几种含义import里的别名指向src目录 放在事件名前表示事件响应方法比如input组件的input方法能够获取input输入的值。绑定冒号的含义单向绑定相当于v-bind例如buttonclasstable-button:loadingexportLoadingclickexportExcel{{t(button.export)}}/button表示button组件的loading属性动态绑定exportLoading变量exportLoading变量发生变化按钮的呈现就会不同即数据流向是从model层流向view层 。v-model双向绑定冒号或v-bind是model-view的单向绑定要双向绑定用v-model。双向绑定的原理其实就是“v-bindview层绑定事件监听”。数据绑定原理核心是Object.defineProperty()这个函数提供了元编程的能力类似于python里的setattr和java里的反射。一个例子如下letobj{name:bibi,sex:male,age_:18//age_作为age的隐藏字段};console.log(obj.age);Object.defineProperty(obj,age,{//访问obj.age就会触发get方法get(){console.log(age getter called)returnobj.age_;},//设置obj.age就会触发set方法set(newVal){console.log(age setter called);// 直接设置obj.age会造成死循环所以我们存在age_隐藏字段里obj.age_newVal;},enumerable:true,})obj.age20;console.log(obj.age);打印结果为undefined age setter called age getter called 20可见Object.defineProperty能捕获一个对象的setter和getter事件。当我们修改一个对象的属性时setter事件触发就可以在其中做一些事情比如更新视图。vue的v-bind机制就是这个原理术语叫数据劫持。angularJS的数据绑定原理与vue不同用的是脏数据检测感兴趣的参考这里。数据绑定意义重大它真正体现了数据驱动开发控制器完全与视图分离而不必关心视图的展现。响应式数据ref和reactive都用于创建界面关联的响应式数据功能上两者是等价的只是访问方式不一样。ref 得到的是一个引用对象必须用.value才能访问其值。当对.value赋值时相当于替换了整个对象。reactive 常用于对象比如代表一个对话框的所有字段。不支持替换整个对象。我们常常看到基本类型用ref包装成一个对象这是为什么呢因为非如此vue无法感知基本类型的变化基本类型是值类型也就无法去更新界面了。你可能有疑问实际当中数组类型也常用ref包装。这是因为如果数组用reactive包装当你从后台获得一个新数组想直接覆盖旧数组reactive就会失效前面讲的reactive不支持替换整个对象用ref就不会有这个问题了。vue组件的内置方法data()方法返回待绑定的数据供v-model或v-bind使用。created()和mounted()方法简言之created在模板渲染成DOM前调用mounted则在模板渲染成DOM后调用。因此mounted函数里是可以访问DOM树节点的而created里则不行。vue组件的methods属性使用methods属性来给Vue组件设置自定义方法。Vue对象ref为DOM节点加上ref属性就可以在vue里直接访问DOM节点了这样写this.$refs.xxxRef.attrxxxRef是DOM的ref属性名。js语法delete操作符从对象中移除一个属性注意是从对象里删除掉这个属性而非把属性值设为null或undefined。对象展开运算符{… obj}表示展开对象obj的所有可遍历属性。等价于lua的unpack。常见问题$t在某些控件属性里不生效比如el-table-column 的 label 属性是一个普通 HTML 属性需要使用 v-bind 指令或简写为 :来绑定表达式这样 $t 函数才能正确执行el-table :datarecentAlarms stylewidth: 100% el-table-column :label$t(alarm.time) propalarmTime width180不能写成普通属性的字符串插值形式el-table-column label{{$t(alarm.time)}} propalarmTime width180el-form验证required异常el-form里的el-form-item有个prop属性它指向el-form的model对象的某个属性即model对象必须包含这个属性不然框架会认为el-form-item的值没填从而不停的报required错误。该异常情形在动态表单里很容易出现。
