【前端知识】Javascript前端框架Vue入门

前端框架VUE入门

- 概述
- 基础语法介绍
- 组件特性
- - 组件注册
  - [Props 属性声明](#Props 属性声明)
  - 事件
  - [组件 v-model(双向绑定)](#组件 v-model(双向绑定))
  - 插槽Slots内容与出口
- 组件生命周期
- 样式文件使用
- - [1. 直接在`<style>`标签中写CSS](#1. 直接在<style>标签中写CSS)
  - [2. 引入外部CSS文件](#2. 引入外部CSS文件)
  - [3. 使用CSS预处理器](#3. 使用CSS预处理器)
  - [4. 在`main.js`中全局引入CSS文件](#4. 在main.js中全局引入CSS文件)
  - [5. 使用CSS Modules](#5. 使用CSS Modules)
  - [6. 使用PostCSS](#6. 使用PostCSS)
- 完整示例
- - [1. 创建 Vue 项目（如果还没有）](#1. 创建 Vue 项目（如果还没有）)
  - [2. 定义和使用组件](#2. 定义和使用组件)
  - [3. 在主应用中使用组件](#3. 在主应用中使用组件)
  - [4. 运行应用](#4. 运行应用)
  - 完整项目结构
- 参考文献

概述

Vue.js（发音为 /vjuː/，类似于 "view"）是一款用于构建用户界面的JavaScript框架。以下是Vue.js的一些核心特点和介绍：

渐进式框架：Vue被设计为可以自底向上逐层应用，使其成为一个渐进式框架。这意味着开发者可以逐步地采用Vue.js，而不必一开始就完全重写现有的项目。
视图层关注：Vue的核心库只关注视图层，易于上手，并且便于与第三方库或既有项目整合。
MVVM架构：Vue.js是一个提供了MVVM（Model-View-ViewModel）风格双向数据绑定的JavaScript库，专注于View层。它的核心是ViewModel，负责连接View和Model，保证视图和数据的一致性。
轻量级框架：Vue.js能够自动追踪依赖的模板表达式和计算属性，提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
双向数据绑定：Vue.js允许采用简洁的模板语法将数据声明式渲染整合进DOM，这是Vue.js的核心特性之一。
指令和组件化：Vue.js通过内置指令与页面进行交互，并且支持组件化开发，使得开发者可以构建可复用的组件。
响应性：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。
生态系统：Vue不仅仅是一个框架，它还包括了一系列现代化的工具链和支持类库，如vue-router、vuex等，可以为复杂的单页应用提供完整的解决方案。
灵活性：Vue的简单小巧的核心和渐进式技术栈使其足以应对任何规模的应用。
性能：Vue.js拥有20kb的min+gzip运行大小和超快的虚拟DOM性能，提供了最省心的优化。

Vue.js适用于从简单到复杂的各种界面开发，并且由于其灵活性和渐进式的特性，它成为了生产环境中广泛使用的一个JavaScript框架之一。

基础语法介绍

Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。以下是Vue.js的一些基础语法：

声明式渲染：
html 复制代码
```
<div id="app">
  {{ message }}
</div>
```
在Vue实例中，message 是一个响应式的数据属性。
数据绑定：
html 复制代码
```
<div id="app">
  <p>{{ user.name }}</p>
</div>
```
这里，user 是一个对象，name 是它的属性。
指令：
- v-bind：用于动态地绑定一个或多个属性，或一个组件prop到表达式。
  html 复制代码
```
<img v-bind:src="imageSrc">
```
- v-model：在表单输入和应用状态之间创建双向数据绑定。
  html 复制代码
```
<input v-model="message">
```
- v-on：监听DOM事件并在事件触发时执行表达式。
  html 复制代码
```
<button v-on:click="counter += 1">增加</button>
```
- v-for：基于源数据多次渲染元素或模板块。
  html 复制代码
```
<li v-for="item in items">{{ item.text }}</li>
```
- v-if、v-else-if、v-else：条件渲染。
  html 复制代码
```
<p v-if="user.isLoggedIn">欢迎回来！</p>
```
- v-show：根据表达式的真假值切换元素的CSS display 属性。
  html 复制代码
```
<p v-show="user.isLoggedIn">欢迎回来！</p>
```

计算属性：

javascript 复制代码

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

使用 fullName 时，它将自动更新。

方法：

html 复制代码

<button v-on:click="sayHello">Say hello</button>

javascript 复制代码

new Vue({
  el: '#app',
  methods: {
    sayHello: function () {
      alert('Hello, ' + this.fullName);
    }
  }
});

事件处理：

html 复制代码

<button v-on:click="say('Hello')">Say Hello</button>

javascript 复制代码

new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
});

组件：

javascript 复制代码

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

在父组件中使用：

html 复制代码

<my-component></my-component>

生命周期钩子：

javascript 复制代码

new Vue({
  el: '#app',
  created: function () {
    console.log('Vue instance created');
  }
});

表单输入绑定：

html 复制代码

<input v-model="message" placeholder="edit me">

列表渲染：

html 复制代码

<ul id="list">
  <li v-for="item in items">{{ item.text }}</li>
</ul>

这些是Vue.js中一些基础的语法和概念，Vue.js的功能远不止这些，还有更多高级特性等待探索。

组件特性

组件注册

全局注册

javascript 复制代码

import { createApp } from 'vue'
const app = createApp({})
app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，你可以注册被导入的 .vue 文件

javascript 复制代码

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Props 属性声明

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

defineProps方式

javascript 复制代码

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

使用props属性的方式

javascript 复制代码

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

javascript 复制代码

<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件：

javascript 复制代码

<MyComponent @some-event="callback" />

同样，组件的事件监听器也支持 .once 修饰符：

javascript 复制代码

<MyComponent @some-event.once="callback" />

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

组件 v-model(双向绑定)

javascript 复制代码

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值：

javascript 复制代码

<!-- Parent.vue -->
<Child v-model="countModel" />

插槽Slots内容与出口

举例来说，这里有一个组件，可以像这样使用：

javascript 复制代码

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>

而的模板是这样的：

javascript 复制代码

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

组件生命周期

Vue组件的生命周期指的是组件从创建到销毁的整个过程，Vue为这个生命周期提供了一系列的钩子函数，允许我们在不同阶段执行代码。以下是Vue组件的主要生命周期钩子：

beforeCreate：
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 在这个阶段，组件实例的 data 和 methods 还未被设置，因此不能访问 data 和 methods。
created：
- 实例已经创建完成，数据观测 (data observer)、属性和方法的运算，watch/event 事件回调。
- 然而，挂载阶段还没开始，$el 属性目前不可见，$el 会在 beforeMount 钩子中被创建。
beforeMount：
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
- 此时 $el 已经被创建，你可以访问到 $el，但 $el 还没有被插入文档。
mounted：
- 挂载结束：$el 已经被新创建的 vm.$el 替换了，data 已经被设置，所有的子组件也都挂载完成了。
- 可以执行DOM操作，如访问子组件实例或执行DOM操作。
beforeUpdate：
- 在数据变化之后，DOM重新渲染之前调用，此时可以在这个钩子中进一步地更改状态，这不会触发额外的重渲染。
updated：
- 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
- 可以执行依赖于DOM的操作。
beforeDestroy：
- 实例销毁之前调用。在这一步，实例仍然完全可用。
- 可以执行清理工作，例如解绑事件。
destroyed：
- Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
- 该钩子的调用标志着实例生命周期的结束。
errorCaptured (全局混入或组件内)：
- 当捕获一个来自子孙组件的错误时被调用。这成为了"全局"生命周期钩子的一部分，也可用于组件内。
- 它提供了两个参数：错误对象和错误来源的组件实例。
activated 和 deactivated：
- 这两个钩子函数仅在 keep-alive 组件中生效。
- activated 在缓存组件被激活时调用。
- deactivated 在缓存组件被停用时调用。

这些生命周期钩子函数提供了在组件的不同阶段执行代码的能力，使得开发者可以更好地控制组件的行为和状态。

样式文件使用

在Vue项目中引入CSS可以通过多种方式，以下是几种常用的方法：

1. 直接在`<style>`标签中写CSS

在Vue组件的<style>标签中直接编写CSS，这样CSS只会作用于当前组件：

vue 复制代码

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style scoped>
.my-component {
  /* 样式只会应用到当前组件 */
}
</style>

使用scoped属性可以确保样式只作用于当前组件，避免影响到其他组件。

2. 引入外部CSS文件

在Vue组件中引入外部的CSS文件：

vue 复制代码

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style>
@import './path/to/your-styles.css';
</style>

3. 使用CSS预处理器

Vue CLI支持Sass、Less等CSS预处理器，可以在项目中引入预处理器并使用：

vue 复制代码

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style lang="scss" scoped>
.my-component {
  // 使用Sass语法
  $color: #333;
  background-color: $color;
}
</style>

4. 在`main.js`中全局引入CSS文件

如果你想在全局范围内使用某个CSS文件，可以在项目的入口文件main.js中引入：

javascript 复制代码

import Vue from 'vue';
import App from './App.vue';
import './assets/global.css'; // 全局引入CSS文件

new Vue({
  render: h => h(App),
}).$mount('#app');

5. 使用CSS Modules

CSS Modules是一种CSS本地化技术，可以在Vue中使用：

vue 复制代码

<template>
  <div :class="$style.myComponent">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style module>
.myComponent {
  /* 样式 */
}
</style>

在模板中使用:class="$style.myComponent"来应用样式，CSS Modules会自动处理类名，使其唯一，避免全局污染。

6. 使用PostCSS

PostCSS是一个用JavaScript工具和插件转换CSS代码的工具，可以在Vue CLI项目中配置PostCSS来实现自动前缀添加、变量处理等功能。

以上是在Vue项目中引入CSS的几种方法，你可以根据项目需求和个人喜好选择合适的方式。

完整示例

以下是一个简单的 Vue.js 组件定义和使用的完整代码示例。我们将创建一个名为 HelloWorld 的组件，并在一个 Vue 应用中使用它。

1. 创建 Vue 项目（如果还没有）

首先，如果你还没有 Vue 项目，你可以使用 Vue CLI 创建一个新的 Vue 项目。在命令行中运行以下命令：

bash 复制代码

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

2. 定义和使用组件

在 src/components 目录下创建一个新的文件 HelloWorld.vue，并添加以下代码：

vue 复制代码

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Welcome to your Vue.js app with a custom component!</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

这个组件包含一个简单的模板，它显示一个标题和一个段落。它还有一个名为 msg 的 prop，你可以将外部数据传递给这个 prop。

3. 在主应用中使用组件

打开 src/App.vue 文件，并修改它以便使用 HelloWorld 组件：

vue 复制代码

<!-- src/App.vue -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue.js!" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

在这个文件中，我们导入了 HelloWorld 组件，并在模板中使用了它。我们传递了一个 msg prop，其值为 "Hello Vue.js!"。

4. 运行应用

确保你的开发服务器正在运行（在 my-vue-app 目录下运行 npm run serve）。然后，打开浏览器并访问 http://localhost:8080，你应该能看到应用已经正确渲染了 HelloWorld 组件的内容。

完整项目结构

你的项目结构应该类似于这样：

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

现在你已经成功定义了一个 Vue 组件并在你的 Vue 应用中使用了它！

参考文献

vue官网地址

【前端知识】Javascript前端框架Vue入门

前端框架VUE入门

概述

基础语法介绍

组件特性

组件注册

Props 属性声明

事件

组件 v-model(双向绑定)

插槽Slots内容与出口

组件生命周期

样式文件使用

1. 直接在<style>标签中写CSS

2. 引入外部CSS文件

3. 使用CSS预处理器

4. 在main.js中全局引入CSS文件

5. 使用CSS Modules

6. 使用PostCSS

完整示例

1. 创建 Vue 项目（如果还没有）

2. 定义和使用组件

3. 在主应用中使用组件

4. 运行应用

完整项目结构

参考文献

1. 直接在`<style>`标签中写CSS

4. 在`main.js`中全局引入CSS文件