1.vue.js的三种绑定关系

1.属性绑定

  • Mustache 语法不能在 HTML attribute 中使用，然而，可以使用 v-bind指令
  • 格式： v-bind:属性名=”Vue中data的属性名”

  • v-bind:属性名 简称 :属性名

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title></title>
    6.       <script src="https://unpkg.com/vue@next"></script>
    7.       <style>
    8.           button{
    9.               padding: 10px;
    10.               background-color: antiquewhite;
    11.               width: 200px;
    12.               font-size: 40px;
    13.               font-weight: 900;
    14.           }
    15.           .dred{
    16.               width: 100px;
    17.               height: 100px;
    18.               background-color: red;
    19.           }
    20.           .drgreen{
    21.               width: 100px;
    22.               height: 100px;
    23.               background-color: green;
    24.           }
    25.           .dryellow{
    26.               width: 100px;
    27.               height: 100px;
    28.               background-color: yellow;
    29.           }
    30.       </style>
    31.   </head>
    32.   <body>
    34.       <div id="dv01">
    35.           <div :class="dvstyle"></div>
    36.           <button v-on:click="changeColor">改变颜色</button>
    37.           <button v-bind:disabled="isdj">买部手机13 pro max</button>
    38.           <button v-on:click="change">改变状态</button>
    39.       </div>
    40.       <script>
    41.       var i=0;
    42.       //定义数据对象
    43.       const params={
    44.           data(){//数据源
    45.               return {
    46.                   isdj:true,
    47.                   dvstyle:"dryellow"
    48.               }
    49.           },
    50.           methods:{//函数集
    51.               change(){
    52.                   this.isdj=!this.isdj;
    53.               },
    54.               changeColor(){
    55.                   i++;
    56.                   var t=i%3;
    57.                   if(t==0){
    58.                       this.dvstyle="dred";
    59.                   }else if(t==1){
    60.                       this.dvstyle="drgreen";
    61.                   }else{
    62.                       this.dvstyle="dryellow";
    63.                   }
    64.               }
    65.           }
    66.       }
    67.       //实现绑定和渲染
    68.       Vue.createApp(params).mount('#dv01');
    69.       </script>
    70.   </body>
    71. </html>

    2.事件绑定

  • 使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些JavaScript

  • 常用事件： click dblclick change keyup
  • 在监听键盘事件时，Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符
  • 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title></title>
    6.       <script src="https://unpkg.com/vue@next"></script>
    7.       <style>
    8.       .dv2{
    9.           width: 30px;
    10.           height: 30px;
    11.           background-color: red;
    12.           position: relative;
    13.           left: 10px;
    14.           top: 10px;
    15.       }
    16.       </style>
    17.   </head>
    18.   <body>
    19.       <div id="dv01">
    20.           <h1 :style="style1" @click="crandom">你的幸运数字：{{num}}</h1>
    21.           <div><input v-model="name" @change="showName"></div>
    22.           <h1 @dblclick="sj">双击6666</h1>
    23.           <input @keyup.down="xy"  @keyup.up="sy"  @keyup.left="zy"  @keyup.right="yy"  class="dv2" :style="dvposition"></input>
    24.           <button @click="xy(),yy()">动起来</button>
    25.       </div>
    26.       <script>
    27.       function randomHexColor() { //随机生成十六进制颜色
    28.        var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
    29.        while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
    30.         hex = '0' + hex;
    31.        }
    32.        return '#' + hex; //返回‘#'开头16进制颜色
    33.       }
    34.       //定义数据函数对象--Model
    35.       const params = {
    36.         data() {
    37.           return {
    38.             num: 0,
    39.             style1:"background-color:red",
    40.             name:"",
    41.             lnum:10,
    42.             tnum:10,
    43.             dvposition:"left: 10px;top:10px"
    44.           }
    45.         },
    46.         methods:{
    47.             crandom(){
    48.                   this.num=Math.floor(Math.random()*10);
    49.                   this.style1="background-color:"+randomHexColor();
    50.             },
    51.             showName(){
    52.                 alert(this.name);
    53.             },
    54.             sj(){
    55.                 this.name="双击成功："+new Date().toLocaleTimeString()
    56.             },
    57.             sy(){
    58.                this.tnum-=10;
    59.                this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
    60.             },
    61.             xy(){
    62.                this.tnum+=10;
    63.                this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
    64.             },
    65.             zy(){
    66.                this.lnum-=10;
    67.                 this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
    68.             },
    69.             yy(){
    70.                this.lnum+=10;
    71.                this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
    72.             }
    73.         }
    74.       }
    75.       //将数据函数和标签对应绑定
    76.       Vue.createApp(params).mount('#dv01');
    77.       </script>
    78.   </body>
    79. </html>

    3.双向绑定

    用 v-model 指令在表单 、