Vue双向数据绑定 Vue事件介绍以及Vue中的ref获取dom节点

╰半夏微凉° 2022-03-25 09:50 220阅读 0赞

### Vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 ###

这是所有的代码，注释做的都很详细

<template>
    
    
      <div id="app">
        <h3>{
       {msg}}</h3> 
        <br>
    
        <input type="text" v-model="msg" />
        <button v-on:click="getMsg()">获取表单里的数据get</button>
        <button v-on:click="setMsg()">设置表单的数据set</button>
        <br>
        <hr>
    
        <input type="text" ref="uid"/>  
        <br>
        <br>
        <div ref="box">我是一个box</div> 
        <br>
        <br>
        <button v-on:click="getinputValue()">获取第二个表单里的数据</button>
      </div>
    </template>
     
    <script> /* 双向数据绑定 MVVM vue就是一个MVVM的框架。 M model V view MVVM： model改变会影响视图view，view视图改变反过来影响model 双向数据绑定必须在表单里面使用。 */ export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '这里是个vue', // msg: "这里是vue" 这里单引号和双引号是一样的结果 } }, methods:{ //这里是放方法的地方 getMsg(){ //alert('验证一下有没有获取到数据'); alert(this.msg);// 获取到data里面的数据 }, setMsg(){ this.msg='这里是改变后的数据'; //手动设置了msg的值为 '这里是改变后的数据' }, getinputValue(){ console.log(this.$refs.uid); alert(this.$refs.uid.value); //在这里用$refs 来获取dom节点 获取其value值 this.$refs.box.style.background='red'; //使用$refs 来指定样式背景为红色 } } } </script>
    
    <style> </style>

这是总的运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]

--------------------

再来看看部分代码的运行效果

<template>
    
      <div id="app">
        <h3>{
       {msg}}</h3> 
        <br>
    
        <input type="text" v-model="msg" />
        <button v-on:click="getMsg()">获取表单里的数据get</button>
      
      </div>
    </template>
     
    <script> /* 双向数据绑定 MVVM vue就是一个MVVM的框架。 M model V view MVVM： model改变会影响视图view，view视图改变反过来影响model 双向数据绑定必须在表单里面使用。 */ export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '这里是个vue', // msg: "这里是vue" 这里单引号和双引号是一样的结果 } }, methods:{ //这里是放方法的地方 getMsg(){ alert('验证一下有没有获取到数据'); } } } </script>
    
    <style> </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
model实现双向绑定，在input中写入的value值也影响了msg数据里的值，因为model绑定了’msg’

--------------------

<template>
    
    
      <div id="app">
        <h3>{
       {msg}}</h3> 
        <br>
    
        <input type="text" v-model="msg" />
        <button v-on:click="getMsg()">获取表单里的数据get</button>
      
      </div>
    </template>
     
    <script> /* 双向数据绑定 MVVM vue就是一个MVVM的框架。 M model V view MVVM： model改变会影响视图view，view视图改变反过来影响model 双向数据绑定必须在表单里面使用。 */ export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '这里是个vue', // msg: "这里是vue" 这里单引号和双引号是一样的结果 } }, methods:{ //这里是放方法的地方 getMsg(){ //alert('验证一下有没有获取到数据'); alert(this.msg);// 获取到data里面的数据 } } } </script>
    <style> </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]

若有疑问或是不解请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/bd840a326d7d4374a91c54d07780b196.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/e9e14a04bf9c40c9822ae36b1dd995f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]: /images/20220325/d51483f5c1ee4bf2ad6d0f7f7cc27a0d.png