vue.js

#vue.js| 来源: 网络整理| 查看: 265

一、表单基本操作

都是通过v-model

单选框1、两个单选框需要同时通过v-model 双向绑定一个值 2、每一个单选框必须要有value属性且value值不能一样 3、当某一个单选框选中的时候 v-model 会将当前的 value值改变 data 中的数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了男女 new Vue({ el: '#app', data: { // 默认会让当前的 value 值为 2 的单选框选中 gender: 1, }, })

复选框

复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组否则无法实现多选1、复选框需要同时通过v-model 双向绑定一个值 2、每一个复选框必须要有value属性且value值不能一样 3、当某一个单选框选中的时候 v-model 会将当前的 value值改变 data 中的数据 hobby 的值就是选中的值，我们只需要实时监控他的值就可以了爱好：篮球唱歌写代码 new Vue({ data: { // 默认会让当前的 value 值为 2 和 3 的复选框选中 hobby: ['2', '3'], }, })

下拉框和文本框

职业：请选择职业... 教师软件工程师律师 new Vue({ data: { // 默认会让当前的 value 值为 2 和 3 的下拉框选中 occupation: ['2', '3'], desc: 'nihao' }, }) 表单域修饰符

.number 将值转换为数值类型

如过输入以数字开头的值，后面有夹杂非数组形式的字符串（如字母中文和其他符号）的话，属性值得到则是第一个非数字部分前面的所有数字。如果输入的值以字符串开头，则无法转换成数字。

.trim 自动过滤用户输入的首尾空白字符

只能去掉首尾的，不能去除中间的空格

.lazy 将input事件切换成change事件

.lazy修饰符延迟了同步更新属性值的时机。将v-model原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。在失去焦点或者按下回车键时才更新二、自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令 // 注意点： // 1、在自定义指令中如果以驼峰命名的方式定义如 Vue.directive('focusA',function(){}) // 2、在HTML中使用的时候只能通过 v-focus-a 来使用 // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。其中 el为dom元素 inserted: function (el) { // 聚焦元素 el.focus(); } }); new Vue({ 　　el:'#app' }); Vue.directive 注册全局指令带参数

binding对象的name属性对应自定义指令的名称，value属性对应自定义指令的值

/* 自定义指令-带参数 bind - 只调用一次，在指令第一次绑定到元素上时候调用 */ Vue.directive('color', { // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 // el 为当前自定义指令的DOM元素 // binding 为自定义的函数形参通过自定义属性传递过来的值存在 binding.value 里面 bind: function(el, binding){ // 根据指令的参数设置背景色 // console.log(binding.value.color) el.style.backgroundColor = binding.value.color; } }); var vm = new Vue({ el: '#app', data: { msg: { color: 'blue' } } }); 自定义指令局部指令局部指令，需要定义在 directives 的选项用法和全局用法一样局部指令只能在当前组件里面使用当全局指令和局部指令同名时以局部指令为准 /* 自定义指令-局部指令 */ var vm = new Vue({ el: '#app', data: { msg: { color: 'red' } }, //局部指令，需要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } } }); 三、计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板更加的简洁computed: { reversedMessage: function () { return this.msg.split('').reverse().join('') } } 计算属性是基于它们的响应式依赖（data）进行缓存的，只要data中的数据（我们使用的值）没有发生变化，就不会再进行一次计算。而用方法实现的化是调用一次就执行一次。因此有时使用计算属性相对耗时的计算可以节省一些性能。computed比较适合对多个变量或者对象进行处理后返回一个结果值，只有当多个变量中的某一个值发生了变化，我们监控的返回值才就会发生变化（才会再次进行计算） {{reverseString}} {{reverseString}} {{reverseMessage()}} {{reverseMessage()}} /* 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存 */ var vm = new Vue({ el: '#app', data: { msg: 'Nihao', num: 100 }, methods: { reverseMessage: function(){ console.log('methods') return this.msg.split('').reverse().join(''); } }, //computed 属性定义和 data 已经 methods 平级 computed: { // reverseString 这个是我们自己定义的名字 reverseString: function(){ console.log('computed') var total = 0; // 当data 中的 num 的值改变的时候 reverseString 会自动发生计算 for(var i=0;i

【本文地址】

vue.js

vue.js

今日新闻

推荐新闻