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

2024-06-13 11:37:38 浏览数 (1)

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

Vue 介绍

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

Vue 安装

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

  1. 通过 CDN 引入：

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

代码语言：html复制
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.0/dist/vue.global.js"></script>
  1. 通过 npm 安装：

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

代码语言：bash复制
npm install vue@next
  1. 使用 Vue CLI：

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

代码语言：bash复制
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

Vue 基础

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

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

代码语言：html复制
<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 指令。

代码语言：html复制
<div id="app" v-cloak>
  {{ message }}
</div>

在 CSS 中添加以下样式：

代码语言：css复制
[v-cloak] {
  display: none;
}

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

Vue 实例

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

代码语言：javascript复制
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
});
app.mount('#app');

Vue 指令

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

v-model

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

代码语言：html复制
<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。

代码语言：html复制
<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 也可以缩写为 @。

代码语言：html复制
<button @click="doSomething">Click me</button>
v-html

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

代码语言：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 指令用于更新元素的文本内容，类似于插值表达式。

代码语言：html复制
<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 可以实现表单控件与数据的双向绑定。

代码语言：html复制
<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 或 @ 可以绑定事件到页面元素。

代码语言：html复制
<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

阻止事件冒泡：

代码语言：html复制
<button @click.stop="handleClick">Click me</button>
.prevent

阻止默认事件：

代码语言：html复制
<form @submit.prevent="handleSubmit">...</form>
.capture

使用事件捕获模式：

代码语言：html复制
<button @click.capture="handleClick">Click me</button>
.self

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

代码语言：html复制
<div @click.self="handleClick">...</div>
.once

事件只执行一次：

代码语言：html复制
<button @click.once="handleClick">Click me</button>

循环遍历

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

遍历数组
代码语言：html复制
<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item }}
  </li>
</ul>
迭代对象
代码语言：html复制
<ul>
  <li v-for="(value, key, index) in object" :key="key">
    {{ key }}: {{ value }}
  </li>
</ul>

条件渲染

v-if

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

代码语言：html复制
<p v-if="seen">Now you see me</p>
v-show

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

代码语言：html复制
<p v-show="seen">Now you see me</p>
v-else 和 v-else-if
代码语言：html复制
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else>C</p>

绑定属性

v-bind

用于绑定 HTML 属性：

代码语言：html复制
<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

计算属性

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

代码语言：javascript复制
const app = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar'
    }
  },
  computed: {
    fullName() {
      return this.firstName   ' '   this.lastName;
    }
  }
});
app.mount('#app');

监控属性

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

代码语言：javascript复制
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 选项。

代码语言：javascript复制
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 组件系统使得开发者可以将应用分割成独立的、可复用的组件。

注册全局组件
代码语言：javascript复制
const app = Vue.createApp({});
app.component('my-component', {
  template: '<div>A custom component!</div>'
});
app.mount('#app');
局部注册
代码语言：javascript复制
const app = Vue.createApp({
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
});
app.mount('#app');

组件通信

父向子传递 props
代码语言：javascript复制
app.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

父组件中使用：

代码语言：html复制
<child message="Hello!"></child>
子向父通信

通过事件：

代码语言：javascript复制
app.component('child', {
  template: '<button @click="notify">Notify</button>',
  methods: {
    notify() {
      this.$emit('notify')
    }
  }
});

父组件中监听：

代码语言：html复制
<child @notify="handleNotify"></child>

使用 axios 进行 AJAX 请求

首先安装 axios：

代码语言：bash复制
npm install axios
基本用法
代码语言：javascript复制
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
各种请求类型
代码语言：javascript复制
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 实现复杂逻辑

代码语言：html复制
<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，允许开发者更灵活地组织组件逻辑。

代码语言：javascript复制
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 树中的其他位置。

代码语言：html复制
<teleport to="body">
  <div class="modal">I'm in the body tag now.</div>
</teleport>

Fragment 支持

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

代码语言：javascript复制
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!

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

腾讯技术创作特训营S7

0 人点赞