Vue.js学习总结

最新推荐文章于 2024-05-17 14:32:46 发布

一只棉羊.

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量101

点赞数

文章标签： vue.js 学习 flutter

本文链接：https://blog.csdn.net/m0_74266852/article/details/134286546

版权

Vue.js学习总结

1. web的开发简史

Web的开发简史可以追溯到上世纪90年代初，当时互联网开始普及，人们开始意识到利用网络进行信息交流和展示的潜力。最初的网页开发主要是基于HTML（Hypertext Markup Language）和CSS（Cascading Style Sheets），用于创建和设计静态网页。

随着互联网和技术的不断发展，网页的需求也越来越复杂，人们需要更交互性和动态性的网页。这一需求推动了JavaScript语言的发展，使得网页可以实现更多的功能和用户交互。随后，出现了诸如jQuery、AngularJS等前端框架和库，大大增强了网页的交互性和动态性。

1.1 Vue.js的出现

在前端框架和库不断涌现的背景下，Vue.js作为一款轻量级、易学易用的前端框架应运而生。Vue.js由尤雨溪（Evan You）于2014年创建，并于同年首次发布。Vue.js的出现填补了现有前端框架的一些空白，它结合了AngularJS和React的一些优点，提供了数据驱动视图以及组件化开发的能力，使得前端开发变得更加简单、快速和灵活。

1.2 Vue.js的特点

Vue.js具有以下几个显著特点：

渐进式框架：Vue.js可以逐渐应用到项目中，不需要全盘接受其特性，这使得现有项目能够逐步迁移到Vue.js上。
双向数据绑定：Vue.js支持数据的双向绑定，当数据发生变化时，视图会自动更新；反之亦然。
组件化开发：Vue.js鼓励开发者将页面拆分成一个个可复用的组件，这样有利于提高代码复用性和开发效率。
虚拟DOM：Vue.js通过虚拟DOM的机制，在性能上有很好的表现，减少了直接操作DOM所带来的性能损耗。

1.3 第一个Vue实例

创建第一个Vue实例是学习Vue.js的重要一步。下面是一个简单的示例，演示如何创建和渲染一个Vue实例：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个Vue实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

</body>
</html>

在这个示例中，我们首先引入了Vue.js库，然后在页面中定义了一个id为"app"的div元素作为Vue实例的挂载点。接着，我们创建了一个Vue实例，并将其挂载到id为"app"的元素上。在data属性中定义了一个名为message的数据，它的初始值为’Hello, Vue!'。最后，在页面中使用插值表达式{{ message }}来渲染这个数据。

当你打开这个HTML文件时，你会看到页面上显示着"Hello, Vue!"，这就是Vue实例渲染的效果。

2. Vue构造选项

el

Vue构造选项中的"el"是用来指定Vue实例挂载的元素，它可以是一个CSS选择器，也可以是一个DOM元素。在Vue实例被创建之后，它将会管理这个特定的DOM元素，将其作为Vue应用的根元素。

通常情况下，我们会将"el"选项设置为一个在HTML中已存在的DOM元素，以便Vue能够控制这个元素及其内部的数据和行为。当Vue实例挂载到指定的元素上后，Vue将开始监控该元素及其内部的指令、事件和数据绑定等内容，从而实现数据驱动的视图更新。

下面是一个简单的示例，演示了如何使用"el"选项将Vue实例挂载到一个具体的DOM元素上：

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

在这个示例中，我们创建了一个id为"app"的div元素，并将它作为Vue实例的挂载点。这样一来，Vue实例就会管理这个div元素，并且可以通过插值表达式{{ message }}来渲染其中的数据。

data

在Vue构造选项中，"data"是用来指定Vue实例中的数据对象。这个数据对象包含了Vue实例需要响应式地追踪和渲染的数据。

下面是一个简单的示例，演示了如何在Vue实例中使用"data"选项定义数据：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

在这个示例中，我们通过"data"选项定义了一个名为"message"的属性，并将其初始值设为’Hello, Vue!'。这样一来，Vue实例就拥有了一个响应式的数据对象，可以在模板中使用插值表达式{{ message }}来渲染这个数据。

当"message"的值发生变化时，相关的视图也会随之自动更新，这就是Vue的响应式数据绑定机制。这使得我们可以方便地管理数据和视图之间的关系，而无需手动操作DOM。

methods

在Vue构造选项中，"methods"用于指定Vue实例中的方法。这些方法可以在Vue实例的模板中被调用，也可以在Vue实例的其他方法中使用。

