关于javascript:初步学习Vue

10次阅读

共计 2266 个字符，预计需要花费 6 分钟才能阅读完成。

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

正文完