探索vue.js：构建现代化的前端应用

最新推荐文章于 2024-06-13 02:48:16 发布

野原新之助00

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量1k

点赞数 35

文章标签：前端 vue.js javascript 前端框架 vscode

本文链接：https://blog.csdn.net/AnZz0827/article/details/135167845

版权

一、vue.js的基本概念

Vue.js 是一款开源的 JavaScript 框架，用于构建用户界面。它的目标是通过提供简单易用的工具和灵活的架构，让开发者能够更高效地开发交互式的 Web 应用程序。

Vue.js 采用了组件化的开发方式，将用户界面拆分成多个可复用的组件。每个组件包含了自己的模板、样式和行为逻辑，并且可以和其他组件进行组合形成一个完整的页面。这种组件化的开发方式能够提高代码的可维护性和复用性，并且使得应用程序的逻辑更加清晰。

Vue.js 的核心特性包括：

响应式数据：Vue.js 使用双向数据绑定机制，通过将数据与模板进行绑定，使得当数据发生变化时，视图能够自动更新。
模板语法：Vue.js 提供了类似 HTML 的模板语法，用于声明用户界面。模板中可以使用 Vue.js 提供的指令和表达式来实现动态渲染。
组件系统：Vue.js 的组件系统允许开发者将界面拆分成独立的、可复用的组件。每个组件都有自己的模板、样式和行为逻辑，开发者可以将这些组件进行组合，构建出复杂的用户界面。
生态系统：Vue.js 拥有庞大的生态系统，包括插件、工具和第三方库。这些资源可以帮助开发者更好地开发和调试 Vue.js 应用程序。

总的来说，Vue.js 是一个简洁、灵活且易于学习的框架，它在前端开发中得到了广泛的应用。无论是构建小型的交互式组件，还是开发复杂的单页应用程序，Vue.js 都能提供强大的支持和便捷的开发体验。

二、如何搭建vue.js开发环境

安装Node.js：Vue.js依赖于Node.js环境，因此首先需要安装Node.js。你可以从Node.js官方网站（https://nodejs.org/）下载适合你操作系统的安装包，并按照安装向导进行安装。
安装Vue CLI：Vue CLI是Vue.js官方提供的一个命令行工具，用于快速创建Vue.js项目并管理项目依赖。在安装完Node.js后，打开命令行终端，并执行以下命令来全局安装Vue CLI：
```
npm install -g @vue/cli
```
创建新的Vue项目：在命令行终端中，进入你想要创建项目的目录，并执行以下命令来创建一个新的Vue项目：
```
vue create Helloworld
```
其中 Helloworld 是你想要给项目起的名字，你可以根据实际情况修改。
选择配置：在创建项目时，Vue CLI会询问你希望使用的配置。你可以选择默认配置，也可以选择手动配置。如果是初学者，建议选择默认配置。
安装项目依赖：创建完项目后，进入项目目录，并执行以下命令来安装项目依赖：
```
cd Helloworld npm install
```
启动开发服务器：在安装完项目依赖后，执行以下命令来启动开发服务器：
```
npm run serve
```
这将会启动一个本地开发服务器，并在浏览器中打开一个预览页面。
至此，你已经成功搭建了Vue.js的开发环境。你可以开始编写Vue组件和构建你的应用程序了。

三、第一个vue.js实例

下面是一个简单的 Vue.js 示例，用于展示 "Hello World"：

首先，在 HTML 文件中引入 Vue.js 库：（如果下载了vue文件，可以采用引用文件形式）

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

2.在 HTML 文件中创建一个 div 元素作为 Vue 实例的挂载点：

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

3.创建 Vue 实例并绑定数据：

var app = new Vue({ el: '#app', data: { message: 'Hello World' } });

在上述代码中，我们创建了一个名为 app 的 Vue 实例，通过 el 属性将其挂载到 id 为 app 的 div 元素上。然后，我们使用 data 属性定义了一个名为 message 的数据，并将其初始化为 "Hello World"。

最后，在 div 元素中使用双花括号插值语法 {{ message }} 来显示 message 数据。

完整的 HTML 代码如下所示：

<!DOCTYPE html> <html> <head> 
<title>Hello World</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head> 
<body>
 <div id="app"> {{ message }} </div> 
<script> var app = new Vue({
 el: '#app',
 data: { message: 'Hello World' } }); 
</script> 
</body>
 </html>

当你在浏览器中打开这个 HTML 文件时，会看到页面显示 "Hello World" 的文本。这是一个简单的 Vue.js "Hello World" 示例！

四、vue实例常用到的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，本质是一个属性而不是函数，在调用时不加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应Vue实例上的数据变动

五、常用指令

在 Vue.js 中，有几个常用的指令可以用来操作 DOM 元素、处理事件和条件渲染等。以下是一些常用的 Vue.js 指令：

