1.1 基础vue知识点汇总

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 955 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

建议阅览完官方文档后在查阅该文章

根组件

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)
// 将应用挂载到页面上的 #app 元素
app1.mount('#container-1')

基本语法样式

{{ message }} 可以根据样式进行事实更新。

支持简单的输出运算。
也支持简单的函数表达。

vbind 的缩减写法：:属性值=“绑定的值”。

**连续绑定多个值：**通过使用json对象。

//可以通过这种方式动态的表达多个值
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>

**属性绑定对象：**绑定对象（json对象）。

<div :class="{ active: isActive }"></div>
//这其中isActive为Bool值。

**制定对象：**绑定的类可以传递给子模板，子模板可以通过$attrs 来决定哪些根组件会接收。

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<!-- 组件使用的情况-->
<MyComponent class="baz" />

模板中，自动解包特性省去了 .value 的显式操作。Vue 会自动处理 currentTab 的赋值，确保更新的是 currentTab.value。

响应式计算：

reactive，computer

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回。

这能够实时更新dom元素。
支持任何数据结构，只要数据结构中的值发生变化，ref值都会发生对应的变化。
只有顶级的 ref 属性才会被解包
这就像是代码核心的心脏。

reactive的用法和ref（）的用法相同，但会使响应状态本身具备响应性。

返回的是一个原始对象的代理对象。
不论reactive同一个原始对象多少次，最后总会返回同一个代理对象。

computed() 用于通过入参为函数，通过注入函数能够根据响应数据的变化动态变化。defineProps(['title'])

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

watch（监听属性值，监听到时执行的函数(监听属性值)->{}）

监听属性值可以是列表，getter函数(简单的匿名函数)

判断与循环：

v-if v-else v-else-if 能够决定显示哪个元素，显示哪些元素。

<h1 v-if="awesome">Vue is awesome!</h1>
v-for : ”in“ 能够重复输出一个元素，实现循环输出。
你需要为每个元素对应的块提供一个唯一的 key。

v-on ：简写为@ ，写法：@ 被监听方法名 = ”触发的js语句“用于监听方法。

可以使用（event）=>{} 来获取事件的值。
.stop 在事件后面可以这么写，作用是阻止子元素的监听事件冒泡到父元素。
.prevent 意思是阻止链接跳转。

$emit('你要输入的事件名') 使用这种方法将能从子端传递事件给父端

应该是可以通过设定相同的入参把参数传递给父端的，等会试试。

<slot */*>作为占位符，从父端的<html>内容</html> 的内容将会传递到子端的slot中。

通过<component> 元素和特殊的 is 属性可以实现特殊的组件切换：

例如：

<!-- currentTab 改变时组件也改变 -->
<component :is="tabs[currentTab]"></component>

defineprops 是一个函数，内部可以放置对象{}，作用是让子组件接收到父组件传递的全局变量，可以使用watch(()⇒{全局变量},监听方法)来监听变量。
- useComposable(() => 全局变量) 可以在外部获取到全局变量

在子组件中使用中直接使用defineModel()例如const model = defineModel()

可以进行双向的数据绑定，父组件可以通过这种方式<Child v-model="countModel" /> 传值，子组件便可以通过model.value的形式获取数据。

如果需要多个双向绑定，那么：父组件：v-model:first-name="first” ，子组件：const firstName = defineModel('firstName') ，通过这种方式就可以获取到变量。

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')，能够跨越多层组件，直接把值注入到子子层。子子层需要使用const message = inject('message') 的方式来接收数据。