下面是一个简单的示例，演示了如何在Vue实例中使用"methods"选项定义方法：

<div id="app">
  <button v-on:click="sayHello">Say Hello</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!');
    }
  }
})
</script>

在这个示例中，我们通过"methods"选项定义了一个名为"sayHello"的方法，当按钮被点击时会调用这个方法。在方法中，我们使用JavaScript的alert函数显示了一个简单的弹框消息。

通过"methods"选项，我们可以将Vue实例的方法和行为进行组织和管理，使得代码更加清晰和可维护。在实际开发中，我们可以在"methods"中定义各种处理逻辑、事件处理函数等，以便在Vue实例的模板中或其他方法中进行调用。

computed

在Vue构造选项中，"computed"用于指定计算属性，也就是根据其他数据计算而来的属性。在实际应用中，我们经常需要根据已有的数据进行一些复杂的计算或处理，这时就可以使用"computed"选项。

下面是一个简单的示例，演示了如何在Vue实例中使用"computed"选项定义计算属性：

<div id="app">
  <p>Radius: <input v-model="radius"></p>
  <p>Area: {{ area }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    radius: 0
  },
  computed: {
    area: function() {
      return Math.PI * this.radius * this.radius;
    }
  }
})
</script>

在这个示例中，我们通过"data"选项定义了一个名为"radius"的属性，然后通过"computed"选项定义了一个计算属性"area"，它根据"radius"的值计算出圆的面积。在模板中，我们直接使用插值表达式{{ area }}来展示这个计算属性的值。

与"methods"相比，"computed"具有缓存的特性，只有当依赖的数据发生改变时，才会重新进行计算，这样可以避免不必要的重复计算，提高性能。

components

在Vue构造选项中，"components"用于注册Vue组件，使得我们可以在模板中使用这些组件。Vue组件可以帮助我们将页面拆分成独立、可复用的组件，从而提高代码的可维护性和可复用性。

下面是一个简单的示例，演示了如何在Vue实例中使用"components"选项注册组件：

<div id="app">
  <my-component></my-component>
</div>

<script>
// 定义一个名为 my-component 的组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

var app = new Vue({
  el: '#app'
});
</script>

在这个示例中，我们通过"Vue.component"方法注册了一个名为"my-component"的组件，并指定了这个组件的模板内容。然后在Vue实例的模板中使用了这个自定义组件。

通过"components"选项，我们可以将整个应用分割成多个小的、独立的组件，在需要的时候灵活地组合和调用。这种组件化的思想非常有利于提高代码的可维护性和可读性，也方便了团队协作和开发。

filters

在Vue构造选项中，"filters"用于定义可复用的文本格式化函数，可以在模板中使用。这些过滤器可以用于格式化文本、日期、数字等数据，使得模板中的数据展示更加灵活和易读。

下面是一个简单的示例，演示了如何在Vue实例中使用"filters"选项定义过滤器：

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, vue!'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
})
</script>

在这个示例中，我们通过"filters"选项定义了一个名为"capitalize"的过滤器，它将输入的字符串首字母大写。然后在模板中，我们使用了管道符号"|"将"message"的值传递给"capitalize"过滤器进行处理，并最终显示在页面上。

通过"filters"选项，我们可以轻松地在模板中应用各种文本格式化函数，而不必在模板中编写过多的逻辑。这样可以使得模板更加简洁和易读，也方便了对文本格式的统一管理和调整。

watch

在 Vue 构造函数中，“watch” 选项用于监视 Vue 实例中数据的变化，并在数据变化时执行相应的操作。通常情况下，“watch” 选项用于对数据变化做出响应性的处理，比如发起异步请求、执行一些额外的逻辑等。

以下是一个简单的示例，演示了如何在 Vue 实例中使用 “watch” 选项：

<div id="app">
  <p>Current count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count: function(newValue, oldValue) {
      console.log('count changed from ' + oldValue + ' to ' + newValue);
      // 在这里可以编写数据变化时的响应逻辑，比如发起异步请求等
    }
  },
  methods: {
    increment: function() {
      this.count++;
    }
  }
});
</script>

在这个示例中，我们定义了一个名为 “count” 的数据属性，并且在 “watch” 选项中监视了这个属性。当 “count” 发生变化时，我们定义的回调函数将被触发，可以在这个回调函数中执行相应的操作。

