vue学习记录：事件修饰符、v-model、Class 与 Style 绑定

逃离我推掉我的手 2022-12-05 05:27 23阅读 0赞

## 一、vue.js事件修饰符 ##

1.  .stop 阻止冒泡
2.  .prevent 阻止默认行为
3.  .self 实现只有点击当前元素时候，才会触发事件处理函数
4.  .capture 实现捕获触发事件的机制
5.  .once 只触发一次事件处理函数

<div id="app">
        
       <div class="inner" @click="div1_out">
          <input type="button" value="stop" @click.stop="stop_thing">
    	  
    	  <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
    	  
    	  <input type="button" value="self" @click.self="self_thing">
    	  
    	  <input type="button" value="capture" @click.capture="capture_thing">
    	  
    	   <a href="http://www.baidu.com" @click.once="once_thing">once。有问题，先去百度</a>
        </div>
      <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { }, methods: { div1_out() { console.log('这是触发了 input父亲 inner div 的点击事件') }, stop_thing() { console.log('这是触发了 stop 按钮 的点击事件') }, self_thing() { console.log('这是触发了 self 按钮 的点击事件') }, capture_thing() { console.log('这是触发了 capture 按钮 的点击事件') }, once_thing() { console.log('触发了 once 的点击事件') } } }); </script>

## 二、v-model：数据的双向数据绑定指令 ##

**v-bind** 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定，而 **v-model** 指令，可以实现 表单元素和 Model 中数据的双向数据绑定，但 v-model 只能运用在 表单元素中，例如：input(radio, text, address, email…)、 select 、 checkbox 、 textarea等等。

<div id="app">
    	  
        <h4>{
       { msg }}</h4>
        
        <input type="text" style="width:100%;" v-model="msg">
      </div>
    
      <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '我是v-model，当页面数据变动时，我也会随着改变，不信你可以试试' }, methods: { } }); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]

## 三、vue中的样式-class ##

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

**官方文档介绍：** [https://cn.vuejs.org/v2/guide/class-and-style.html][https_cn.vuejs.org_v2_guide_class-and-style.html]

1.  **内嵌式、外联式**

<div id="app">
      
       <h1 class="red thin">你好，我是h1</h1>
    
        
        <h1 :class="['thin', 'italic']">你好，我是h1</h1>
    
        
        <h1 :class="['thin', 'italic', flag?'active':'']">你好，我是h1！！！</h1>
    
        
        <h1 :class="['thin', 'italic', { 'active':flag} ]">你好，我是h1！！！</h1>
    
        
        <h1 :class="classObj">你好，我是h1！！！</h1>
    
    
      </div>
    
      <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, methods: { } }); </script>

1.  **行内式**

<div id="app">
    
        <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
      </div>
    
      <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, methods: { } }); </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9dae8c5c214a4ec6ad66675a6d84c07d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b0096fdabee4450da166486b972495e2.png
[https_cn.vuejs.org_v2_guide_class-and-style.html]: https://cn.vuejs.org/v2/guide/class-and-style.html