VueJs(4)---V-model指令

发布日期：2021-05-09 06:02:37 浏览次数：19 分类：博客文章

本文共 5294 字，大约阅读时间需要 17 分钟。

V-model指令

摘要

限制：

v-model只能用在：<input> <select> <textarea> <components>

修饰符

- 取代 input 监听 change 事件

- 输入字符串转为数字

- 输入首尾空格过滤

基础用法

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

Message is: {{ message }}

Multiline message is:{{ message }}

单个复选框，绑定到布尔值

{{ checked }}

多个复选框，绑定到同一个数组


      
       
     Jack  
       
     John  
       
     Mike  
     
  
     Checked names: {{ checkedNames }}
    
new Vue({  el: '#example-3',  data: {    checkedNames: []  }})


      
       
     One  
     
  
       
     Two  
     
  
     Picked: {{ picked }}

单选时


      
       
     Selected: {{ selected }}
    
new Vue({  el: '#example-5',  data: {    selected: ''  }})

注意：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

多选时 (绑定到一个数组)


      
       
     
  
     Selected: {{ selected }}
    
new Vue({  el: '#example-6',  data: {    selected: []  }})

用 v-for 渲染的动态选项

Selected: {{ selected }}new Vue({  el: '...',  data: {    selected: 'A',    options: [      { text: 'One', value: 'A' },      { text: 'Two', value: 'B' },      { text: 'Three', value: 'C' }    ]  }})

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

思考：有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

讲这个前，首先我们要明白的是：

看了上面我们就明白，父主键是无法直接向子主键传值的，它其实绑定了父主键的click事件。

所以要让组件的 v-model 生效，它应该 (从 2.2.0 起是可配置的)：

接受一个 value prop

在有新的值时触发 input 事件并将新值作为参数

案例：

货币输入的自定义控件，限制最多小数点保留两位


     Vue.component('currency-input', {  template: '\    \      $\      
     
      \    
     \  ',  props: ['value'],  methods: {    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制    updateValue: function (value) {      var formattedValue = value        // 删除两侧的空格符        .trim()        // 保留 2 位小数        .slice(          0,          value.indexOf('.') === -1            ? value.length            : value.indexOf('.') + 3        )      // 如果值尚不合规，则手动覆盖为合规的值      if (formattedValue !== value) {        this.$refs.input.value = formattedValue      }      // 通过 input 事件带出数值      this.$emit('input', Number(formattedValue))    }  }})

最后结果，就你可以没有小数，但如果有小数后面最后只能有两位小数

上面案例我理解的：

slice方法

ref ($refs)用法

ref 有三种用法

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3.如何利用v-for 和ref 获取一组数组或者dom 节点

一、ref使用在外面的组件上

HTML 部分


        
         
         
     ref在外面的组件上

js部分

var refoutsidecomponentTem={        template:"
    
     我是子组件
    
"    };    var  refoutsidecomponent=new Vue({        el:"#ref-outside-component",        components:{            "component-father":refoutsidecomponentTem        },        methods:{            consoleRef:function () {                console.log(this); // #ref-outside-component     vue实例                console.log(this.$refs.outsideComponentRef);  // div.childComp vue实例            }        }    });

二、ref使用在外面的元素上

HTML部分


    
       
        
        
     ref在外面的元素上

JS部分

var refoutsidedomTem={        template:"
    
     我是子组件
    
"    };    var  refoutsidedom=new Vue({        el:"#ref-outside-dom",        components:{            "component-father":refoutsidedomTem        },        methods:{            consoleRef:function () {                console.log(this); // #ref-outside-dom    vue实例                console.log(this.$refs.outsideDomRef);  //    ref在外面的元素上
            }        }    });

三、ref使用在里面的元素上---局部注册组件

HTML


    
        
         
         
     ref在里面的元素上

JS部分

var refinsidedomTem={        template:"
    
     " +                       "
     我是子组件
" +                  "
    
",        methods:{            consoleRef:function () {                console.log(this);  // div.childComp   vue实例                 console.log(this.$refs.insideDomRef);  // 我是子组件
            }        }    };    var  refinsidedom=new Vue({        el:"#ref-inside-dom",        components:{            "component-father":refinsidedomTem        }    });

四、ref使用在里面的元素上---全局注册组件

HTML

JS部分

Vue.component("ref-inside-dom-quanjv",{        template:"
    
      " +                    "
     " +                    "  
     ref在里面的元素上--全局注册 
 " +                  "
    
",        methods:{            showinsideDomRef:function () {                console.log(this); //这里的this其实还是div.insideFather                console.log(this.$refs.insideDomRefAll); //             }        }    });    var refinsidedomall=new Vue({        el:"#ref-inside-dom-all"    });

$emit理解

关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

子组件：

父组件

结果为：toCity: 大连

在找个例子：

            
                            
                
     {{ total }}

先看组件 button-counter

绑定了事件click————>increment

然后 this.counter += 1; this.$emit('increment1',[12,'kkk']);

这边就是触发事件 increment1，参考文献里面有点乱，这边是不是清晰多了

然后 <button-counter v-on:increment1="incrementTotal"></button-counter>

v-on相当于监听吧，就触发 incrementTotal

输出// [12, "kkk"]

想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 中尉【13】

上一篇：VueJs(5)---V-bind指令

下一篇：VueJs(3)---V-指令(1)

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

V-model指令

摘要

基础用法

值绑定

修饰符

案例：

slice方法

ref ($refs)用法

一、ref使用在外面的组件上

我是子组件

二、ref使用在外面的元素上

我是子组件

三、ref使用在里面的元素上---局部注册组件

我是子组件

我是子组件

四、ref使用在里面的元素上---全局注册组件

$emit理解

发表评论

最新留言

关于作者

推荐文章