Vue.js 学习指南：指令、组件和通信实战

已于 2024-01-04 20:54:22 修改
阅读量1.1k 收藏 28
点赞数 32
文章标签： 学习 vue.js javascript vscode html5 css es6
于 2024-01-03 15:54:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cqssss_/article/details/135336183
版权
本文介绍了Vue.js的基础概念，包括创建Vue实例、指令的使用（如v-bind和v-model）、计算属性和监听属性、VueRouter的安装与配置、组件开发以及组件的生命周期管理。
摘要由CSDN通过智能技术生成

目录

一、Vue.js的基础概念

        1.什么是vue实例？

        2.如何创建vue实例？ 

二、指令

 三、计算属性和监听属性

1.计算属性

2.监听属性

四、路由 

1. 安装 Vue Router 

2.Vue实例 

 3.创建index.js

 4.配置路由出口

 5. 配置路由链接

6. 导航守卫 

五、组件 

 六、生命周期

在学习vue2之前，通常都需要掌握基础的JavaScript知识，包括变量、数据类型、函数、对象等。

一、Vue.js的基础概念

        1.什么是vue实例？

        Vue实例是Vue.js应用的基本构建块。每个Vue应用都是通过创建一个Vue实例来启动的。

        2.如何创建vue实例？ 

1.安装vue

# 在终端中使用以下命令安装Vue CLI
npm install -g @vue/cli

# 通过以下命令创建一个新的Vue项目
vue create my-vue-app

# 进入项目目录
cd my-vue-app
# 启动项目
npm run serve

2.如果不使用vue cli也可以通过引入Vue的CDN来实现

<!-- 在<head>标签内引入Vue的CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!-- 在<body>标签内创建一个挂载点 -->
<div id="app"></div>

<!-- 在<script>标签内创建Vue实例 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: '#app', // 挂载点，这里是id为app的div
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      greet() {
        alert(this.message);
      }
    }
  });
</script>

二、指令

在Vue.js中，指令是带有 v- 前缀的特殊属性，用于在DOM元素上添加特定的行为 。

Vue 提供了一系列指令，如 v-if、v-for、v-bind、v-on 等，用于操作 DOM 元素、数据绑定等。 

  • v-bind
    用于动态绑定元素的属性。可以用来绑定HTML属性、DOM属性、样式、class等。 
<div v-bind:class='className1'></div>
<!-- 也可以简写成以下样式 -->
<div :class='className1'></div>
  • v-model

用于在表单元素上创建双向数据绑定。当输入框的值变化时，与之绑定的数据也会更新，反之亦然。

<div id="app">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>
<script>
 new Vue({
    el: '#app',
    data() {
       return {
           msg:''
       }
    },
})

</script>
  • v-for
    用于循环渲染数组或对象的数据，生成列表。
<div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
</div>

<script>
    new vue({
        el:"#app",
        data(){
            return{
                list: [
                        { text: '首页', isActive: true },
                        { text: '列表', isActive: false },
                        { text: '详情', isActive: false },
                        { text: '登录', isActive: false },
                        { text: '注册', isActive: false }
                    ],
            }
        }
    })
</script>
  •  v-if、v-else-if、v-else
    用于条件性地渲染元素。 
    <p v-if="seen">现在你看到我了</p>
<p v-else>你看不到我了</p>
  • v-show
    与v-if类似，用于条件性地显示或隐藏元素，但不会删除元素。
<p v-show="seen">可以被看见</p>
  • v-on
    用于绑定事件监听器，监听DOM事件，执行相应的方法。
<button v-on:click="handleClick">按钮1</button>
<!-- 可以缩写成以下方式 -->
<button @click="handleClick">按钮2</button>

三、计算属性和监听属性

在 Vue.js 中，计算属性和监听属性都是用来监听数据变化并执行相应逻辑的机制，但它们的使用场景和实现方式略有不同。

1.计算属性

计算属性是基于其它属性计算得出的属性，它会根据依赖的属性的变化而动态更新。计算属性在模板中的用法类似数据属性，但其实际上是一个函数。计算属性具有缓存机制，只有当计算属性的依赖发生变化时，才会重新计算。

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>
2.监听属性

监听属性允许你监听数据的变化并在变化时执行自定义的函数。它更灵活，适用于当你需要在数据变化时执行异步操作或较复杂逻辑的场景。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      message: ''
    };
  },
  watch: {
    firstName(newValue, oldValue) {
      this.message = `firstName changed from ${oldValue} to ${newValue}`;
    },
    lastName(newValue, oldValue) {
      this.message = `lastName changed from ${oldValue} to ${newValue}`;
    }
  }
};
</script>

