绑定事件

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

  1. <template>
  2.   <div>
  3.       <input type="text" v-model="xinshou" />
  4.       <div>{{xinshou}}</div>
  5.   </div>
  6. </template>
  7. <script>
  8.   //export default命令，为模块指定默认输出
  9.   export default{
  10.       //data()存放数据：交互数据
  11.       data(){
  12.          return{
  13.            xinshou:"新手1314",
  14.       }
  15.   }
  16. </script>

2.v-once:只渲染一次

  1. <template>
  2.   <div>
  3.       <input type="text" v-model="nums" />
  4.       <div>{{nums}}</div>
  5.       <div v-once>{{nums}}</div>
  6.   </div>
  7. </template>
  8. <script>
  9.   //export default命令，为模块指定默认输出
  10.   export default{
  11.       //data()存放数据：交互数据
  12.       data(){
  13.          return{
  14.            nums:"测试",
  15.       }
  16.   }
  17. </script>

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

  1. <template>
  2.   <div>
  3.       <input type="text" v-model="nums" />
  4.       <div>{{nums}}</div>
  5.       <div v-text>{{nums}}</div>
  6.   </div>
  7. </template>
  8. <script>
  9.   //export default命令，为模块指定默认输出
  10.   export default{
  11.       //data()存放数据：交互数据
  12.       data(){
  13.          return{
  14.            nums:"测试",
  15.       }
  16.   }
  17. </script>

4.v-html:html元素实现

  1. <template>
  2.   <div>
  3.       <div v-html="text"></div>
  4.   </div>
  5. </template>
  6. <script>
  7.   //export default命令，为模块指定默认输出
  8.   export default{
  9.       //data()存放数据：交互数据
  10.       data(){
  11.          return{
  12.            text:"<h2 style='color:red'>新手1314</h2>",
  13.       }
  14.   }

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

  1. <template>
  2.   <div>
  3.       <div v-pre>{{nums}}</div>
  4.   </div>
  5. </template>
  6. <script>
  7.   //export default命令，为模块指定默认输出
  8.   export default{
  9.       //data()存放数据：交互数据
  10.       data(){
  11.          return{
  12.            nums:"测试",
  13.       }
  14.   }
  15. </script>

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

  1. <template>
  2.   <div>
  3.       <a v-bind:href="url">php中文网</a>
  4.       <br />
  5.       <a v-bind:href="urls" style="style">欧阳克老师的博客</a>
  6.   </div>
  7. </template>
  8. <script>
  9.   //export default命令，为模块指定默认输出
  10.   export default{
  11.       //data()存放数据：交互数据
  12.       data(){
  13.          return{
  14.            url:"https://www.php.cn",
  15.            url:"http://www.ouyangke.com",
  16.            style:"color:red",
  17.       }
  18.   }
  19. </script>

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

  1. <template>
  2.   <div>
  3.       <button v-on:click="funs1()">按钮1</button>
  4.       <button v-on:click="funs2('新手1314')">按钮2</button>
  5.       <button v-on:click="funs3('按钮三的值',1)">按钮3</button>
  6.       <button v-on:click="funs3('按钮四的值',2)">按钮4</button>
  7.       //语法糖
  8.       <button @click="funs3('按钮五的值',2)">按钮5</button>
  9.   </div>
  10. </template>
  11. <script>
  12.   //export default命令，为模块指定默认输出
  13.   export default{
  14.       //methods:存放方法：js方法
  15.       methods{
  16.          funs1(){
  17.             console.log("事件1");
  18.          },
  19.          funs2(e){
  20.             console.log(e);
  21.          },
  22.          funs3(e,ee){
  23.             if(ee===1){
  24.                alert{e};
  25.             }else{
  26.                 alert{e};
  27.             }
  28.          },
  29.       }
  30.   }
  31. </script>

7.1 点击隐藏与显示事件

  1. <template>
  2.   <div>
  3.      <button @click="show()">显示</button>
  4.      <button @click="hide()">隐藏</button>
  5.      <div :class="is">这是测试的文本</div>
  6.   </div>
  7. </template>
  8. <script>
  9.   export default{
  10.      data{
  11.        return{
  12.          is:"is",
  13.        }
  14.      },
  15.      methods{
  16.         show{
  17.           this.is = "show";
  18.         },
  19.         hide{
  20.           this.is ="hide";
  21.         },
  22.      }
  23.   }
  24. </script>
  25. <!--Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性-->
  26. <style lang="scss">
  27.   .show{
  28.     display:block;
  29.   }
  30.   .hide{
  31.    display:none;
  32.   }
  33. </style>

8.stop:阻止事件冒泡

  1. <template>
  2.    <div>
  3.       <div @click="one()">
  4.       这是第一层
  5.          <div @click.stop="two()">
  6.          这是第二层stop事件
  7.             <div @click.stop="three()">这是第三层stop事件</div>
  8.          </div>
  9.       </div>
  10.    </div>
  11. </template>
  12. <script>
  13.   export default{
  14.     methods{
  15.       one(){
  16.           console.log("这是第一层的显示");
  17.       },
  18.       two(){
  19.           console.log("这是第二层的显示");
  20.       },
  21.       three(){
  22.           console.log("这是第三层的显示");
  23.       },
  24.     }
  25.   }
  26. </script>

9.流程：v-if

  1. <template>
  2.   <div>
  3.       <button @click="ceshi()">{{message}}</button>
  4.       <div v-if="iste">新手1314</div>
  5.        <!--v-show指令的作用是：根据切换元素的显示状态 -->
  6.       <div v-show="iste">新手1314</div>
  7.   </div>
  8. </template>
  9. <script>
  10.   export default{
  11.      data{
  12.         return{
  13.            iste:true,
  14.            message:"隐藏",
  15.         }
  16.      },
  17.      methods{
  18.         ceshi(){
  19.            this.iste = !this.iste;
  20.            if(this.iste===true){
  21.               this.message ="隐藏";
  22.            }else{
  23.               this.message="显示";
  24.            }
  25.         }
  26.      }
  27.   }
  28. </script>