共同学习Vue.js --- Vue语法运用(一)

---

一、事件监听

v-on 事件监听

v-on 修饰符

• .stop 调用event.stopPropagation() ; 当在一个div中有两个以上的点击事件时,当点击元素下面的某个事件时,div元素上的点击事件总会被执行,当添加.stop修饰符时,就会阻止这样的事情发生.具体效果如图:
  
  添加.stop之后:
  
• .prevent : 调用event.preventDefault() 阻止默认事件
  如当在form表单中,设置submit提交按钮时,有时我们不希望form表单被自动提交,就可以使用.prevent 阻止默认事件,如下图
  
• .{keyCode | keyAlias} 只有当事件是从特定键触发时才会触发事件,比如当我们敲击键盘上的回车键Enter时,才会触发事件,如图所示:
  
• .once 只触发一次回调事件

二、条件判断

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

v-if、v-else-if、v-else

这三个指令与javaScript条件语句if、else、if类似

<div id="app">
  <h2 v-if="isShow">{
  {message}}</h2>
  <h2 v-else="isShow">{
  {name}}</h2>
</div>

<script src="../js/vue.js" ></script>
<script>
  const app = new Vue({
    
    el: '#app', // 用于挂载要管理的元素
    data: {
     // 定义数据
      message: 'Hello Vue',
      name: 'Hello World',
      isShow: true
    }
  })
</script>

条件渲染案例

需求: 当用户在登录的时候,可以切换使用用户账号登录还是邮箱地址登录

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input id="username" placeholder="用户账号" key="username">
  </span>
  <!-- 当key值不一致时,切换两个登录类型时,原先输入的内容会被清空,默认key是一致的,也就是说
   之前输入的内容再进行切换类型,原内容是不被清空的-->
  <span v-else>
    <label for="email">用户邮箱</label>
    <input id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script