四、路由 

在Vue.js中，路由是一种用于管理单页面应用导航的机制。Vue Router 是 Vue.js 的官方路由管理器，它允许你通过 URL 来映射到对应的组件，实现页面之间的切换而无需刷新整个页面。 

1. 安装 Vue Router 

使用npm或yarn安装Vue Router

#使用yarn的方式
yarn add vue-router
#使用npm的方式
npm install vue-router
2.Vue实例 

在安装路由之后会自动在main.js下创建一个router实例

import Vue from 'vue'
import App from './App.vue'
import router from './router'


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 3.创建index.js

在 index.js 中放置路由的配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 添加其他路由配置
];

const router = new VueRouter({
  routes,
});

export default router;
 4.配置路由出口

在App.vue或其他根组件中，配置路由的出口，使用<router-view>来显示当前路由对应的组件

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>
 5. 配置路由链接

在应用中，使用<router-link>创建路由链接，实现页面间的导航

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
6. 导航守卫 

vue Router 提供了导航守卫，可以在路由发生变化时执行一些逻辑。例如，beforeEach可以用来进行路由拦截 

router.beforeEach((to, from, next) => {
  // 判断用户 是否访问 登陆页面 如果是直接放行
  if (to.path == '/' || to.path == '/login') {
    return next()
  }
  // 获取本地token 值
  const tokenStr = window.localStorage.getItem("token");
  // 判断值 是否存储 如果不存在 直接跳转到 登陆页面
  if (!tokenStr) {
    return next('/')
  }
  // 放行
  next()
})

五、组件 

Vue 组件是 Vue.js 应用的基本构建块，它允许你将用户界面拆分为独立、可重用的模块。每个组件都可以包含自己的模板、样式和逻辑，并且可以通过 props 和 events 进行数据传递和通信。

<!-- ChildParentCommunication.vue (子组件兼父组件) -->
<template>
  <div>
    <p>{{ receivedMessage }}</p>
    <button @click="sendMessageToParent">向父组件发送消息</button>
  </div>
</template>

<script>
export default {
  props: {
    // 通过 props 接收父组件传递的消息
    messageFromParent: String,
  },
  data() {
    return {
      sentMessage: "你好，父组件！",
      receivedMessage: "",
    };
  },
  watch: {
    // 监听父组件传递的消息变化
    messageFromParent(newMessage) {
      this.receivedMessage = `从父组件接收的消息：${newMessage}`;
    }
  },
  methods: {
    // 发送消息给父组件
    sendMessageToParent() {
      this.$emit('messageToParent', '你好，父组件！来自子组件的消息。');
    }
  },
};
</script>

<!-- Parent.vue (父组件) -->
<template>
  <div>
    <child-parent-communication 
        :messageFromParent="sentMessage"
        @messageToParent="handleMessageFromChild">
    </child-parent-communication>
    <button @click="sendMessageToChild">向子组件发送消息</button>
  </div>
</template>

<script>
import ChildParentCommunication from "@/components/ChildParentCommunication.vue";

export default {
  components: {
    ChildParentCommunication,
  },
  data() {
    return {
      sentMessage: "你好，子组件！",
    };
  },
  methods: {
    // 处理来自子组件的消息
    handleMessageFromChild(message) {
      this.sentMessage = `从子组件接收的消息：${message}`;
    },
    // 发送消息给子组件
    sendMessageToChild() {
      this.sentMessage = "来自父组件的更新消息！";
    }
  },
};
</script>

 六、生命周期

在 Vue.js 中，每个组件都有生命周期钩子函数，这些钩子函数允许你在组件的不同阶段执行代码。以下是 Vue.js 组件的主要生命周期钩子：

  1. beforeCreate：

    • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在此阶段，实例的选项对象已经被解析成响应式的数据，但是实例上的 data 属性和方法尚未被初始化。

  2. created：

    • 在实例创建完成后被立即调用。在这一步，实例已经完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

  3. beforeMount：

    • 在挂载开始之前被调用：相关的 render 函数首次被调用。

  4. mounted：

    • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

  5. beforeUpdate：

    • 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

  6. updated：

    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁时调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而，在大多数情况下，应该避免在此期间更改状态。

  7. beforeDestroy：

    • 在实例销毁之前调用。在这一步，实例仍然完全可用。

  8. destroyed：

    • 在实例销毁之后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例被销毁。

