• Vue第1天：特性概览

    文章目录

    Vue.js 简介

    Vue的特性

    如何使用Vue

    安装Vue

    通过CDN引入

    使用npm

    创建Vue实例

    结语

    Vue.js 简介

    Vue.js（通常简称为Vue）是一款流行的JavaScript框架，专注于构建用户界面。它的设计灵感来自于现代的JavaScript框架，同时也借鉴了一些传统的MVC模式的思想。

    Vue的特性

    Vue拥有许多强大的特性，使得它成为构建交互式用户界面的理想选择：

    1. 响应式数据绑定： Vue采用了双向数据绑定，通过数据驱动视图，当数据发生变化时，视图会自动更新。

      1. html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.     <title>Vue - 响应式数据绑定title>
      7. head>
      8. <body>
      9.  
      10. <div id="app">
      11.     <p>{{ message }}p>
      12.     <input v-model="message">
      13. div>
      14.  
      15. <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
      16. <script>
      17.     // 创建Vue实例
      18.     var app = new Vue({
      19.         el: '#app',
      20.         data: {
      21.             message: 'Hello, Vue!'
      22.         }
      23.     });
      24. script>
      25.  
      26. body>
      27. html>

      在这个例子中，v-model 指令用于实现输入框和数据的双向绑定，当输入框中的内容变化时，数据 message 也会相应地更新。

    2. 组件化开发： Vue支持组件化开发，使得UI可以被拆分为独立、可复用的组件。这种模块化的开发方式使得代码更易维护、可读性更强。

      2. <template>
      3.   <div>
      4.     <my-component>my-component>
      5.     <my-component>my-component>
      6.   div>
      7. template>
      8.  
      9. <script>
      10. import MyComponent from './MyComponent.vue';
      11.  
      12. export default {
      13.   components: {
      14.     'my-component': MyComponent
      15.   }
      16. };
      17. script>
      18.  
      20. <template>
      21.   <div>
      22.     <p>This is a reusable component.p>
      23.   div>
      24. template>
      25.  
      26. <script>
      27. export default {
      28.   // 组件逻辑
      29. };
      30. script>

      在这个例子中，App.vue 文件引入并使用了名为 my-component 的组件。而 MyComponent.vue 文件定义了一个简单的可复用组件。

    3. 指令系统： Vue提供了一系列指令（Directives），如v-bind、v-if、v-for等，使得开发者可以在模板中添加逻辑、控制DOM元素的显示和隐藏等。

      1. html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.     <title>Vue - 指令系统title>
      7. head>
      8. <body>
      9.  
      10. <div id="app">
      11.     <p v-if="showMessage">{{ message }}p>
      12.     <ul>
      13.         <li v-for="item in items" :key="item.id">{{ item.name }}li>
      14.     ul>
      15. div>
      16.  
      17. <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
      18. <script>
      19.     // 创建Vue实例
      20.     var app = new Vue({
      21.         el: '#app',
      22.         data: {
      23.             showMessage: true,
      24.             message: 'This message is shown with v-if',
      25.             items: [
      26.                 { id: 1, name: 'Item 1' },
      27.                 { id: 2, name: 'Item 2' },
      28.                 { id: 3, name: 'Item 3' }
      29.             ]
      30.         }
      31.     });
      32. script>
      33.  
      34. body>
      35. html>

      在这个例子中，v-if 用于根据条件显示或隐藏一个元素，而 v-for 用于循环渲染一个列表。

    4. 虚拟DOM： Vue通过虚拟DOM的机制，提高了DOM操作的效率，只更新实际改变的部分，而不是整个DOM树。

    5. 生命周期钩子： Vue提供了丰富的生命周期钩子函数，使得开发者可以在不同阶段插入自定义的逻辑。

      1. html>
      2. <html lang="en">
      3. <head>
      4.     <meta charset="UTF-8">
      5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.     <title>Vue - 生命周期钩子title>
      7. head>
      8. <body>
      9.  
      10. <div id="app">
      11.     <p>{{ message }}p>
      12. div>
      13.  
      14. <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
      15. <script>
      16.     // 创建Vue实例
      17.     var app = new Vue({
      18.         el: '#app',
      19.         data: {
      20.             message: 'Hello, Vue!'
      21.         },
      22.         beforeCreate() {
      23.             console.log('beforeCreate');
      24.         },
      25.         created() {
      26.             console.log('created');
      27.         },
      28.         beforeMount() {
      29.             console.log('beforeMount');
      30.         },
      31.         mounted() {
      32.             console.log('mounted');
      33.         },
      34.         beforeUpdate() {
      35.             console.log('beforeUpdate');
      36.         },
      37.         updated() {
      38.             console.log('updated');
      39.         },
      40.         beforeDestroy() {
      41.             console.log('beforeDestroy');
      42.         },
      43.         destroyed() {
      44.             console.log('destroyed');
      45.         }
      46.     });
      47. script>
      48.  
      49. body>
      50. html>

      在这个例子中，我们使用了 Vue 的生命周期钩子，通过在控制台输出不同阶段的信息，帮助你理解 Vue 生命周期的执行顺序。打开浏览器的开发者工具，可以在控制台中看到输出信息。

    如何使用Vue

    安装Vue

    你可以通过CDN引入Vue，也可以使用npm进行安装。

    通过CDN引入
    <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
    使用npm
    npm install vue

    创建Vue实例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Vue Introductiontitle>
    7. head>
    8. <body>
    9.  
    10. <div id="app">
    11.     {{ message }}
    12. div>
    13.  
    14. <script src="https://cdn.jsdelivr.net/npm/vue@2">script>
    15. <script>
    16.     // 创建Vue实例
    17.     var app = new Vue({
    18.         el: '#app',
    19.         data: {
    20.             message: 'Hello, Vue!'
    21.         }
    22.     });
    23. script>
    24.  
    25. body>
    26. html>

    在上述代码中，我们首先引入Vue，然后创建了一个Vue实例，并在HTML中绑定了一个数据message，最后将这个实例挂载到ID为app的DOM元素上。

    结语

    Vue.js的简单上手、灵活的设计和强大的特性使得它成为构建现代Web应用的理想选择。通过Vue，你可以更轻松地构建交互式、动态的用户界面。

    这只是Vue.js的入门介绍，Vue还有很多其他特性和高级用法，如果你对Vue感兴趣，可以深入学习官方文档以及社区资源。

  • 相关阅读:
    Nginx配置整合：基本概念、命令、反向代理、负载均衡、动静分离、高可用
    Nginx的请求处理流程
    Vue3 源码阅读（2）：响应式系统 —— 核心思想、基本实现
    Java并发编程吐血1个月总结最全面的100道面试题！！！
    AcrelEMS-SW智慧水务能效管理平台在污水处理厂中的应用-Susie 周
    数位DP 上 day44
    STM32WL开发之易智联LORA评估板上按键KEY的配置与应用
    第152篇 Solidity 中的 Call
    Gin框架---环境搭建
    LeetCode 每日一题 2023/11/13-2023/11/19
  • 原文地址：https://blog.csdn.net/MuRanstr/article/details/134480831