Vue知识补充

## 一、事件修饰符

处理DOM事件时可以通过Vue封装的事件修饰符用作后缀加在事件后实现

常见修饰符如下

| 名称     | 可用事件 | 说明                                           |
| -------- | -------- | ---------------------------------------------- |
| .stop    | 任意     | 当事件触发时，阻止事件冒泡                     |
| .prevent | 任意     | 当事件触发时，阻止元素默认行为                 |
| .capture | 任意     | 当事件触发时，阻止事件捕获                     |
| .self    | 任意     | 限制事件仅用作与节点自身                       |
| .once    | 任意     | 事件被触发一次后即解除监听                     |
| .passive | 滚动     | 移动端，限制事件永不调用`preventDefault()`方法 |

使用方法

```html
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div style="background-color: aqua;height: 200px;width: 200px" @click="handleClickDiv">
      <el-button type="primary" @click.stop="handleClickBtn">点击我</el-button>
    </div>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  methods: {
    handleClickBtn() {
      console.log('点击了按钮');
    },
    handleClickDiv() {
      console.log('点击了div');
    }
  }
}
</script>
```

## 二、按键修饰符

对于键盘事件的监听，Vue中可以通过`@keyup.enter`来监听回车键的按下，同样的通过键值也可以监听回车键的按下`@keyup.13`

常用按键修饰符与其别名

| 别名修饰符 | 键值修饰符 | 对应按键  |
| ---------- | ---------- | --------- |
| .delete    | .8/.46     | 退格/删除 |
| .tab       | .9         | 制表      |
| .enter     | .13        | 回车      |
| .esc       | .27        | 退出      |
| .space     | .32        | 空格      |
| .left      | .37        | 左        |
| .up        | .38        | 上        |
| .right     | .39        | 右        |
| .down      | .40        | 下        |

## 三、组合修饰符

在某些场景下需要通过按键组合才能进行某些操作，可以使用Vue提供的系统按钮修饰符实现

| 修饰符 | 对应按键     |
| ------ | ------------ |
| .ctrl  | Ctrl         |
| .alt   | Alt          |
| .shift | Shift        |
| .meta  | Meta/Windows |

## 四、双向绑定数据更新修饰符

在使用`v-model:...`时，在某些场景下需要类型转换或懒加载，可以在加上修饰符后缀

| 修饰符  | 说明                                                         |
| ------- | ------------------------------------------------------------ |
| .lazy   | 将用户输入的数据赋值于变量的时机由输入时延迟到数据改不改变时 |
| .number | 将输入的数据转换为你数值类型                                 |
| .trim   | 去除输入数据首尾的空白字符                                   |

## 五、数组操作方法

#### 1、会改变原数组的方法

#### 2、不会改变原数组方法

#### 3、迭代方法

## 六、Vue2组件渲染方式

与Vue3不同的是`vue`中没有`createApp`方法，所以使用`render:h => h(App)`进行渲染。

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');
```

## 七、Vue2的Vuex使用

#### 1、创建并引用`store`

一般目录结构

```yml
/store
	/modules
		/模块.js
	/index.js
```

index.js

```js
import Vue from 'vue'
import Vuex from 'vuex'
import counter from './modules/counter'

// 使用Vuex
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // 全局属性
  },
  getters: { // 全局计算属性
  },
  mutations: { // 修改属性的同步方法
  },
  actions: { // 修改属性的异步方法
  },
  modules: { // 模块引入
      counter
  }
})
```

以模块`counter.js`为例

```js
export default {
    namespaced: true, // 开启命名空间
    state: {
        count: 0,
    },
    getters: {
        // Vuex可以自动注入当前模块的state, getters, rootState, rootGetters以及context对象
        // rootState 根状态
        // rootGetters 根getters
        doubleCount(state, rootState, rootGetters) {
            console.log(state, rootState, rootGetters);
            return state.count * 2;
        }
    },
    mutations: {
        addCount(state) {
            state.count++;
        }
    },
    actions: {
        // context 上下文对象, 与store相同包含 commit, dispatch, state, getters 等属性
        // 可以通过context获取state和getters中的值，或者提交mutations，分发actions
        // 在模块中，context还会具有rootState和rootGetters属性
        addCountAsync(context) {
            setTimeout(() => {
                context.commit('addCount')
            }, 1000);
        }
    }
}
```

main.js注册

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');
```

