Vue.js 基础知识内容（前端开发必备）

Vue.js 是一个渐进式的 JavaScript 框架，主要用于构建用户界面。Vue 的核心库只关注视图层，便于与其他库或现有项目集成。与其他框架相比，Vue 更易于学习和使用，适合构建单页应用（SPA）。

Vue 介绍

Vue.js（通常简称为 Vue）是一个用于构建用户界面的开源 JavaScript 框架。它是由尤雨溪创建的，并且在过去几年中得到了广泛的使用和认可。Vue 的设计目标是易于上手，渐进式地应用到项目中，同时提供强大的功能和灵活性。

Vue 安装

Vue 可以通过多种方式安装和使用：

1. 通过 CDN 引入：

   这种方式适合快速原型开发或简单的页面。

   <script src="https://cdn.jsdelivr.net/npm/vue@3.2.0/dist/vue.global.js"></script> 

2. 通过 npm 安装：

   适用于基于模块化开发的项目，尤其是使用构建工具（如 webpack 或 Parcel）的项目。

   npm install vue@next 

3. 使用 Vue CLI：

   Vue CLI 是官方提供的脚手架工具，帮助快速搭建项目。

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

Vue 基础

插值表达式 {{表达式}}

插值表达式用于在页面中动态地显示数据。Vue 使用双花括号 {{ }} 来进行插值表达式。

<div id="app">   {{ message }} </div>  <script>   const app = Vue.createApp({     data() {       return {         message: 'Hello Vue 3!'       }     }   });   app.mount('#app'); </script> 

在上面的例子中，Vue 实例绑定到 #app 元素，并且 message 的值会显示在 div 中。

插值闪烁

在网络较慢时，数据未加载完全会显示出花括号 {{}}，而不是数据，这种现象被称为插值闪烁。为了解决这个问题，可以使用 v-cloak 指令。

<div id="app" v-cloak>   {{ message }} </div> 

在 CSS 中添加以下样式：

[v-cloak] {   display: none; } 

这样在 Vue 实例准备完毕之前，带有 v-cloak 的元素会保持隐藏。

Vue 实例

每个 Vue 应用都是通过创建一个 Vue 实例开始的。你可以在创建 Vue 实例时传递一个选项对象。

const app = Vue.createApp({   data() {     return {       message: 'Hello Vue 3!'     }   } }); app.mount('#app'); 

Vue 指令

Vue 指令是带有 v- 前缀的特殊属性，提供了许多功能，比如数据绑定、事件监听等。常见指令如下：

v-model

v-model 指令用于实现表单控件与应用数据之间的双向绑定。

<div id="app">   <input v-model="message">   <p>{{ message }}</p> </div>  <script>   const app = Vue.createApp({     data() {       return {         message: 'Hello Vue 3!'       }     }   });   app.mount('#app'); </script> 

在这个例子中，输入框的值会随着 message 的变化而变化，反之亦然。

v-on

v-on 指令用于监听 DOM 事件并在触发时执行一些 JavaScript。

<div id="app">   <button v-on:click="doSomething">Click me</button> </div>  <script>   const app = Vue.createApp({     methods: {       doSomething() {         alert('Button clicked!');       }     }   });   app.mount('#app'); </script> 

v-on 也可以缩写为 @。

<button @click="doSomething">Click me</button> 

v-html

v-html 指令用于输出 HTML 内容。需要注意的是，使用 v-html 时，可能会导致 XSS 攻击，务必确保插入的 HTML 是可信的。

<div id="app">   <div v-html="htmlContent"></div> </div>  <script>   const app = Vue.createApp({     data() {       return {         htmlContent: '<p>This is some <strong>HTML</strong> content.</p>'       }     }   });   app.mount('#app'); </script> 

单向绑定

单向绑定是指数据只能从 JavaScript 传递到 DOM，不会反向更新。

v-text

v-text 指令用于更新元素的文本内容，类似于插值表达式。

<div id="app">   <span v-text="message"></span> </div>  <script>   const app = Vue.createApp({     data() {       return {         message: 'Hello Vue 3!'       }     }   });   app.mount('#app'); </script> 

双向绑定

通过 v-model 可以实现表单控件与数据的双向绑定。

<div id="app">   <input v-model="message"> </div>  <script>   const app = Vue.createApp({     data() {       return {         message: 'Hello Vue 3!'       }     }   });   app.mount('#app'); </script> 

在这个例子中，输入框的值和 message 数据会实时同步。

元素绑定事件

使用 v-on 或 @ 可以绑定事件到页面元素。

<div id="app">   <button v-on:click="handleClick">Click me</button> </div>  <script>   const app = Vue.createApp({     methods: {       handleClick() {         alert('Button clicked!');       }     }   });   app.mount('#app'); </script> 

事件修饰符

Vue 提供了一些事件修饰符，以简化常见的事件处理逻辑。

.stop

阻止事件冒泡：

<button @click.stop="handleClick">Click me</button> 

.prevent

阻止默认事件：

<form @submit.prevent="handleSubmit">...</form> 

.capture

使用事件捕获模式：

<button @click.capture="handleClick">Click me</button> 

.self

只有元素自身触发事件时才执行：

<div @click.self="handleClick">...</div> 

.once

事件只执行一次：

