2021-07-29 vue基础语法（two）

最新推荐文章于 2024-03-17 09:44:53 发布

新时代农民工官方认证码农--菜鸭子毛毛~

最新推荐文章于 2024-03-17 09:44:53 发布

阅读量144

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_54093765/article/details/119220308

版权

v-bind指令

基本使用

v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。以下我们来看一个 v-bind的简单例子:

<div id='app'>
  <img src="./images/p1.jpg" alt="1号猛男" title='1号猛男'>
  <img v-bind:src='src' v-bind:alt="msg" v-bind:title="msg">
</div>
``


## 简写

V-bind指令属性绑定的简写方式

```html
<img :src="src3" :alt="msg3" :title="msg3">

绑定class

操作元素的class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind 处理它们

字符串绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .main {
            width: 100px;
            height: 100px;
            background-color: pink;
            color: red;
        }
        .main1 {
            width: 200px;
            height: 300px;
            background-color: skyblue;
            color: red;
        }
    </style>
</head>
<body>
    <div id='app'>
        <div class="main">{{msg}}</div>
        <div :class="main">{{msg}}</div>
    </div>

    <script src='./js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                main: 'main1'
            }
        })
    </script>
</body>
</html>

对象绑定

V-bind指令的class和style绑定之对象绑定

字符串拼接麻烦且易错。因此，在将v-bind 用于 class和 style时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!-- class的值可以是一个对象,当是一个对象时,我们可以添加键值对 -->
<!-- <h1 :class='{key1:value1, key2:value2}'>{{msg}}</h1> -->
<!--键值对是固定的(类名:布尔值), 当布尔值为true时,类名会添加上 -->
<h1 :class='{类名1:boolean, 类名2:boolean}'>{{msg}}</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .main1 {
            color: red;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id='app'>
        <h1 :class='{main1:true, box1:true}'>{{msg}}</h1>
    </div>

    <script src='./js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
            }
        })
    </script>
</body>
</html>

打开网页我们可以发现,main1和box1都被加载到了页面中,可以自行再尝试一下false

一般情况下,我们不会直接在对象上去定义布尔值,而是放到data里面去

...
<h1 :class='{main1:is_main, box1:is_box}'>{{msg}}</h1>
...
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      is_main: true,
      is_box: true
    }
  })
</script>

我们之前学到js的时候做过一下案例,比如设置一个按钮,点击按钮显示相对应的效果,再次点击则恢复到初始状态,此时我们使用动态绑定class就非常容易实现

...
<style>
  .main1 {
    color: red;
  }

  .box1 {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
</style>
...
<div id='app'>
    <h1 :class='{main1:is_main, box1:is_box}'>{{msg}}</h1>
    <button v-on:click="btn">按钮</button>
</div>
...
<script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      main: 'main1',
      is_main: true,
      is_box: true
    },
    methods: {
      btn: function () {
        this.is_main = !this.is_main
      }
    }
  })
</script>

绑定的class和其他class属性

你可以在对象中传入更多属性来动态切换多个class。此外，v-bind:class指令也可以与普通的class 属性共存。

<h1 class="act" :class='{main1:is_main, box1:is_box}'>{{msg}}</h1>

这两个class是共存关系,并不会存在覆盖现象,所以,当我们写一些样式如果这个样式后期不会改变时,我们可以直接定义class,如果某些样式后期可能会改变,那么就用动态绑定的方式

对象绑定的其他方式

绑定的数据对象不必内联定义在模板里,当数据比较多时,我们可以写在一个对象里或者方法里还有计算属性里面

<!--写在对象里-->
.......
<h1 :class='class_obj'>{{msg}}</h1>
.......
<script>
  data: {
    ......
    class_obj: {
      main1: true,
      box1: true
    }
  },
</script>
......

<!--写在方法里-->
......
<h1 :class='get_class()'>{{msg}}</h1>
......
<script>
......
methods: {
  get_class: function () {
    	return { main1: this.is_main, box1: this.is_box }
    }
}
</script>
......

<!--写在计算属性里-->
......
<h1 :class='get_class_com'>{{msg}}</h1>
......
<script>
......
 computed: {
  get_class_com: function () {
  	return { main1: this.is_main, box1: this.is_box }
  }
}
</script>
......

数组绑定

数组绑定语法用的比较少,使用的方法就是class后面跟一个数组

直接填入类名

......
<h1 :class="['main1', 'box1']">{{msg}}</h1>
......

填入变量

......
<h1 :class="[main, box]">{{msg}}</h1>
......
......
<script>
  data: {
    msg: 'hello world',
    main: 'main1',
    box: 'box1'
  },
</script>

通过方法填入

......
<h1 :class="get_class()">{{msg}}</h1>
......
<script>
  data: {
    msg: 'hello world',
    main: 'main1',
    box: 'box1'
  },
  methods: {
      get_class: function () {
        return [this.main, this.box]
      }
  },
</script>

通过计算属性填入

......
<h1 :class="get_class_com">{{msg}}</h1>
......
......
<script>
  data: {
    msg: 'hello world',
    main: 'main1',
    box: 'box1'
  },
 computed: {
   get_class_com: function () {
     return [this.main, this.box]
   }
 }
</script>

绑定style

v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript 对象。CSS 属性名可以用驼峰式(camelCase) 或短横线分隔(kebab-case，记得用引号括起来) 来命名：

直接绑定属性

<h1 :style="{color: 'yellow', 'font-size':'70px', backgroundColor:'skyblue'}">msg</h1>

通过变量绑定

......
<h1 :style="{color: font_color, 'font-size':font_size, backgroundColor:bgc}">msg</h1>
......
......
data: {
  font_color: 'yellow',
  font_size: '60px',
  bgc: 'skyblue'
},
......

通过样式对象绑定

绑定到一个对象里面,会让模板更加清晰

......
<h1 :style="style_obj">msg</h1>
......
......
data: {
    style_obj: {
        color: 'yellow',
        fontSize: '60px',
        backgroundColor: 'skyblue',
    }
},
......

数组绑定

......
<h1 style="width: 200px;" :style="[style_obj,style_obj1]">msg</h1>
......
......
data: {
    style_obj: {
        color: 'yellow',
        fontSize: '60px',
        backgroundColor: 'skyblue',
    }
	style_obj1: {
    	textAlign: 'center'
    }
}
......

通绑定class一样,绑定的style不会影响原生的style属性,也不会覆盖,二者属于共存关系

v-on指令

在前端开发中,我们需要经用到交互场景,这个时候我们就必须监听交互发生的时间,比如点击,拖拽,键盘事件

在vue中如何监听事件呢? 使用v-on指令

v-on介绍:

作用:绑定事件监听

缩写:@

参数:event

基本使用

下面这个案例是通过v-on绑定一个点击事件,点击时对数字做一个自增

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id='app'>8888888777
        <h1>{{sum}}</h1>
        <button v-on:click='sum++'>+</button>
        <button v-on:click='sum--'>-</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                sum: 0
            }
        })
    </script>
</body>
</html>

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <h1>{{sum}}</h1>
        <button v-on:click='increment'>+</button>
        <button v-on:click='decrement'>-</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                sum: 0
            },
            methods: {
                increment() {
                    this.sum++
                },
                decrement() {
                    this.sum--
                }
            }
        })
    </script>
</body>
</html>

语法糖简写

<button v-on:click='increment'>+</button>
<button v-on:click='decrement'>-</button>
<!-- 语法糖简写 -->
<button @click='increment'>+</button>
<button @click='decrement'>-</button>

传递参数

在使用methods中定义的方法,以供@click调用时,需要注意参数问题:

情况一:如果该方法不需要额外参数,那么方法后的()可以不添加

注意:如果方法本身有一个参数,那么会默认将原生的event参数传递进去

情况二:如果需要传入某个参数,同时需要event时,可以通过$event传入事件那么会默认将原生事件的event参数传递进去

除了直接绑定到一个方法，也可以在内联JavaScript 语句中调用方法：直接调用并且传参

......
 <button @click='fn("你好,世界")'>直接调用方法</button>
......
......
methods: {
  fn(msg) {
  	console.log(msg);
  }
}
......

当我们省略了参数,而方法需要一个参数时

......
<!--省略参数1-->
<button @click='fun()'>fun</button>
<!--省略参数2-->
<button @click='fun1()'>fun</button>
......
......
methods: {
  fun(msg) {
  	console.log(msg); //undefined
  }
  fun1(msg) {
  	console.log(msg); //evnet, 会默认将原生事件的event参数传递进去
  }
}
......

有时也需要在内联语句处理器中访问原始的DOM 事件。可以用特殊变量$event 把它传入方法：

......
<button @click='fn1("你好,世界", $event)'>event</button>
......
......
methods: {
  fn1(msg,event) {
  	console.log(msg,event);
  }
}
......

修饰符

在某些情况下,我们拿到event的目的可能是进行一些事件处理,比如在事件处理程序中调用event.stopPropagation()或event.preventDefault() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM 事件细节。

为了解决这个问题，Vue.js为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop

调用event.stopPropagation()阻止事件冒泡

<body>
    <div id='app'>
        <div @click='fn'>
            <button @click='fn1("你好,世界", $event)'>.stop</button>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                sum: 0
            },
            methods: {
                fn() {
                    console.log('div_click');
                },
                fn1(msg, event) {
                    console.log(msg, event);
                    event.stopPropagation()
                }
            }
        })
    </script>
</body>

以上代码如果不添加 event.stopPropagation()则会有时间冒泡的情况发生,如果我们不需要事件冒泡,那么我们需要添加event.stopPropagation(),但是vue.js为我们提供了.stop修饰符

我们只需要直接使用.stop就可以了,vue.js会自己去调用event.stopPropagation()

<button @click.stop='fn1("你好,世界", $event)'>.stop</button>

.prevent

阻止默认事件,调用event.preventDefault()

比如我们现在有一个需求,我们都知道在form表单中当我们点击submit后会,form表单会默认自动收集我们的表单信息,进行提交,但是我们可能有一些信息不用提交,或者我需要自己去监听一些信息,这时我们就需要取消form表单的默认提交操作

<!-- form表单会自动收集信息进行提交 -->
<form action="baidu">
	<input type="submit">
</form>

我们尝试自己写一个方法用于提交

<form action="baidu">
	<input type="submit" @click="btn">
</form>
......
methods: {
	btn() {
		console.log('我自己提交');
	}
}

我们发现此时btn没有执行,并且会有一个表单提交的操作,这是正常现象

那么我们如何取消默认提交操作呢?

<form action="baidu">
	<input type="submit" @click.prevent="btn">
</form>
......
methods: {
	btn() {
		console.log('我自己提交');
	}
}

按键修饰符

监听键盘某个按钮

 <input type="text" @keyup="key_up">
......
methods: {
	key_up(e) {
		console.log(e.key + '有按钮操作');
	}
}

此时,当我们在键盘上按钮按下放开,按钮都能被监听到,但是如果我们只想监听某一个按钮,此时就可以使用按键修饰符,比如现在有一个需求,等到用户输入完后,按了enter键,那么我们才做操作

<input type="text" @keyup.enter="key_up">
......
methods: {
	key_up(e) {
		console.log(e.key + '有按钮操作');
	}
}

.once

只会触发一次

<button @click.once='cli_once'>once</button>
......
methods: {
	cli_once(e) {
		console.log('我只会执行一次');
	}
}

修饰符可以连写:

新时代农民工官方认证码农--菜鸭子毛毛~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