#### 2、组件中使用

可以直接使用`$store`对象进行调用(在js中需要用`this.$store`)，也可以使用辅助函数展开

```html
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png"><br>
    {{ msg }} | {{ count }} | {{ $store.getters['counter/doubleCount'] }}<br>
    <el-button type="primary" @click.stop="addCount">增加</el-button>
    <el-button type="primary" @click.stop="addCountAsync">异步增加</el-button>
  </div>
</template>

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {}
  },
  methods: {
    // 模块中的mutations可以通过模块名访问
    ...mapMutations('counter', ['addCount']),
    // 模块中的actions可以通过模块名访问
    ...mapActions('counter', ['addCountAsync']),
  },
  computed: {
    ...mapState(['msg']),
    // 模块中的state可以通过模块名访问
    ...mapState('counter', ['count']),
    // 模块中的getters可以通过模块名访问
    ...mapGetters('counter', ['doubleCount']),
  }
}
</script>
```

## 八、监听组件尺寸变化

#### 1、自定义指令

```js
directives: {
  resize: {
    bind(el, binding) {
      const resizeObserver = new ResizeObserver(entries => {
        entries.forEach(entry => {
          const {width, height} = entry.contentRect;
          // 调用传入的回调函数
          binding.value({width, height});
        });
      });
      resizeObserver.observe(el);
      // 保存 resizeObserver 实例，便于销毁
      el._resizeObserver = resizeObserver;
    },
    unbind(el) {
      // 在指令解绑时停止监听
      if (el._resizeObserver) {
        el._resizeObserver.disconnect();
      }
    }
  }
}
```

#### 2、使用`v-resize`

```html
<template>
  	<div id="main" style="height: 500px;width: 100%;" v-resize="handleResize">
    
    </div>
</template>

## 一、事件修饰符

处理DOM事件时可以通过Vue封装的事件修饰符用作后缀加在事件后实现

常见修饰符如下

使用方法

## 二、按键修饰符

对于键盘事件的监听，Vue中可以通过`@keyup.enter`来监听回车键的按下，同样的通过键值也可以监听回车键的按下`@keyup.13`

常用按键修饰符与其别名

## 三、组合修饰符

在某些场景下需要通过按键组合才能进行某些操作，可以使用Vue提供的系统按钮修饰符实现

| 修饰符 | 对应按键     |
| ------ | ------------ |
| .ctrl  | Ctrl         |
| .alt   | Alt          |
| .shift | Shift        |
| .meta  | Meta/Windows |

## 四、双向绑定数据更新修饰符

在使用`v-model:...`时，在某些场景下需要类型转换或懒加载，可以在加上修饰符后缀

## 五、数组操作方法

#### 1、会改变原数组的方法

#### 2、不会改变原数组方法

#### 3、迭代方法

## 六、Vue2组件渲染方式

与Vue3不同的是`vue`中没有`createApp`方法，所以使用`render:h => h(App)`进行渲染。

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');
```

## 七、Vue2的Vuex使用

#### 1、创建并引用`store`

一般目录结构

```yml
/store
	/modules
		/模块.js
	/index.js
```

index.js

```js
import Vue from 'vue'
import Vuex from 'vuex'
import counter from './modules/counter'

// 使用Vuex
Vue.use(Vuex)

以模块`counter.js`为例

main.js注册

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');
```

#### 2、组件中使用

可以直接使用`$store`对象进行调用(在js中需要用`this.$store`)，也可以使用辅助函数展开

## 八、监听组件尺寸变化

#### 1、自定义指令

#### 2、使用`v-resize`

```html
<template>
  	<div id="main" style="height: 500px;width: 100%;" v-resize="handleResize">
    
    </div>
</template>

最后修改：2025 年 12 月 15 日

👆请简单粗暴地爱我。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

MyBatis框架高阶

SpringCloud微服务注册调用

Java 方法引用解析

Vue3使用TypeScript编写时注意事项

Day27 - MyBatisPlus、Spring日志与Redis操作

Vue知识补充

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue知识补充

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款