Vue使用总结
1,vue.js — v-cloak的使用
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none !important}一起用时,这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。
<style> [v-cloak]{display:none !important} </style>
不加时HTML 绑定 Vue实例,在页面加载时会闪烁
加上时,会隐藏.
2,vue.js — computed(计算属性)的使用
//计算属性 computed: { totalPrice :function(){ var total = 0;
for(var i=0;i<this.form.application.length;i++){
total+=this.form.application;
} return total?'$'+total:'';
}
如所示,在html中,我们只需要使用{{totalPrice}}这个计算属性就可以来表示最终的商品总额。我们不需要关注这个变量的数值变化,totalPrice这个变量的逻辑写在对应的computed计算属性中。
3,vue.js — rules(表单校验)的使用
自定义表单验证出坑: 1: validate/resetFields 未定义。 原因: 1:要验证的DOM,还没有加载出来。 2:有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式,不是你们想要的结果。 解决方法 1: 要验证的DOM,还没有加载出来。
this.ticketDialog = true; //对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 this.$nextTick(function() { this.$refs.ticketInfoForm.resetFields(); //that.$refs.editIndexForm.validateField('no'); })
2: 有可能this.$refs[ruleForm].validate()
方式不识别。需要使用: this.$refs.ruleForm.validate()
;
4,vue.js — Component(组件)的使用
http://www.cnblogs.com/moqiutao/p/8328931.html
注意:当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要
点击事件:@click.native="send" 写成:@click="send"无效
既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去!!!!!!!!!! !!! ! !! !
个人公众号《后端技术开发之路》,欢迎您关注!
如果您觉得我写还不过,请打赏下在下吧!【高木子】!