初步学习Vue

Posted 2021-10-04 just小千

​ 之前用vue2写过一些cms系统，简单的数据处理，基本的组件都写过，但是最近一年使用React比较多，vue项目好久没写，而且听说vue3也已经出来了，所以重新复习一下，将vue的知识点归纳归纳，方便日后使用和查找。

​ 学习基于vue官方文档，现在简单的将文档过一遍，简单的记录一下知识

1.创建应用实例

Vue.createApp({ /* 选项 */ })

创建根组件：createApp(App).mount(\'#app\')

2.生命钩子

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmounted
• unmounted

3.模版语法

文本插值

<span v-once>这个将不会改变: {{ msg }}</span> 
// v-once指令当数据改变时，插值处的内容不会更新

原始html

v-html能将html输出，双大括号只会将内容输入为文本

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
 //rawHtml: \'<span style="color: red">This should be red.</span>\'

Attribute

v-bind指令可以使数据在HTML attribute中使用

参数和动态参数

<a v-bind:href="url"> ... </a> // <a :href="url"> ... </a>
<a v-on:click="doSomething"> ... </a> // <a @click="doSomething"> ... </a>
<a v-bind:[attributeName]="url"> ... </a>

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this 指向。

4.computed和watch（计算属性和监听器）

计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

5.class属性

<div :class="[isActive ? activeClass : \'\', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>
<div :class="{ active: isActive }"></div>

6.v-if和v-show的区别

v-if是真正的条件渲染，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。它的渲染是惰性的，初始渲染时条件为假，直到条件第一次变为真，开始渲染块

v-show是元素渲染，只是单纯的基于css进行切换

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

7.v-for

<ul id="array-with-index">
  <li v-for="(item, index) in items"> // for in 和 for of
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

8.is & v-is

<component :is="currentTabComponent"></component>
<table>
  <tr v-is="\'blog-post-row\'"></tr> // 这里相当于使用blog-post-row组件
</table>

HTML 属性名不区分大小写，因此浏览器将把所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值

9.自定义修饰符

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件

<div id="app">
  <my-component v-model.capitalize="myText"></my-component>
  {{ myText }}
</div>

const app = Vue.createApp({
  data() {
    return {
      myText: \'\'
    }
  }
})

app.component(\'my-component\', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit(\'update:modelValue\', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})

app.mount(\'#app\')