初步学习Vue

​ 以前用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')