Vue基础语法【下】-阿里云开发者社区

一、事件处理器

1.事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符

.stop

阻止单击事件冒泡,即停止事件在DOM树中的传播。

<button v-on:click.stop="doSomething">Click me</button>

当按钮被点击时，事件不会继续向上冒泡，只会触发doSomething方法。

.prevent

修饰符可以阻止事件的默认行为,提交事件不再重载页面

<form v-on:submit.prevent="submitForm">
  <!-- form fields -->
  <button type="submit">Submit</button>
</form>

当表单被提交时，事件的默认行为（刷新页面）会被阻止，而是会触发submitForm方法。

.capture

修饰符可以将事件监听器添加到捕获阶段，而不是冒泡阶段。

<div v-on:click.capture="doSomething">Click me</div>

当点击div元素时，事件会在捕获阶段触发doSomething方法。

.self

只当事件在该元素本身（而不是子元素）触发时触发回调

<div v-on:click.self="handleClick">
  <button>Click me</button>
</div>

只有当点击div元素本身时，事件处理函数handleClick才会被触发。如果点击div内部的button元素，事件将不会被触发。

.once

修饰符只能让事件只触发一次。

<button v-on:click.once="doSomething">Click me</button>

当按钮被点击时，doSomething方法只会被触发一次。

注1：什么是事件冒泡?

案例

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>插值</title>
    <!-- 导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <style type="text/css">
      .one{
        background-color: aqua;
        height: 25rem;
        width: 25rem;
      }
      .two{
        background-color: beige;
        height: 18.75rem;
        width: 18.75rem;
      }
      .three{
        background-color: blue;
        height: 12.5rem;
        width: 12.5rem;
      }
      .four{
        background-color: blueviolet;
        height: 6.25rem;
        width: 6.25rem;
      }
    </style>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <div id="" class="one" @click="fun1">
        <div class="two" @click="fun2">
          <div class="three" @click="fun3">
            <div class="four" @click="fun4">
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        data(){
          return{
            msg:"hello meinv",
          };
        },
        methods:{
          fun1(){
            alert("你是不是就想点我");
          },
          fun2(){
              alert("你为什么点我");
          },
          fun3(){
              alert("你怎么点我");
          },
          fun4(){
              alert("你点我");
          }
        }
      });
    </script>
  </body>
</html>

如何避免类似的冒泡呢？

我们可以在点击事件中添加我们的.stop阻止单击事件冒泡！！

<div id="" class="one" @click="fun1">
        <div class="two" @click.stop="fun2">
          <div class="three" @click.stop="fun3">
            <div class="four" @click.stop="fun4">
            </div>
          </div>
        </div>

2.按键修饰符

.enter

当用户按下回车键时触发事件。

<input v-on:keyup.enter="submitForm">

当用户在输入框中按下回车键时，会触发submitForm方法。

.tab

当用户按下Tab键时触发事件。

<input v-on:keyup.tab="nextField">

当用户在输入框中按下Tab键时，会触发nextField方法。

.delete

当用户按下删除键或退格键时触发事件。

<input v-on:keyup.delete="deleteItem">

当用户在输入框中按下删除键或退格键时，会触发deleteItem方法。

.esc

当用户按下Esc键时触发事件。

<input v-on:keyup.esc="cancelAction">

当用户在输入框中按下Esc键时，会触发cancelAction方法。

.space

当用户按下空格键时触发事件。

<button v-on:keyup.space="startGame">Start</button>

当用户在按钮上按下空格键时，会触发startGame方法。

.up

当用户按下上箭头键时触发事件。

<input v-on:keyup.up="increaseValue">

当用户在输入框中按下上箭头键时，会触发increaseValue方法。

.down

当用户按下下箭头键时触发事件。

<input v-on:keyup.down="decreaseValue">

当用户在输入框中按下下箭头键时，会触发decreaseValue方法。

.left

当用户按下左箭头键时触发事件。

<input v-on:keyup.left="moveLeft">

当用户在输入框中按下左箭头键时，会触发moveLeft方法。

.right

当用户按下右箭头键时触发事件。

<input v-on:keyup.right="moveRight">

当用户在输入框中按下右箭头键时，会触发moveRight方法。

.ctrl、.alt、.shift、.meta

当用户按下对应的修饰键时触发事件。

<input v-on:keyup.ctrl="saveData">

当用户在输入框中按下Ctrl键时，会触发saveData方法。

二、表单赋值与取值