<button @click.once="handleClick">Click me</button> 

循环遍历

通过 v-for 可以循环遍历数组和对象。

遍历数组

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

迭代对象

<ul>   <li v-for="(value, key, index) in object" :key="key">     {{ key }}: {{ value }}   </li> </ul> 

条件渲染

v-if

根据表达式的值决定是否渲染：

<p v-if="seen">Now you see me</p> 

v-show

元素会保留在 DOM 中，只是用 CSS 属性将其隐藏：

<p v-show="seen">Now you see me</p> 

v-else 和 v-else-if

<p v-if="type === 'A'">A</p> <p v-else-if="type === 'B'">B</p> <p v-else>C</p> 

绑定属性

v-bind

用于绑定 HTML 属性：

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

计算属性

计算属性是基于其依赖进行缓存的。它们只有在其依赖发生改变时才会重新计算。

const app = Vue.createApp({   data() {     return {       firstName: 'Foo',       lastName: 'Bar'     }   },   computed: {     fullName() {       return this.firstName + ' ' + this.lastName;     }   } }); app.mount('#app'); 

监控属性

使用 watch 来响应数据变化。与计算属性不同的是，watch 允许执行异步操作或昂贵的处理逻辑。

const app = Vue.createApp({   data() {     return {       question: '',       answer: 'I cannot give you an answer until you ask a question!'     }   },   watch: {     question(newQuestion) {       this.answer = 'Waiting for you to stop typing...'       this.getAnswer()     }   },   methods: {       getAnswer: _.debounce(function () {       if (this.question.indexOf('?') === -1) {         this.answer = 'Questions usually contain a question mark. ;-)'         return       }       this.answer = 'Thinking...'     }, 500)   } }); app.mount('#app'); 

深度监控

对于复杂对象，可以使用 deep: true 选项。

const app = Vue.createApp({   data() {     return {       someObject: {         a: 1,         b: 2       }     }   },   watch: {     someObject: {       handler(val, oldVal) {         console.log('Object changed')       },       deep: true     }   } }); app.mount('#app'); 

Vue 组件化

Vue 组件系统使得开发者可以将应用分割成独立的、可复用的组件。

注册全局组件

const app = Vue.createApp({}); app.component('my-component', {   template: '<div>A custom component!</div>' }); app.mount('#app'); 

局部注册

const app = Vue.createApp({   components: {     'my-component': {       template: '<div>A custom component!</div>'     }   } }); app.mount('#app'); 

组件通信

父向子传递 props

app.component('child', {   props: ['message'],   template: '<span>{{ message }}</span>' }); 

父组件中使用：

<child message="Hello!"></child> 

子向父通信

通过事件：

app.component('child', {   template: '<button @click="notify">Notify</button>',   methods: {     notify() {       this.$emit('notify')     }   } }); 

父组件中监听：

<child @notify="handleNotify"></child> 

使用 axios 进行 AJAX 请求

首先安装 axios：

npm install axios 

基本用法

axios.get('/user?ID=12345')   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   }); 

各种请求类型

axios.post('/user', {   firstName: 'Fred',   lastName: 'Flintstone' }) .then(function (response) {   console.log(response); }) .catch(function (error) {   console.log(error); }); 

其他请求类型有 axios.delete, axios.head, axios.put, axios.patch 等。

通过 v-for 和 v-if 实现复杂逻辑

<div id="app">   <ul>     <li v-for="(item, index) in items" :key="index">       {{ item }}       <button @click="removeItem(index)">Remove</button>     </li>   </ul>   <p v-if="items.length === 0">No items left.</p>   <p v-else-if="items.length === 1">Only one item left.</p>   <p v-else>There are {{ items.length }} items.</p> </div>  <script>   const app = Vue.createApp({     data() {       return {         items: ['Item 1', 'Item 2', 'Item 3']       }     },     methods: {       removeItem(index) {         this.items.splice(index, 1);       }     }   });   app.mount('#app'); </script> 

Vue 3 的新特性

组合式 API（Composition API）

Vue 3 引入了组合式 API，允许开发者更灵活地组织组件逻辑。

import { createApp, ref } from 'vue';  const app = createApp({   setup() {     const count = ref(0);     function increment() {       count.value++;     }     return { count, increment };   },   template: `     <div>       <button @click="increment">Count is {{ count }}</button>     </div>   ` }); app.mount('#app'); 

响应性系统改进

Vue 3 中响应性系统得到了显著改进，性能更好，并且更容易调试。

Teleport 组件

<teleport> 组件允许你将子组件渲染到 DOM 树中的其他位置。

<teleport to="body">   <div class="modal">I'm in the body tag now.</div> </teleport> 

Fragment 支持

Vue 3 支持多个根节点，这意味着组件模板不再需要一个唯一的根元素。

const app = Vue.createApp({   template: `     <header>Header</header>     <main>Main content</main>     <footer>Footer</footer>   ` }); app.mount('#app'); 

更好的 TypeScript 支持

Vue 3 提供了更好的 TypeScript 支持，使得与 TypeScript 的集成更加顺畅。

以上就是 Vue.js 的一些基础知识和 Vue 3 的新特性。希望这篇文章能帮助你更好地理解和使用 Vue.js。Happy coding!