v-bind：用于绑定元素属性或组件的属性到 Vue 实例中的数据。可以简写为冒号 ":"。例如：

<img v-bind:src="imageUrl">

2.v-if 和 v-else：用于根据条件来控制元素的显示与隐藏。

<div v-if="isVisible"> 此处内容会根据 isVisible 的值进行显示 </div> 
<div v-else> 此处内容会在 isVisible 为 false 时显示 </div>

3.v-for：用于循环渲染元素列表。可以使用 v-for 指令将一个数组的每个元素渲染为对应的元素。

<ul> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </ul>

4.v-on：用于监听 DOM 事件，并在触发时执行相应的方法。可以简写为 "@"。例如：

<button v-on:click="handleClick">点击我</button>

5.v-model：用于实现表单元素与 Vue 实例数据的双向绑定。

<input type="text" v-model="message"> <p>{{ message }}</p>

6.v-show：用于根据条件控制元素的显示与隐藏，类似于 v-if，但是使用 v-show 时元素会一直存在于 DOM 中，只是通过 CSS 的 display 属性进行控制。

<div v-show="isVisible"> 此处内容会根据 isVisible 的值进行显示或隐藏 </div>

六、计算属性和监听属性

在 Vue.js 中，计算属性和监听属性是两个常用的功能，用于处理数据的衍生和观察。

计算属性

计算属性允许你基于已有的数据来计算出新的属性，这些计算属性会根据它们的依赖进行缓存，只有在依赖发生变化时才会重新计算。计算属性通常用于对数据进行复杂的处理和计算。

在 Vue 实例中，你可以通过 computed 属性定义计算属性，如下所示：

var app = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上述代码中，我们定义了一个计算属性 fullName，它由 firstName 和 lastName 这两个数据属性组合而成。通过 this.fullName 来获取计算属性的值。

监听属性

监听属性允许你在某个属性发生变化时执行自定义的操作，类似于计算属性，但是监听属性更适合用于响应式地处理异步操作或复杂的逻辑。

在 Vue 实例中，你可以通过 watch 属性定义监听属性，如下所示：

var app = new Vue({
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(newVal, oldVal) {
      // 当 message 发生变化时执行操作
      console.log('message 变为：', newVal);
    }
  }
});

在上述代码中，我们定义了一个监听属性 message，当 message 的值发生变化时，将会触发定义的回调函数，并传入新值 newVal 和旧值 oldVal。

（1）计算属性和方法的区别

Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小

七、组件

（1）组件的简介：

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

（2）为什么使用组件：

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

（3）组件的使用：

Vue.js 组件的基本结构包括模板、脚本和样式：

<template>
  <!-- 组件的模板 -->
</template>

<script>
export default {
  // 组件的脚本
}
</script>

<style>
/* 组件的样式 */
</style>

使用 Vue.js 组件时，可以通过 import 或 require 的方式引入组件，并在父组件中使用。例如：

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}

在上述代码中，我们引入了一个名为 MyComponent 的组件，并在父组件中注册它。

组件之间的通信是非常重要的，Vue.js 提供了多种方式来实现组件之间的通信。

（4）组件之间的通信

1.props 是一种用于父子组件之间通信的方式，它允许父组件向子组件传递数据。在子组件中，可以通过 props 属性接收父组件传递的数据，并进行处理和渲染。

// 父组件
<template>
  <my-component :message="parentMsg"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      parentMsg: 'Hello from parent'
    };
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2.$emit 是一种用于子组件向父组件通信的方式，它允许子组件触发一个自定义事件，并向父级组件传递数据。在父组件中，可以通过监听这个自定义事件来接收子组件传递的数据。

// 子组件
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', { msg: 'Hello from child' });
    }
  }
}
</script>

// 父组件
<template>
  <my-component @my-event="handleChildEvent"></my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleChildEvent(payload) {
      console.log('子组件传递的数据：', payload);
    }
  }
}
</script>

在上述代码中，我们在子组件中使用 $emit 触发了一个名为 my-event 的自定义事件，并传递了一个包含数据的对象。在父组件中监听这个自定义事件，并通过回调函数 handleChildEvent 接收子组件传递的数据。

八、路由插件

（1）路由的概念：

路由（Routing）是指在 web 应用程序中，根据 URL 的不同，显示不同的内容或页面的过程。在传统的多页面应用中，每个 URL 对应着服务器上的一个独立的 HTML 页面。而在单页面应用（SPA）中，通过客户端路由来实现页面切换和内容展示，而不需要每次都向服务器请求新的 HTML 页面。

在 Vue.js 或其他前端框架中，路由通常是通过路由插件（如 Vue Router）来管理的。通过路由插件，我们可以定义不同的 URL 地址与对应的组件之间的关系，以及在用户访问特定 URL 时应该展示哪个组件。

