Vue复习知识点

一、理解MVVM模式

VVM是一种设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。它的主要目的是将应用程序的界面逻辑与业务逻辑分离，并提高代码的可维护性和可测试性。

在MVVM模式中，视图是用户界面的呈现，视图模型是视图和模型之间的中介，而模型是应用程序的数据和业务逻辑。视图模型从模型中获取数据并将其转换为视图可以使用的格式。视图模型还将用户的行为转换为模型可以使用的格式，并将其传递给模型。视图模型还可以包含命令，这些命令表示用户在视图上执行的操作。

二、Vue实例配置的各选项

Vue实例配置的各选项包括：

  1. el：指定Vue实例挂载的DOM元素。
    代码示例：
1
2
3
new Vue({
  el: '#app'
})
  1. data：定义Vue实例的数据。
    代码示例：
1
2
3
4
5
new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
  1. computed：定义计算属性。
    代码示例：
1
2
3
4
5
6
7
new Vue({
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
  1. methods：定义Vue实例的方法。
    代码示例：
1
2
3
4
5
6
7
new Vue({
  methods: {
    greet: function (name) {
      alert('Hello ' + name + '!')
    }
  }
})
  1. watch：监听数据变化。
    代码示例：
1
2
3
4
5
6
7
8
9
10
new Vue({
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

三、Vue的各种内置指令

Vue的各种内置指令有：

  1. v-bind：将一个属性绑定到表达式，可以简写为冒号（:）。例如：<img :src="imageUrl">

  2. v-if：根据表达式的值来条件性地渲染元素。例如：<div v-if="show">显示内容</div>

  3. v-for：循环渲染列表。例如：<li v-for="item in items">{{ item }}</li>

  4. v-on：绑定事件监听器，可以简写为@。例如：<button @click="handleClick">点击</button>

  5. v-model：双向绑定表单元素的值。例如：<input v-model="message">

  6. v-show：根据表达式的值来条件性地显示元素。例如：<div v-show="show">显示内容</div>

  7. v-text：将元素的文本内容设置为表达式的值。例如：<span v-text="message"></span>

  8. v-html：将元素的 HTML 内容设置为表达式的值。例如：<div v-html="htmlContent"></div>

  9. v-cloak：在渲染未完成时隐藏元素，通常与 CSS 配合使用。例如：<div v-cloak>{{ message }}</div>

四、v-if和v-show的使用以及区别

v-if和v-show都是Vue.js中的条件渲染指令，用于根据某个条件来控制元素的显示或隐藏。

v-if的用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>
 <p v-if="show">这是一段需要显示的文字</p>
</div>
</template>

<script>
export default {
data() {
 return {
   show: true
 }
}
}
</script>

v-show的用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>
 <p v-show="show">这是一段需要显示的文字</p>
</div>
</template>

<script>
export default {
data() {
 return {
   show: true
 }
}
}
</script>

v-if和v-show的区别在于，v-if是动态地添加或删除元素，如果条件为false，元素将被从DOM中删除，如果条件为true，元素将被添加到DOM中。而v-show则是通过CSS的display属性来控制元素的显示或隐藏，如果条件为false，元素将被隐藏，如果条件为true，元素将被显示。

v-if适用于在条件不满足时，需要完全删除元素的情况，例如在复杂的表单中，根据用户的选择来动态地添加或删除表单项。而v-show适用于在条件不满足时，只需要隐藏元素的情况，例如在响应式布局中，根据屏幕大小来动态地隐藏或显示某个元素。

五、Vue选项中计算属性computed和方法methods的区别?

Vue选项中计算属性computed和方法methods的区别在于：

计算属性computed是基于已有的数据属性进行计算得出一个新的属性值，只有在依赖的数据属性发生变化时才会重新计算；而方法methods是在需要时被调用执行的，每次调用都会重新执行。

举个例子，假设有一个数据属性a和一个计算属性b：

1
2
3
4
5
6
7
8
data: {
a: 1
},
computed: {
b() {
 return this.a + 1
}
}

当a的值发生变化时，b会重新计算得出新的值。

而如果使用方法来实现相同的功能：

1
2
3
4
5
methods: {
b() {
 return this.a + 1
}
}

每次调用b方法都会重新执行计算。

六、v-on的修饰符有哪些，有何作用?

v-on的修饰符有以下几种：

  1. .stop：阻止事件冒泡
  2. .prevent：阻止默认事件
  3. .capture：使用事件捕获模式
  4. .self：只当事件在该元素本身触发时触发回调
  5. .once：只触发一次回调
  6. .passive：提高移动端滚动性能

例如：

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

这里使用了.stop修饰符，当点击按钮时，事件不会继续向上传递，防止父元素也触发该事件。

七、props的验证方式有哪些?

vue 要求任何传递给组件的数据，都要声明为 props。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。

  1. 类型检查：可以通过指定props的类型来检查其是否符合预期。例如：props: { count: Number }
  2. 必要性检查：可以通过设置required选项来确保必须传入该props。例如：props: { message: { type: String, required: true } }
  3. 默认值：可以通过指定default选项来为props设置默认值。例如：props: { size: { type: String, default: 'medium' } }
  4. 自定义验证：可以通过指定validator选项来自定义验证规则。例如：props: { age: { type: Number, validator: function (value) { return value >= 18 } } }

在使用这些验证方式时，可以通过props选项中的属性来进行配置。例如：props: { count: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } }

八、v-model的修饰符有哪些，有何作用?

v-model的修饰符有以下几种：

  1. .lazy：将input事件改为change事件，在失去焦点或按下Enter键后才更新v-model绑定的值。

  2. .number：将输入值转为数值类型。

  3. .trim：去除输入值的首尾空白字符。

以下是示例代码：

1
2
3
4
5
6
7
8
<!-- 使用.lazy修饰符 -->
<input v-model.lazy="message" />

<!-- 使用.number修饰符 -->
<input v-model.number="age" />

<!-- 使用.trim修饰符 -->
<input v-model.trim="username" />

九、transition组件6个内置的过渡类名以及作用?

  1. v-enter：进入过渡的开始状态，在元素被插入时生效，在下一帧移除。
  2. v-enter-from：进入过渡的开始状态，在元素被插入时生效，在下一帧移除。
  3. v-enter-to：进入过渡的结束状态，在元素被插入时生效，在过渡/动画完成后移除。
  4. v-leave：离开过渡的开始状态，在离开过渡被触发时生效，在下一帧移除。
  5. v-leave-from：离开过渡的开始状态，在离开过渡被触发时生效，在下一帧移除。
  6. v-leave-to：离开过渡的结束状态，在离开过渡被触发时生效，在过渡/动画完成后移除。

这些类名可以用于自定义 CSS 过渡动画。当进入或离开过渡触发时，Vue 会自动在元素上添加这些类名，之后你可以利用这些类名来编写 CSS 动画效果。

十、组件之间实现通信的方式有哪些?

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus
  5. $parent 或$root
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. VueX

十一、vuex的配置选项有哪些?

Vuex 配置对象中的主要内容包括：

  • state：包含应用程序状态的对象。
  • getters：类似于计算属性，用于派生状态。
  • mutations：用于修改状态的函数。
  • actions：类似于 mutations，但是可以包含异步操作。
  • modules：允许将 store 分割成模块化的结构。

十二、编程练习侧重于指令部分(编程)

略过咯..........