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

Vue基础语法【下】

2023-10-25 82

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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.组件通信

组件传参【父传子】

组件传参【子传父】

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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.组件通信

组件传参【父传子】

组件传参【子传父】

热门文章

最新文章

相关课程

相关电子书