Cqssss_
关注
Vue.js实战：构建现代化的Web应用
BLUEksjs的博客
12-21 1354
Vue.js是一款流行的开源JavaScript框架，它使用了MVVM模式（Model-View-ViewModel），并提供了响应式的数据绑定和组件化的开发。响应式数据绑定：Vue.js利用数据驱动视图的方式，实现了实时的数据更新和UI交互。组件化开发：Vue.js允许开发者将Web应用拆分成可复用、独立的组件，从而提高代码的可维护性和可扩展性。简洁灵活：Vue.js的API设计简单易懂，可以轻松地与现有项目集成，并与其他库或框架协同工作。Vue.js 是什么样的框架？解决了哪些问题？
【掌握 Vue.js：从入门到实践的全面指南】
m0_71941456的博客
09-17 1886
本文将深入探讨 Vue.js 的核心概念、组件系统以及生态系统，并通过实际代码示例，指导你如何使用 Vue.js 构建一个功能完备的待办事项列表应用。Vue.js 是一个强大而灵活的框架，它提供了丰富的特性和工具，可以帮助开发者构建现代的 web 应用。当数据变化时，Vue.js 会计算出最小的 DOM 操作量，然后才更新到真实 DOM，这样可以避免不必要的性能损耗。Vue.js 的设计哲学是将复杂的问题分解为简单的组件，然后通过组合这些组件来构建复杂的界面。组件是 Vue.js 最强大的功能之一。
Vue.js 实战教程：从零开始掌握前端瑰宝
gitblog_00190的博客
09-11 628
Vue.js 实战教程：从零开始掌握前端瑰宝 vue-tutorial A walkthrough of basic Vue concepts. 项目地址: https://gitcode.com/gh_mirrors/vuet/...
Vue.js 初学者指南：从零开始构建你的第一个应用
weixin_52938153的博客
05-21 425
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他单页应用程序 (SPA) 框架不同，Vue 被设计为可以逐步采用。其核心库专注于视图层，并且非常容易上手，但同时也可以与现代工具链和各种支持库集成。单向数据绑定是指数据只能从组件的数据源（如 对象）流向模板，不能反向更新数据。 双向数据绑定 双向数据绑定允许数据在组件和视图之间双向流动。Vue.js 使用 指令来实现这一点。 指令（Directives）
Vue.js实战：构建现代单页应用程序（SPA）的实用指南
明飞的博客
12-23 3852
单页应用程序是一种Web应用程序或网站，通过动态加载所有相关的代码，使用户在浏览过程中感受不到页面的重新加载。通常，SPA使用Ajax、WebSocket等技术在后台与服务器进行数据交互，实现异步加载内容，提供更流畅的用户体验。Vue.js是一套用于构建用户界面的渐进式JavaScript框架。它专注于视图层，易于集成到其他库或现有项目中。Vue.js的核心库只关注视图层，非常容易学习，同时它也完全可驱动整个单页应用。Vue.js的核心是Vue实例，是Vue应用的入口。
利用 Vue.js 开发动态组件的实战指南
qq_20245171的博客
11-10 787
Vue.js 是现代 Web 开发中非常流行的框架，以其渐进式架构和组件化设计受到广泛欢迎。组件化开发是 Vue.js 的核心优势之一，它允许开发者将大型应用程序分解为小型的、独立的、可复用的模块。组件不仅提高了开发效率，还促进了代码的可维护性和可读性。本指南将深入探讨 Vue.js 组件开发的基础知识和进阶技巧，旨在帮助开发者掌握从基础组件到复杂动态组件的构建方法。通过详细的实际案例，我们将逐步演示如何开发功能强大且灵活的动态组件，以应对复杂的开发需求。
深入理解 Vue.js 事件修饰符与事件冒泡：实战指南20241010
Narutolxy的博客
10-10 1410
vue 事件冒泡
Vue组件开发指南：深入学习组件生命周期、Props、事件处理和插槽
Why_does_it_work的博客
07-16 1283
Vue组件化开发是指将一个复杂的用户界面拆分成多个独立、可重用的组件，并通过组合这些组件来构建整个应用程序。每个组件都有自己的模板、样式和逻辑，可以独立地进行开发、测试和维护。Vue组件化开发基于Vue.js框架的核心概念——组件。组件是Vue.js中最基本的构建块，它可以封装HTML、CSS和JavaScript代码，形成一个独立的功能单元。通过组件化开发，我们可以将复杂的应用程序拆分成多个小的、可复用的组件，使得代码更加清晰、可维护性更高。在Vue中，我们可以使用。
Vue 3 入门教程：从基础知识到实战案例
蜡笔小新星的博客
08-02 815
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。其核心概念包括组件、指令和响应式数据绑定。以上内容为 Vue 3 的基础知识和组件开发的入门教程。通过理解 HTML、CSS 和 JavaScript 的基本概念，再结合 Vue 3 的核心特性，你将能够构建出丰富的前端应用。在实现这些知识时，多进行实践和实验，将有助于你的成长和技术提升。
Vue.js学习指南：从基础到高级实战
组件化开发是Vue的一大亮点，允许创建可重用的代码模块，父子组件通信和插槽的使用进一步增强了组件的功能。 Vue Router是Vue的官方路由库，用于管理页面间的导航。Vuex是状态管理库，帮助组织和共享应用程序状态。...
当准备Vue.js面试时，深入学习Vue.js核心概念、实际应用以及可能遇到的问题是非常重要的.pdf
01-19
深入学习 Vue.js 核心概念、实际应用和可能遇到的问题 当准备 Vue.js 面试时，深入学习 Vue.js 核心概念、实际应用和可能遇到的问题是非常重要的。以下是更加详细的资源，包括文档、技术要点和编程题： ### Vue.js...
Vue.js深度解析：组件、状态管理和实战指南
"Vue.js Handbook 是一本专注于前端开发框架Vue.js的学习手册，由Flavio Copes编写。这本书深入介绍了Vue.js的核心概念和技术，旨在帮助读者掌握这一当前流行的框架。作者还预告将在2018年7月底发布一个更高级的Vue....
Vue.js全攻略：从入门到实战精通指南
Vue.js是当前流行的JavaScript前端框架之一，它以数据驱动和组件化的思想设计。Vue的核心库只关注视图层，易于上手，同时通过与其他库或现有项目的集成，可以提供灵活的构建配置。 2. Vue.js的核心概念 - 组件：...
批量归一化 BN(Batch Normalization) (减少重复学习 - 加速损失收敛) + 代码实现 ——笔记2.15《动手学深度学习》
科研汪小陈的博客
11-08 1032
批量归一化固定小批量中的均值和方差，然后学习出适合的偏移和缩放； 可以加速收敛速度（比如以前学习率是0.01，现在用了批量归一化后，可以调到0.1） 不会出现之前：学习率太大的话，上面 (靠近损失的梯度) 会炸掉； 不会出现之前：学习率太小的话，下面 (靠近数据的模型参数) 会学不动； 每一个层的输出都通过均值方差放在一起了，上下层的分布都差不多是正态分布； 但一般不改变模型精度
Greiner 经典力学（多体系统和哈密顿力学）第十二章 学习笔记（Rotation About a Point）
Ivan 的专栏
11-09 835
上一章是绕定轴转动，这章是绕定点转动。这一章明显上难度了。
计划系统学习C#
j17805056906的博客
11-09 357
**常用类库**：学习如何使用一些常用的C#类库，比如字符串操作（`string`）、日期（`DateTime`）、集合（`List`, `Array`等）。**实践**：可以进行一个完整的项目，比如一个简单的任务管理应用、书籍借阅系统或在线商品管理系统。**实践**：可以制作稍微复杂的应用程序，比如多线程文件下载工具、管理任务的小应用程序等。**实践**：写一些小的程序，比如计算器、猜数字游戏、字符串操作练习等。- **属性和方法**：学习自动属性、静态方法、静态属性、扩展方法等。
青少年学习倦怠测评
一火的专栏
11-09 182
未来，可以进一步拓展研究样本和范围，深入探讨学习倦怠的影响因素和干预措施，为青少年的教育发展贡献更多的力量。通过编制问卷，收集学生在学习过程中的情感体验、学习态度、学业成绩等方面的信息，进而评估学生的学习倦怠情况。为了全面评估青少年的学习倦怠情况，本研究基于文献综述和实证调查，编制了一份包含情感耗竭、学业疏离和低成就感三个维度的青少年学习倦怠测评问卷。随着教育竞争的日益激烈，青少年面临着巨大的学习压力。学校和教师应该注重培养学生的学习兴趣和爱好，鼓励学生参加课外活动和兴趣小组，拓宽学生的知识面和视野。
Python基础学习-04列表List
最新发布
soarfeng的专栏
11-10 455
• 使用[] 定义一个列表3） L = [[1,2,3],[4,5,6],[7,8,9]• 如何掌握本节内容1）掌握并记住：一维、二维列表、索引、分片操作、函数、数组解析等2）课后：把代码自己敲一遍。
D60【python 接口自动化学习】- python基础之数据库
tian_nx的博客
11-06 520
数据库就是指数据存储的库，作用就是组织数据并存储数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cqssss_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值