通常情况下，一个 URL 地址对应着一个路由规则，该规则包括了 URL 的路径、要显示的组件、以及可能的其他配置选项。当用户访问某个 URL 时，路由插件会根据匹配的路由规则来渲染对应的组件，并将其显示在页面上。

除了基本的路由规则外，路由还可以包括动态路由参数、嵌套路由、路由守卫等特性，以满足复杂的页面导航和展示需求。

总的来说，路由的概念在 web 开发中非常重要，它使得单页面应用能够实现页面间的无缝切换和内容展示，同时也提供了一种便捷的方式来管理页面间的导航和交互。

（2）路由的使用：

安装 Vue Router 插件：可以使用 npm 或 yarn 安装 Vue Router：
```
npm install vue-router
```

创建路由配置文件：在项目的根目录下创建一个名为 router.js（或其他任意名称）的文件，用于定义路由配置。

import Vue from 'vue';
import VueRouter from 'vue-router';

// 导入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 使用 VueRouter 插件
Vue.use(VueRouter);

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

在上述代码中，我们首先导入了 Vue 和 VueRouter，然后使用 Vue.use() 方法注册 Vue Router 插件。接下来，我们定义了两个路由规则，分别对应着 / 和 /about 路径，以及对应的组件。

在主 Vue 实例中引入路由配置：打开项目的主入口文件，一般是 main.js，并将之前创建的路由配置文件引入。
```
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
```
在上述代码中，我们通过 import router from './router' 引入了之前创建的路由配置文件，并在主 Vue 实例中添加了 router 配置项。
在模板中使用路由组件：打开主组件的模板文件（如 App.vue），并使用 <router-view> 标签来占位显示当前路由对应的组件。
```
<template> <div id="app"> <router-view></router-view> </div> </template>
```
在上述代码中，我们使用 <router-view> 标签来展示当前路由所对应的组件。

至此，我们已经完成了 Vue Router 的基本配置。现在，当用户访问 / 路径时，会显示 Home 组件；当用户访问 /about 路径时，会显示 About 组件。

除了基本的路由导航外，Vue Router 还提供了其他功能，如动态路由、嵌套路由、路由守卫等。

九、总结

Vue.js 是一种流行的 JavaScript 框架，它使用 MVVM（Model-View-ViewModel）模式来构建用户界面。Vue.js 的主要特点是轻量、易学、高效和灵活，它提供了丰富的 API 和功能，使开发者可以快速构建交互性强、响应速度快、易于维护的单页面应用程序。

在学习 Vue.js 时，首先需要掌握其核心概念，包括数据绑定、组件化、指令和计算属性等。Vue.js 中的数据绑定包括双向绑定和单向绑定两种方式，通过 v-model 指令可以实现双向绑定，而通过 v-bind 指令可以实现单向绑定。Vue.js 中的组件化可以将一个复杂的页面分解成多个独立的组件，并通过 props 和事件来实现组件之间的通信。指令和计算属性则可以方便地处理 DOM 操作和数据计算。

除了核心概念外，还需要了解 Vue.js 中的其他重要特性，如生命周期钩子、路由、状态管理、过渡动画和服务端渲染等。其中，生命周期钩子可以帮助我们在组件的不同生命周期阶段执行自定义逻辑；路由插件可以帮助我们实现页面导航和路由管理；状态管理库（如 Vuex）则可以帮助我们管理应用程序的状态和数据流；过渡动画可以为页面切换和组件展示添加动态效果；服务端渲染可以提高应用程序的首屏加载速度。

最后，为了进一步提高 Vue.js 的开发效率，还可以使用一些周边工具和库，如 Vue CLI、Vue DevTools、Element UI 等。Vue CLI 是一个官方提供的命令行工具，可以帮助我们快速创建 Vue.js 项目，并集成常用的构建工具和插件；Vue DevTools 则是一个浏览器扩展，可以帮助我们更方便地调试和测试 Vue.js 应用程序；Element UI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的 UI 组件和样式，可以快速构建美观、易用的用户界面。

总之，Vue.js 是一种强大、灵活、易学的 JavaScript 框架，它可以帮助开发者快速构建交互性强、响应速度快、易于维护的单页面应用程序。掌握 Vue.js 的核心概念和特性，并结合周边工具和库的使用，可以实现高效、优雅的 web 应用程序开发。

野原新之助00

关注

35
点赞
踩
28

收藏

觉得还不错? 一键收藏
7
评论
探索vue.js：构建现代化的前端应用

组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。Vue.js 是一种流行的 JavaScript 框架，它使用 MVVM（Model-View-ViewModel）模式来构建用户界面。
复制链接

扫一扫