表单赋值与取值综合案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="ctb">
      <h1>表单赋值与取值</h1>
      <div>
        <label>账号：</label>
        <input type="text" v-model="uname" placeholder="请输入账号">
      </div>
      <div>
        <label>密码：</label>
        <input type="password" v-model="upwd" placeholder="请输入密码">
      </div>
      <div>
        <label>年龄：</label>
        <input type="text" v-model.number="age" placeholder="请输入年龄">
      </div>
      <div>
        <label>性别：</label>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
      </div>
      <div>
        <label>爱好：</label>
        <div style="display: inline;" v-for="h in hobbies">
          <input type="checkbox" :value="h.id" v-model="hobby" />{{h.name}}
        </div>
      </div>
      <div>
        <label>地区</label>
        <select v-model="area">
          <option value="">-- 请选择 --</option>
          <option v-for="c in city" :value="c.id">{{c.name}}</option>
        </select>
      </div>
      <div>
        <label>备注：</label>
        <textarea v-model="remark" placeholder="请输入注明"></textarea>
      </div>
      <div>
        <input type="checkbox" v-model="agreed">是否已阅读并同意协议
      </div>
      <div>
        <button @click="submit" :disabled="disabled">提交</button>
      </div>
    </div>
    <script>
      var vm = new Vue({
        el: "#ctb",
        data: {
          // 设置表单
          uname: null,
          upwd: null,
          age: 18,
          sex: 1,
          hobbies: [{
              id: '1',
              name: 'music'
            },
            {
              id: '2',
              name: 'basketball'
            },
            {
              id: '3',
              name: 'travel'
            }
          ],
          hobby: [],
          remark: null,
          city: [{
              id: "1",
              name: "长沙"
            },
            {
              id: "2",
              name: "永州"
            },
            {
              id: "3",
              name: "道州"
            },
            {
              id: "4",
              name: "勾八"
            },
            {
              id: "5",
              name: "衡阳"
            },
            {
              id: "6",
              name: "大理"
            }
          ],
          area: null,
          agreed: false,
          disabled: true
        },
        watch: {
          agreed: function(val) {
            if (val) {
              this.disabled = false;
            } else {
              this.disabled = true;
            }
          }
        },
        /* 获取表单内容 */
        methods: {
          submit: function() {
            let data = {
              uname: this.uname,
              upwd: this.upwd,
              age: this.age,
              sex: this.sex,
              hobby: this.hobby,
              city: this.area,
              remark: this.remark
            }
            console.log(data);
          }
        }
      });
    </script>
  </body>
</html>

三、自定义组件

1.组件介绍

组件(Component)是Vue最强大的功能之一

组件可以扩展HTML元素，封装可重用的代码

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.局部组件

在Vue实例中定义和使用局部组件非常简单。我们可以在Vue实例的components选项中定义组件，并在模板中使用它。

<div id="app">
    <my-button>点我</my-button>
  </div>
<script>
  // 在Vue实例中定义局部组件
  new Vue({
      el: '#app',
      components: {
        "my-button": {
          template: "<button>自定义组件</button>"
        }
      }
    })
</script>

3.全局组件

全局组件可以在整个应用程序中使用，无需在每个Vue实例中重新定义。我们还可以在Vue实例之外定义全局组件，并在需要的地方使用它。

<script type="text/javascript">
    Vue.component('my-button', {
      //定义组件中的变量
      props:['pp'],
      template:'<button v-on:click="btn">{{pp}}打我</button>',
      data:function(){
        return {
        }
      }
    });
  </script>

4.组件通信

Vue自定义事件是为组件间通信设计，vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称，建议使用“短横线分隔命名”

父Vue实例->Vue实例，通过prop传递数据

子Vue实例->父Vue实例，通过事件传递数据

组件传参【父传子】

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>插值</title>
    <!-- 导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <my-button m='嘿嘿'>点我</my-button>
      <h1>组件通信---父传子</h1>
      <my-button m='不要'>点我</my-button>
      </div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        components:{
          'my-button':{
            props:['m'],
             template:'<button @click="clickMe">{{m}}点击了{{n}}次</button>',
             data:function(){
               return{
                 n:1
               }
             },
             methods:{
               clickMe(){
                 this.n++;
               }
             }
          }
        },
        data(){
          return{
            msg:"hello meinv"
          };
        }
      });
    </script>
  </body>
</html>

组件传参【子传父】

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8">
    <title>组件通信---子传父</title>
    <!-- 导入工具 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <!-- 定义边界 -->
    <div id="app">
      <h1>组件通信---子传父</h1>
      <my-button m='不要' @ctb='getParam'>点我</my-button>
      </div>
    <script type="text/javascript">
      new Vue({
        el:"#app",
        components:{
          'my-button':{
            props:['m'],
             template:'<button @click="clickMe">{{m}}点击了</button>',
             methods:{
               clickMe(){
                 let book='我是你的四月天';
                 let price=90;
                 this.$emit('ctb',book,price)
               }
             }
          }
        },
        data(){
          return{
            msg:"hello meinv"
          };
        },
        methods:{
          getParam(a,b){
            console.log(a,b);
          }
        }
      });
    </script>
  </body>
</html>

Vue基础语法【下】

一、事件处理器

1.事件修饰符

.stop

.prevent

.capture

.self

.once

2.按键修饰符

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

.ctrl、.alt、.shift、.meta

二、表单赋值与取值

三、自定义组件

1.组件介绍

2.局部组件

3.全局组件

4.组件通信

组件传参【父传子】

组件传参【子传父】

热门文章

最新文章

相关课程

相关电子书