绑定事件练习

发布于：2022-05-15 13:38:20  栏目：技术文档

绑定事件

1.v-model：v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据

<template>
  <div>
      <input type="text" v-model="xinshou" />
      <div>{{xinshou}}</div>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           xinshou:"新手1314",
      }
  }
</script>

2.v-once:只渲染一次

<template>
  <div>
      <input type="text" v-model="nums" />
      <div>{{nums}}</div>
      <div v-once>{{nums}}</div>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           nums:"测试",
      }
  }
</script>

3.v-text:用于将数据填充到标签中(此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值)

<template>
  <div>
      <input type="text" v-model="nums" />
      <div>{{nums}}</div>
      <div v-text>{{nums}}</div>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           nums:"测试",
      }
  }
</script>

4.v-html:html元素实现

<template>
  <div>
      <div v-html="text"></div>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           text:"<h2 style='color:red'>新手1314</h2>",
      }
  }

5.v-pre: v-pre指令说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译

<template>
  <div>
      <div v-pre>{{nums}}</div>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           nums:"测试",
      }
  }
</script>

6.v-bind:绑定属性与其语法糖(绑定属性只能接受变量)：

<template>
  <div>
      <a v-bind:href="url">php中文网</a>
      <br />
      <a v-bind:href="urls" style="style">欧阳克老师的博客</a>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //data()存放数据：交互数据
      data(){
         return{
           url:"https://www.php.cn",
           url:"http://www.ouyangke.com",
           style:"color:red",
      }
  }
</script>

7.v-on:绑定事件（点击事件，键盘事件，回车键事件）与语法糖:@

<template>
  <div>
      <button v-on:click="funs1()">按钮1</button>
      <button v-on:click="funs2('新手1314')">按钮2</button>
      <button v-on:click="funs3('按钮三的值',1)">按钮3</button>
      <button v-on:click="funs3('按钮四的值',2)">按钮4</button>
      //语法糖
      <button @click="funs3('按钮五的值',2)">按钮5</button>
  </div>
</template>
<script>
  //export default命令，为模块指定默认输出
  export default{
      //methods:存放方法：js方法
      methods{
         funs1(){
            console.log("事件1");
         },
         funs2(e){
            console.log(e);
         },
         funs3(e,ee){
            if(ee===1){
               alert{e};
            }else{
                alert{e};
            }
         },
      }
  }
</script>

7.1 点击隐藏与显示事件

<template>
  <div>
     <button @click="show()">显示</button>
     <button @click="hide()">隐藏</button>
     <div :class="is">这是测试的文本</div>
  </div>
</template>
<script>
  export default{
     data{
       return{
         is:"is",
       }
     },
     methods{
        show{
          this.is = "show";
        },
        hide{
          this.is ="hide";
        },
     }
  }
</script>
<!--Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性-->
<style lang="scss">
  .show{
    display:block;
  }
  .hide{
   display:none;
  }
</style>

8.stop:阻止事件冒泡

<template>
   <div>
      <div @click="one()">
      这是第一层
         <div @click.stop="two()">
         这是第二层stop事件
            <div @click.stop="three()">这是第三层stop事件</div>
         </div>
      </div>
   </div>
</template>
<script>
  export default{
    methods{
      one(){
          console.log("这是第一层的显示");
      },
      two(){
          console.log("这是第二层的显示");
      },
      three(){
          console.log("这是第三层的显示");
      },
    }
  }
</script>

9.流程：v-if

<template>
  <div>
      <button @click="ceshi()">{{message}}</button>
      <div v-if="iste">新手1314</div>
       <!--v-show指令的作用是：根据切换元素的显示状态 -->
      <div v-show="iste">新手1314</div>
  </div>
</template>
<script>
  export default{
     data{
        return{
           iste:true,
           message:"隐藏",
        }
     },
     methods{
        ceshi(){
           this.iste = !this.iste;
           if(this.iste===true){
              this.message ="隐藏";
           }else{
              this.message="显示";
           }
        }
     }
  }
</script>

相关推荐