VUE

Vue简介

Vue.js (通常简称为 Vue) 是一款流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序(SPA)。

核心特点

渐进式框架：Vue 可以逐步采用，既可以用作轻量级的库来增强静态页面，也可以用作全功能的框架构建复杂应用。
响应式绑定：Vue 使用基于依赖追踪的响应式系统，数据变化时视图自动更新。
1. 　　比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值
组件化开发：将 UI 分解为可复用的组件，每个组件包含自己的模板、逻辑和样式。
1. 　　页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

Vue2.0 推荐开发环境

Vue项目创建

node环境
1. 安装node.js
  网站：Node.js — Run JavaScript Everywhere
2. 检查node环境安装
```
node -v

npm -v
```
  如果输出版本号，说明node环境安装成功
vue-cli环境
1. 全局安装@vue/cli
  网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js
2. 在命令行安装
```
npm install -g @vue/cli
```
3. 检查@vue/cli环境安装
```
vue --version
```
创建Vue项目
```
vue create projectName
```

项目启动

如果使用的VSCode，先使用 Ctrl + ` ，打开终端，然后在终端中输入 npm run serve。

也可以在左下角右键选择npm脚本，选择版本运行。

如果使用的是IDEA

Vue.js目录结构

通过@vue/cli创建的Vue初始项目，创建方式不同，可能会导致目录不同。

目录/文件	说明
node_modules	npm 加载的项目依赖模块
public	静态资源目录（不经过Webpack处理） index.html：主HTML模板文件 favicon.ico：网站图标
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets：静态资源（经过Webpack处理），放置一些图片，如logo等。 components：可复用组件。 views：路由级页面组件，也可以直接将页面写在这个目录中。 router：路由配置（Vue Router）。 store：状态管理（Vuex）。 App.vue：项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js：项目的核心文件。
.gitignore	git忽略规则
babel.config.js	Babel配置
package.json	项目依赖和脚本
package-lock.json	新增的锁文件
README.md	项目的说明文档，markdown 格式
vue.config.js	Vue CLI自定义配置（可选）

App.vue 初始代码

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

模板语法

文本插值

数据绑定的最基本形式是使用 “Mustache” 语法（双大括号）的文本插值：

<span>Message: {{ msg }}</span>

mustache 标签将替换为相应组件实例中的属性值。每当属性更改时，它也会更新。msgmsg

原始HTML

双 mustaches 将数据解释为纯文本，而不是 HTML。为了输出真正的 HTML，你需要使用 v-html指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

属性绑定

Mustaches 不能在 HTML 属性中使用。相反，请使用 v-bind指令：

<div v-bind:id="dynamicId"></div>

v-bind 是 Vue 中用于动态绑定 HTML 属性的指令，它解决了 Mustache 语法（双大括号 {{ }}）不能在 HTML 属性中使用的问题。

速记

<div :id="dynamicId"></div>

布尔属性

布尔属性是可以通过元素上的存在来指示 true / false 值的属性。例如，disabled 是最常用的布尔属性之一。

<button :disabled="isButtonDisabled">Button</button>

如果isButtonDisabled为truthy值，则disabled属性会被添加，如果isButtonDisabled为false值，则将省略该属性。

动态绑定多个属性

如果有一个表示多个属性的 JavaScript 对象，如下所示：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

可以通过不使用参数将它们绑定到单个元素：v-bind

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

使用 JavaScript 表达式

什么是表达式

表达式是一段可以计算并返回一个值的代码。与语句不同，表达式可以出现在需要值的地方。

表达式 VS 语句

表达式：产生一个值（1+1，x * y，func()）
语句：执行一个操作（if，for，let x = 10）

Vue 实际上在所有数据绑定中都支持 JavaScript 表达式的全部功能：

// 如果number的值为1，显示在页面上的结果将会是2
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

如果是语句，将不会起作用：

{{ var a = 1 }}

{{ if (ok) { return message } }}

调用函数

可以在绑定表达式中调用组件公开的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

工作原理：

当date或依赖的数据发生变化时，函数会重新执行。
每次渲染都会调用该函数

注意：被调用的函数不应该有任何副作用，例如更改数据或触发异步操作。

指令

指令 (Directives) 是 Vue 模板中最核心的特性之一，是带有 v- 前缀的特殊属性。Vue提供了许多内置的指令，例如v-bind、v-html

1、指令结构

Vue 指令由以下部分组成：

<element v-directive:argument.modifier="expression"></element>

v-directive：指令名称（如v-if、v-for）
argument：可选参数（v-on:click 中的 click）
.modifier：可选修饰符（v-on:click.stop 中的 stop）
="expression"：可选表达式或值

可视化的完整指令语法：

2、常见内置指令

指令	作用
`v-text`	更新元素的 `textContent`
`v-html`	更新元素的 `innerHTML`（注意 XSS 风险）
`v-show`	根据表达式真假值切换元素的 `display` CSS 属性
`v-if`	根据条件渲染或销毁元素
`v-else`	必须紧跟在 `v-if` 或 `v-else-if` 后
`v-else-if`	充当 `v-if` 的 "else if" 块
`v-for`	基于源数据多次渲染元素或模板块
`v-on`	绑定事件监听器（简写 `@`）
`v-bind`	动态绑定一个或多个属性（简写 `:`）
`v-model`	在表单控件或组件上创建双向绑定
`v-slot`	提供具名插槽或需要接收 prop 的插槽
`v-pre`	跳过这个元素和它的子元素的编译过程
`v-cloak`	保持在元素上直到关联实例结束编译（解决闪烁问题）
`v-once`	只渲染元素和组件一次，后续重新渲染将被跳过

3、指令详解

1、条件渲染指令

v-if vs v-show

<div v-if="isVisible">v-if 内容</div>
<div v-show="isVisible">v-show 内容</div>

区别：

v-if：真正的条件渲染，会销毁/重建组件，有更高的切换开销
v-show：只是简单的CSS显示切换，有更高的初始渲染开销

2、列表渲染指令 v-for

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.text }}
</li>

关键点：

必须使用 :key 提高性能（理想情况使用唯一ID）
可以遍历数组或对象
支持解构：v-for="{id,text} in items"

3、事件绑定指令 v-on

<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">点击</button>

修饰符：

.stop：调用event.stopPropagation()
.prevent：调用event.preventDefault()
.captur：添加事件侦听器时使用 capture 模式
.self：只当事件是从听器绑定的元素本身触发时才触发回调
.once：只触发一次
.passive：提升滚动性能

4、属性绑定指令 v-bind

<img v-bind:src="imageSrc">
<!-- 简写形式 -->
<img :src="imageSrc">

特殊用法：

绑定 class 对象语法：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

绑定 style 对象语法：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

5、双向绑定指令 v-model

<input v-model="message" placeholder="编辑我">
<p>输入的内容是：{{ message }}</p>

修饰符：

.lazy：转为在 change 事件后同步
.number：将输入值转为数值类型
.trim：自动过滤用户输入的首位空白字符

6、插槽指令 v-slot

<!-- 组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer" :user="user"></slot>
  </div>
</template>

<!-- 使用 -->
<my-component>
  <template v-slot:header>标题</template>
  
  默认内容
  
  <template v-slot:footer="slotProps">
    {{ slotProps.user.name }}
  </template>
</my-component>

简写：# 代替 v-slot：

<template #header>标题</template>

4、自定义指令

1、注册全局指令

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

2、注册局部指令

directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

3、钩子函数

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
update：所在组件的VNode更新时调用
componentUpdated：指令所在组件的VNode及其字VNode全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

4、钩子函数参数

el：指令所绑定的元素
binding：包含以下属性的对象
- name：指令名
- value：指令的绑定值
- oldValue：指令绑定的前一个值
- expression：字符串形式的指令表达式
- arg：传给指令的参数
- modifiers：包含修饰符的对象
vnode：Vue编译生成的虚拟节点
oldNode：上一个虚拟节点

5、使用示例

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
})

// 使用
<div v-pin:bottom="200">固定在距离底部200px的位置</div>

反应性基础

学不懂

计算属性

学不懂

类和样式绑定

绑定HTML类

绑定到对象

在 Vue 中，可以通过多种方式动态绑定 HTML 元素的 class 属性，实现根据应用状态改变元素样式的效果。

通过对象语法可以动态切换 class：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

对应脚本：

data() {
  return {
    isActive: true,    // 会添加 active 类
    hasError: false    // 不会添加 text-danger 类
  }
}

渲染结果：

<div class="active"></div>

当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

reactive是Composition API的写法，需要在setup()中使用。如果是Vue3，可以使用下列代码。

export default {
  setup() {
      const classObject = reactive({
          active: true,
          'text-danger': false
    });

    return {
      classObject
    };
  }
}

如果是Vue2或是习惯是Options API，需要使用下列代码：

export default {
  data() {
    return {
      isactive: true,
      isshow: false,
      classObject: {
        active: true,
        'text-danger': false
      }
    };
  }
}

不管使用的是哪一种API，引用和渲染都是一致的。

<div :class="classObject"></div>

这将渲染：

<div class = "active"></div>

也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

下面是Vue3的写法

import { ref, computed } from 'vue'

export default {
  setup() {
    const isActive = ref(true)
    // 触发计算属性的第一句代码
    const error = ref(null)
    // 触发计算属性的第二句代码
    // const error = ref({ type: 'fatal' })

    const classObj = ref({
      active: true,
      show: false
    })
    
    const classObject = computed(() => ({
      active: isActive.value && !error.value,
      'text-danger': error.value && error.value.type === 'fatal'
    }))
    
    return {
      isActive,
      error,
      classObj,
      classObject
    }
  }
}

如果是Vue2，需要用下面的写法：

export default {
  data() {
    return {
      isactive: true,
      error: null,
      // error: {type: 'fatal'},
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isactive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal' 
      };
    }
  }
};

调用方式还是一致的。

<div :class="classObject"></div>

绑定数组

可以给 :class 绑定一个数组来渲染多个 CSS class：

Vue3：

const activeClass = ref('active')
const errorClass = ref('text-danger')

Vue2：

export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    };
  },
};

<div :class="[activeClass, errorClass]"></div>

渲染的结果是：

<div class="active text-danger"></div>

如果想在数组中有条件地渲染某个 class，可以使用三元表达式：

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

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

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

绑定内联样式

绑定对象

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：

Vue3：

export default {
  setup(){
    const activeColor = ref('red');
    const fontSize = ref(50);
    return {activeColor: activeColor, fontSize: fontSize};
  }
};

Vue2：

data(){
  return {
    activeColor:'red',
    fontSize:'22'
  }
}

调用：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">youxi</div>

如果直接绑定样式对象，将会更加简洁：

Vue3：

  setup(){
    const styleObj = reactive({
      color:'red',
      fontSize:'22px'

    })
    return {
      styleObj
    }
  }

Vue2：

  data(){
    return{
      styleObj:{
        color:'blue',
        fontSize:'50px'
      }
    }
  }

调用：

<div :style="styleObj">案例</div>

样式多值

可以对一个样式属性提供多个 (不同前缀的) 值。如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。

事件处理

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

内联事件处理器通常用于简单场景，例如：

const count = ref(0)

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

事件修饰符

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

注意：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

注意：请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。

按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

也可以直接使用Vue2.1引入的案件修饰符的拓展功能，它允许直接使用keyboardEvent.key暴露的按键名称作为修饰符，但需要转化为 kebab-case（短横线分隔）形式。

1、keyboardEvent.key

当键盘事件（如 keyup、keydown）触发时，浏览器会生成一个 KeyboardEvent 对象，其中的 key 属性返回按下的键的名称（而不是键码 keyCode）。例如：

按下 Page Down 键时，event.key === 'PageDown'
按下 - 键时，event.key === '-'
按下 ArrowUp 键时，event.key === 'ArrowUp'

2、Vue 的按键修饰符支持event.key名称

Vue 允许直接使用这些 event.key 的值作为修饰符，但需要转换为 kebab-case（短横线分隔的小写形式），例如：

PageDown → page-down
ArrowUp → arrow-up
Escape → escape（但 Vue 也提供了简写 .esc）

3、案例

<input @keyup.page-down="onPageDown" />

这里 page-down 是 event.key === 'PageDown' 的 kebab-case 形式。
只有当用户按下 Page Down 键时，才会触发 onPageDown 方法。

常见event.key和修饰符对应示例

实际按键	event.key值	Vue 修饰符写法
`Page Down`	`'PageDown'`	`.page-down`
`Arrow Up`	`'ArrowUp'`	`.arrow-up`
`/`	`'/'`	`.slash`
`Caps Lock`	`'CapsLock'`	`.caps-lock`
`F1`	`'F1'`	`.f1`
空格	`' '`	`.space`

按键别名

Vue 为一些常用的按键提供了别名：

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

系统按键修饰符

.ctrl
.alt
.shift
.meta

`.exact` 修饰符

可以确保事件只在精确匹配的按键组合下触发。

<!-- 仅当按下 Ctrl 且没有其他系统修饰键时触发 -->
<button @click.ctrl.exact="onCtrlClick">仅 Ctrl 点击</button>

<!-- 只在没有任何系统修饰键按下时触发 -->
<button @click.exact="onPureClick">纯点击</button>

鼠标按键修饰符

.left
.right
.middle

表单输入绑定

基本用法

文本输入（text）

<input v-model="message" placeholder="编辑我">
<p>输入的内容是: {{ message }}</p>

文本域（textarea）

<textarea v-model="message" placeholder="多行输入"></textarea>
<p>输入的内容是: {{ message }}</p>

注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框（checkbox）

单个复选框 - 绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框 - 绑定到数组或者集合：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>选中的名字: {{ checkedNames }}</span>

单选按钮

<template>
  <div>Picked: {{ picked }}</div>

	<input type="radio" id="one" value="One" v-model="picked" />
	<label for="one">One</label>

	<input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
</template>

<script setup>
    import { ref } from 'vue'

    const picked = ref('One')
</script>

选择器

单个选择器的示例如下：

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

disabled的作用是：

将第一个选项标记为不可选的占位提示
确保即使用户未主动选择，也不会意外提交空值
配合v-model实现清晰的“未选择”状态

值绑定

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。与传统的 true/false 在功能上没有本质区别，它们都是用来表示复选框的两种状态。

核心区别在于：

传统v-model（布尔值）
- 适用于前端逻辑控制（如v-if、v-show、计算属性）
- 值是true/false，符合JavaScript的布尔逻辑
true-vlaue/false-value（自定义值）
- 适用于对接后端API或数据库，避免额外的数据转换
- 值可以是任意值（如yes/no、1/0、active/inactive）

单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。

选择器选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。

修饰符

如果想同时使用多个修饰符，可以链式使用修饰符来同时实现，比如同时使用.trim和.number：

<input v-model.trim.number = "gmail">

`.lazy`

.lazy 修饰符改变了 v-model 默认的数据同步时机，从实时同步变为延迟同步。

数据同步时机：每当用户输入一个字符（触发 input 事件），数据立即更新

默认行为：

<input v-model="message">

示例流程：

用户输入 "h" → message 变为 "h"
用户输入 "e" → message 变为 "he"
用户输入 "l" → message 变为 "hel"
用户输入 "l" → message 变为 "hell"
用户输入 "o" → message 变为 "hello"

使用.lazy修饰符：

<input v-model.lazy="message">

数据同步时机：只有当输入框失去焦点（触发 change 事件）时，数据才会更新

示例流程：

用户输入 "h" → 数据未更新
用户输入 "e" → 数据未更新
用户输入 "l" → 数据未更新
用户输入 "l" → 数据未更新
用户输入 "o" → 数据未更新
用户点击其他地方使输入框失去焦点 → message 变为 "hello"

`.number`

如果想让输入的内容自动转换为数字，可以在 v-model 后添加 .number 修饰符来管理输入：

<input v-model.number="age" />

注意：

如果输入值无法被 parseFloat() 解析，则会返回原始字符串
即使 type="number"，HTML 输入元素的值也总是返回字符串

`.trim`

如果想要默认自动去除用户输入内容中的首尾空白字符，你可以在 v-model 后添加 .trim 修饰符：

<input v-model.trim="msg" />

组件使用

在工程目录/src下创建component文件夹，并在component文件夹下创建一个 FirstComponent.vue并写仿照 App.vue 的格式写一个组件。

<template>
  <div id="FirstComponent">
    <h1>I am a title.</h1>
    <a> written by {{ author }} </a>
  </div>
</template>
 
<script type="text/javascript">
export default {
  data () {
    return {
      author: "linan"
    }
  }
}
</script>

然后在 App.vue 使用组件

第一步，引入。在<script></script>标签内的第一行写

import FirstComponent from './component/FirstComponent.vue'

第二步，注册。在<script></script>标签内的 data 代码块后面加上 components: { FirstComponent}。记得中间加英文逗号!!!

export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: {
      FirstComponent
  }
}

第三步，使用。在<template></template>内加上<FirstComponent/>。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <FirstComponent/>
  </div>
</template>

完整代码为：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>{{msg}}}</h1>
    <FirstComponent/>
  </div>

</template>

<script>
import FirstComponent from './components/FirstComponent.vue'


export default {
  name: 'App',
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  components: {
    FirstComponent
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意：组件被引用，但未被使用，会有警告：ESLint: The "FirstComponent" component has been registered but not used. (vue/no-unused-components)可以用注释表示该组件稍后会用到：// eslint-disable-next-line vue/no-unused-components

生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

注册周期钩子

posted @ 2025-06-27 11:33 YOKAI13 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

YoKai07

VUE

Vue简介

核心特点

Vue2.0 推荐开发环境

Vue项目创建

项目启动

Vue.js目录结构

App.vue 初始代码

模板语法

文本插值

原始HTML

属性绑定

速记

布尔属性

动态绑定多个属性

使用 JavaScript 表达式

什么是表达式

表达式 VS 语句

调用函数

指令

1、指令结构

2、常见内置指令

3、指令详解

4、自定义指令

反应性基础

计算属性

类和样式绑定

绑定HTML类

绑定到对象

绑定数组

绑定内联样式

绑定对象

样式多值

事件处理

监听事件

内联事件处理器

方法事件处理器

事件修饰符

按键修饰符

按键别名

系统按键修饰符

.exact 修饰符

鼠标按键修饰符

表单输入绑定

基本用法

文本输入（text）

文本域（textarea）

复选框（checkbox）

单选按钮

选择器

值绑定

复选框

单选按钮

选择器选项

修饰符

.lazy

.number

.trim

组件使用

生命周期钩子

注册周期钩子

公告

`.exact` 修饰符

`.lazy`

`.number`

`.trim`