Vue模板语法(下)

简介: Vue模板语法(下)

一、事件处理

1.1 监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="handler"@click="handler"

事件处理器 (handler) 的值可以是:

  • 内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
  • 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

这两种在前面的博客已经有体现

1.2 事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题,Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀,包含以下这些:

  • .stop
  • .prevent
  • .self
  • .capture
  • .once
  • .passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。因此使用@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为,而@click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

<!-- 添加事件监听器时,使用 `capture` 捕获模式 -->
<!-- 例如:指向内部元素的事件,在被内部元素处理前,先被外部处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应

请勿同时使用 .passive 和 .prevent,因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了,则.prevent 会被忽略,并且浏览器会抛出警告。

1.3 按键修饰符

在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。

<input @keyup.page-down="onPageDown" />

在上面的例子中,仅会在 $event.key 为 ‘PageDown’ 时调用事件处理。

按鍵別名

Vue 为一些常用的按键提供了别名:

  • .enter
  • .tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

1.4 实例

事件冒泡

是指在计算机编程中的一种事件传递机制。

在事件驱动的编程模型中,当用户与程序交互时,例如点击鼠标或按下键盘,这些操作会触发相应的事件。事件冒泡是指当一个元素上的事件被触发时,它会向上级元素传递,直到根元素,这个过程就像气泡从底部冒到顶部一样。

那有时候我们不需要这种情况发生,该怎么解决呢?用咱们的事件修饰符

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style>
      .red{
        width: 400px;
        height: 400px;
        background-color: red;
      }
      .orange{
        width: 300px;
        height: 300px;
        background-color: orange;
      }
      .blue{
        width: 200px;
        height: 200px;
        background-color: blue;
      }
      .black{
        width: 100px;
        height: 100px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <p>冒泡事件</p>
      <div class="red" @click="red">
        <div class="orange" @click="orange">
          <div class="blue" @click="blue">
            <!-- 添加stop修饰符阻止冒泡 -->
            <div class="black" @click.stop="black"></div>
          </div>
        </div>
      </div>
      <p>提交答案</p>
        <!-- 只能点一次 -->
      <button @click.once="dosub">提交</button>
      <p>按键修饰符</p>
      <input v-on:keyup.enter="dosub" />
    </div>
  </body>
  <script type="text/javascript">
    // 绑定边界 ES6具体体现
    new Vue({
      el: '#app',
      data() {
        return {
          f200: 'f200'
        };
      },
      methods: {
        red() {
          alert("red");
        },
        orange() {
          alert("orange");
        },
        blue() {
          alert("blue");
        },
        black() {
          alert("black");
        },
        dosub(){
          alert("提交");
        }
      }
    })
  </script>
</html>

二、表单综合案例

在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤:

<input v-model="text">

另外,v-model 还可以用于各种不同类型的输入,<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合:

  • 文本类型的 <input><textarea> 元素会绑定 value property 并侦听 input 事件;
  • <input type="checkbox"><input type="radio"> 会绑定 checked property 并侦听 change 事件;
  • <select> 会绑定 value property 并侦听 change 事件。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <title>表单</title>
  </head>
  <body>
    <div id="app">
      <h1>vue表单</h1>
          <label>姓名:</label><input v-model="uname" /><br />
          <label>密码:</label><input v-model="upwd" type="password" /><br />
          <!-- 将用户的输入值转为 Number 类型 -->
          <label>年龄:</label><input v-model.number="age" /><br />
          <label>性别:</label>
          <input type="radio" v-model="sex" name="sex" value="1" />男
          <input type="radio" v-model="sex" name="sex" value="0" />女<br />
          <label>爱好:</label>
          <div v-for="h in hobby">
            <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
          </div>
          <label>类别:</label>
          <select v-model="type">
            <option value="-1">===请选择===</option>
            <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
          </select><br />
          <label>备注:</label>
          <textarea v-bind:value="mark"></textarea><br />
          确认<input type="checkbox" v-model="flag" />
          <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data() {
        return {
          uname: null,
          upwd: null,
          age: 10,
          sex: 1,
          hobby: [{
            id: 1,
            name: '唱'
          }, {
            id: 2,
            name: '跳'
          }, {
            id: 3,
            name: 'rap'
          }, {
            id: 4,
            name: '篮球'
          }],
          hobbies: [],
          types: [{
            id: 1,
            name: '天帝'
          }, {
            id: 2,
            name: '仙王'
          }, {
            id: 3,
            name: '人皇'
          }],
          type: null,
          mark: '学生备注',
          flag: false
        }
      },
      computed: {
        show: function() {
          return !this.flag;
        }
      },
      methods: {
        doSubmit: function() {
          console.log('doSubmit')
          var obj = {
            uname: this.uname,
            upwd: this.upwd,
            age:this.age+10,
            sex: this.sex,
            hobbies:this.hobbies,
            type: this.type,
            mark: this.mark,
          }
          console.log(obj);
        }
      }
    })
  </script>
</html>

三、自定义组件

Props

Props是一种特别的 attributes,你可以在组件上声明注册。当一个值被传递给 prop 时,它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样,在模板和组件的 this 上下文中访问。

一个组件可以有任意多的 props,默认情况下,所有 prop 都接受任意类型的值。

父传子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
          <h1>{{msg}}</h1>
          <!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
          <my-button m="荒 "@click="nb"></my-button>
    </div>
  </body>
  <script>
    // 定义全局组件的方式
    Vue.component('my-button', {
      props: ['m'],
      template: '<button v-on:click="doClickMyButton">我是一个自定义组件,被{{m}}点了{{n}}次</button>',
      data: function() {
        return {
          n: 0
        };
      },
      methods: {
        doClickMyButton: function() {
          console.log('doClickMyButton方法被调用');
          this.n++;
        }
      }
    }),
     new Vue({
      el: "#app",
      data(){
        return{
        msg:'自定义组件'
        };
      }
    });
  </script>
</html>

子传父

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
      <my-button m="荒 " @click='nb'></my-button>
    </div>
  </body>
  <script>
    // 定义全局组件的方式
    Vue.component('my-button', {
        props: ['m'],
        template: '<button v-on:click="doClickMyButton">我是一个自定义组件,被{{m}}点了{{n}}次</button>',
        data: function() {
          return {
            n: 0
          };
        },
        methods: {
          doClickMyButton: function() {
            console.log('doClickMyButton方法被调用');
            this.n++;
            this.$emit('click', this.n, '荒', '石昊');
          }
        }
      }),
      new Vue({
        el: "#app",
        data() {
          return {
            msg: '自定义组件'
          };
        },
        methods: {
          nb: function(a, b, c) {
            console.log('方法被调用');
            console.log(a, b, c);
          }
        }
      });
  </script>
</html>

目录
相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
4天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
25 1
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1061 0
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
27 1
vue学习第三章
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章