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

Vue 介绍

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

Vue 安装

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

1. 通过 CDN 引入：

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

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 使用双花括号 {{ }} 来进行插值表达式。

   {{ message }} 
   

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

插值闪烁

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

   {{ message }} 
 

在 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 指令用于实现表单控件与应用数据之间的双向绑定。

      
{{ message }}
 
   

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

v-on

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

   Click me 
   

v-on 也可以缩写为 @。

Click me 

v-html

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

单向绑定

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

v-text

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

双向绑定

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

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

元素绑定事件

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

   Click me 
   

事件修饰符

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

.stop

阻止事件冒泡：

Click me 

.prevent

阻止默认事件：

...
 

.capture

使用事件捕获模式：

Click me 

.self

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

...
 

.once

事件只执行一次：

Click me 

循环遍历

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

遍历数组

   
     {{ item }}   
 
 

迭代对象

   
     {{ key }}: {{ value }}   
 
 

条件渲染

v-if

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

Now you see me
 

v-show

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

Now you see me
 

v-else 和 v-else-if

A
 
B
 
C
 

绑定属性

v-bind

用于绑定 HTML 属性：

计算属性

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

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: '
A custom component!
' }); app.mount('#app'); 

局部注册

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

组件通信

父向子传递 props

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

父组件中使用：

子向父通信

通过事件：

app.component('child', {   template: 'Notify',   methods: {     notify() {       this.$emit('notify')     }   } }); 

父组件中监听：

使用 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 实现复杂逻辑

   
     
       {{ item }}       Remove     
   
   
No items left.
   
Only one item left.
   
There are {{ items.length }} items.
 
   

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: `     
       Count is {{ count }}     
   ` }); app.mount('#app'); 

响应性系统改进

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

Teleport 组件

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

   
I'm in the body tag now.
  

Fragment 支持

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

const app = Vue.createApp({   template: `     
Header
     
Main content
        ` }); app.mount('#app'); 

更好的 TypeScript 支持

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

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