通过使用 “watch” 选项，我们能够以声明式的方式监视数据的变化，而不需要在模板或方法中编写过多的逻辑。这样可以使得代码更加清晰和易于维护。

3. Vue项目开发

在 Vue 中，"项目化"通常指的是对一个 Vue 项目进行结构化、模块化和规范化的管理和开发过程。它是一种将项目组织为清晰、可维护且易于扩展的方式。Vue 项目化包括但不限于以下几个方面：

模块化组织：将项目按照功能模块进行划分，每个模块可以包含自己的组件、路由、状态管理等内容。这样可以降低模块之间的耦合度，提高代码的可维护性和可重用性。
统一规范：制定一套统一的代码规范和项目结构规范，让所有开发人员都遵循相同的规范进行开发，确保代码风格统一，易于理解和维护。
组件化开发：充分利用 Vue 的组件化特性，将页面拆分为多个复用的组件，提高代码的复用性和可维护性。
路由管理：使用 Vue Router 来管理项目的路由，设计良好的路由结构有助于使项目结构更加清晰，并且有利于 SEO 和页面性能的优化。
状态管理：对于大型项目，使用 Vuex 进行状态管理，通过集中管理状态来确保数据流的清晰和可控。
自动化构建：使用工具如 Webpack 或者 Vite 等进行自动化构建，优化项目的构建过程，包括代码压缩、打包、代码分割等。

通过项目化的方式，可以使得 Vue 项目更加清晰、结构化，易于维护和扩展。它有助于团队协作开发，提高项目的质量和效率

3.1 安装Node.js

3.1.2 node.js简介

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以让你用JavaScript编写服务器端代码。它采用事件驱动、非阻塞I/O模型，使得能够高效处理大量并发请求，适合构建高性能的网络应用。Node.js还拥有丰富的模块和库，以及强大的生态系统，可以满足各种开发需求。Node.js不仅局限于前端开发，而是可以利用JavaScript进行全栈开发，包括构建Web服务器、RESTful API、实时通信应用等。同时，Node.js可以跨平台运行，适用于Windows、Linux和macOS等操作系统。

3.1.2 下载Node.js

中文官方地址：https://nodejs.cn/download/

在这里插入图片描述

选择官方长期支持版本，我这里是 window系统就选择 64位的下载

在这里插入图片描述

一直 next 就可以安装成功了，打开cmd 输入 node -v 验证是否安装成功，出现版本号咱们安装成功了

在这里插入图片描述

3.2 安装 vue/cil

如果已经安装过 vue/cil 可以运行 npm uninstall -g @vue/cli 删除 vue/cil

运行 npm install -g @vue/cli 全局安装 vue/cil

安装成功，运行 vue -Version 出现版本号，证明安装成功

在这里插入图片描述

3.3创建 Vue2.x项目

创建Vue有两种方式，一种是通过vue/cil通过的UI界面进行创建，在命令行运行 vue ui

在这里插入图片描述

出现，http://localhost:8000证明启动成功，在浏览器访问 http://localhost:8000

在这里插入图片描述

在导航栏选择创建，并且在合适的位置下，我们点击 在此创建新项目，就会打开创建项目界面

在这里插入图片描述

在这填写项目名即可，其它默认，点击下一步

在这里插入图片描述

我们选择默认通过的 vue2.x 创建的预设，点击完成创建项目，即可创建项目，这里需要耐心等待

在这里插入图片描述

出现这个界面证明已经成功安装vue2.x了

在这里插入图片描述

点击运行项目，运行成功，在浏览器访问 http://localhost:8080/ 出现下面界面，证明你的Vue项目已经成功安装

在这里插入图片描述

除了通过UI界面进行创建，我们还可以通过命令行进行，创建项目

输入 vue create helloworld helloworld 是项目名

在这里插入图片描述

出现上面这个界面，证明安装成功，我们切换到项目命令下运行项目

输入 cd helloworld npm run serve 即可运行项目

在这里插入图片描述

出现上面这个界面，已经成功运行，在浏览器访问 http://localhost:8080/,即可看到运行结果

一只棉羊.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习总结

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以让你用JavaScript编写服务器端代码。它采用事件驱动、非阻塞I/O模型，使得能够高效处理大量并发请求，适合构建高性能的网络应用。Node.js还拥有丰富的模块和库，以及强大的生态系统，可以满足各种开发需求。Node.js不仅局限于前端开发，而是可以利用JavaScript进行全栈开发，包括构建Web服务器、RESTful API、实时通信应用等。
复制链接

扫一扫