vue.js课程学习与体会

已于 2023-12-15 23:01:28 修改
阅读量49 收藏
点赞数
文章标签： vue.js 学习 前端
于 2023-12-15 22:58:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76718231/article/details/135026404
版权

经过本学期的课程学习，以下是我对vue的一些基本了解与使用

Vue 2.x 的主要特性和概念：

1. 声明式渲染：

  • Vue 使用简洁的模板语法来声明式地将数据渲染到 DOM 上。
  • 通过使用双大括号 {{ }} 进行插值，可以将数据动态地绑定到 HTML 中。

2. 组件化开发：

  • Vue 2.x 支持组件化开发，允许开发者将页面拆分为独立的、可重用的组件。
  • 每个组件都有自己的状态、生命周期钩子等。

3. Vue 实例：

  • 应用的核心是一个 Vue 实例，通过实例化 Vue 构造函数来创建。
  • 实例可以拥有数据、方法、生命周期钩子等。

4. 数据绑定：

  • Vue 提供了双向数据绑定，即当数据变化时，视图会自动更新，反之亦然。
  • 使用 v-model 指令可以实现表单元素与数据的双向绑定。

5. 指令：

  • Vue 提供了一系列的指令，例如 v-if、v-for、v-show 等，用于处理 DOM 元素的显示和隐藏，循环渲染等操作。

6. 事件处理：

  • 使用 v-on 指令可以监听 DOM 事件，触发相应的方法。
  • 事件修饰符如 .stop、.prevent 等可以方便地修改事件的行为。

7. 计算属性和侦听器：

  • Vue 支持计算属性，通过 computed 关键字定义的计算属性会根据其依赖缓存起来，只有在相关依赖改变时才会重新计算。
  • 使用 watch 来监听数据的变化，并执行相应的操作。

8. 过渡效果和动画：

  • Vue 提供了一些内置的过渡类名，可以通过 CSS 过渡或动画来实现元素的平滑过渡。

9. 路由管理：

  • 对于单页面应用 (SPA)，Vue 2.x 通常与 Vue Router 配合使用，实现前端路由。

10. 状态管理：

  • 对于大型应用，Vue 2.x 可以使用 Vuex 进行状态管理，将状态集中管理，方便组件之间的通信。

11. 生命周期钩子：

  • Vue 提供了一系列的生命周期钩子函数，如 beforeCreate、created、beforeMount、mounted 等，允许开发者在不同阶段执行自定义逻辑。

除此之外，vue项目还常常使用一些包，其分别如下 

  1. Vue Router:

    • 描述： 用于管理应用程序的路由。
    • 安装命令： npm install vue-router

  2. Vuex:

    • 描述： 用于集中管理应用程序的状态。
    • 安装命令： npm install vuex

  3. Axios:

    • 描述： 用于进行 HTTP 请求的库。
    • 安装命令： npm install axios

  4. Element UI 或 Vuetify:

    • 描述： 两个流行的UI框架，提供了丰富的Vue组件。
    • 安装命令：
      • Element UI: npm install element-ui
      • Vuetify: npm install vuetify

  5. Lodash:

    • 描述： 提供了很多实用的 JavaScript 工具函数。
    • 安装命令： npm install lodash

  6. Moment.js:

    • 描述： 处理日期和时间的库。
    • 安装命令： npm install moment

  7. Vue Axios:

    • 描述： Vue.js 的 Axios 插件，用于更方便地在Vue实例中使用Axios。
    • 安装命令： npm install vue-axios

  8. Vue-i18n:

    • 描述： 提供国际化支持的Vue插件。
    • 安装命令： npm install vue-i18n

  9. Vue Masonry CSS:

    • 描述： 在Vue中实现瀑布流布局的库。
    • 安装命令： npm install vue-masonry-css

  10. Vue-Router-Scroll:

    • 描述： 管理Vue Router的滚动位置。
    • 安装命令： npm install vue-router-scroll

 这些包代表了Vue生态系统中的一小部分，也可以根据项目需求和功能要求选择合适的包。

以下是一些vue项目的基本功能实现

1.V-ROUTER的基本用法

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

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

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

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');

在组件中时

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

2.Vuex的基本使用方法

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
});

// 在组件中引入
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync']),
  },
};
 

3.Axios的使用

// 在组件或服务中引入
import axios from 'axios';

// 发送 GET 请求
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送 POST 请求
axios.post('/api/data', { key: 'value' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

4. Element UI:

// 在main.js中引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
 

<!-- 在组件中使用 Element UI 的组件 -->
<template>
  <el-button type="primary">Primary Button</el-button>
</template>
 

除此之外，还有一些vue基本使用方法：

1. 插值和绑定：

总体而言，Vue.js的魅力体现在其简洁、灵活、易学易用的设计理念，使得开发者可以更高效地构建现代化的Web应用。

  • 插值： 使用 {{ }} 插值语法将数据渲染到模板中。

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

    <script>
    export default {
      data() {
        return {
          message: 'Hello, Vue!',
        };
      },
    };
    </script>
    动态绑定属性： 使用 v-bind 或简写 : 来动态绑定元素属性。

  • <template>
      <img :src="imageUrl" alt="Image">
    </template>

    <script>
    export default {
      data() {
        return {
          imageUrl: 'path/to/image.jpg',
        };
      },
    };
    </script>

  • 2. 指令：

  • v-if 和 v-else： 条件渲染元素。

  • <template>
      <div>
        <p v-if="isTrue">This is true</p>
        <p v-else>This is false</p>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          isTrue: true,
        };
      },
    };
    </script>
    v-for： 循环渲染列表。

  • <template>
      <ul>
        <li v-for="item in items">{{ item.name }}</li>
      </ul>
    </template>

    <script>
    export default {
      data() {
        return {
          items: [
            { name: 'Item 1' },
            { name: 'Item 2' },
            // ...
          ],
        };
      },
    };
    </script>

  • 3. 事件处理：

  • v-on 和 @： 绑定事件处理函数。

  • <template>
      <button @click="handleClick">Click me</button>
    </template>

    <script>
    export default {
      methods: {
        handleClick() {
          alert('Button clicked!');
        },
      },
    };
    </script>

  • 4. 表单绑定：

  • v-model： 双向绑定表单元素。

  • <template>
      <input v-model="inputValue" placeholder="Type something">
      <p>{{ inputValue }}</p>
    </template>

    <script>
    export default {
      data() {
        return {
          inputValue: '',
        };
      },
    };
    </script>

  • 5. 计算属性和侦听器：

  • computed： 计算属性，可以根据依赖的数据计算得到一个新值。

  • <template>
      <p>{{ reversedMessage }}</p>
    </template>

    <script>
    export default {
      data() {
        return {
          message: 'Hello, Vue!',
        };
      },
      computed: {
        reversedMessage() {
          return this.message.split('').reverse().join('');
        },
      },
    };
    </script>
    watch： 侦听器，用于监听数据的变化。

  • <template>
      <p>{{ count }}</p>
    </template>

    <script>
    export default {
      data() {
        return {
          count: 0,
        };
      },
      watch: {
        count(newValue, oldValue) {
          console.log(`Count changed from ${oldValue} to ${newValue}`);
        },
      },
    };
    </script>
    这些是Vue 2.x中一些基本的语法和概念。

  • 相比其他的一些课程，我更能体会与感受vue.2x的魅力

  • 简单易学： Vue.js 的核心库只关注视图层，相比于其他框架，它的学习曲线更为平缓。即使是初学者，也可以迅速上手并开始构建应用。

  • 灵活性： Vue 提供了一套灵活的组件系统，使开发者能够以组件为基础构建应用。这种组件化开发风格有助于代码的可维护性和复用性。

  • 响应式数据绑定： Vue.js 使用了响应式数据绑定机制，通过数据驱动视图。当数据发生变化时，视图会自动更新，无需手动操作DOM，使得代码更为简洁和易维护。

  • 虚拟DOM： Vue.js 使用虚拟DOM来优化DOM操作，通过比较前后两个虚拟DOM树的差异，最小化实际DOM的更新。这提高了应用的性能和效率。

  • 渐进式框架： Vue 被设计为渐进式框架，可以逐步引入到项目中。你可以选择仅使用Vue核心特性，也可以结合其它库和工具，例如Vue Router、Vuex等。

  • 生态系统： Vue 生态系统庞大而丰富，拥有大量的第三方库和插件，可以满足各种需求。这包括 UI 框架（如Element UI、Vuetify）、路由管理（Vue Router）、状态管理（Vuex）等。

  • 活跃的社区和文档： Vue 拥有一个积极活跃的社区，开发者们在社区中分享经验、解决问题，使得学习和开发过程更为顺畅。官方文档也非常详尽，提供了清晰的指导和示例。

  • 良好的性能： 虽然 Vue.js 不是唯一关注性能的框架，但其设计上的一些特点，如虚拟DOM和合理的更新策略，使得Vue在性能方面表现出色。

2301_76718231
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue技术实现的购物网站（含设计报告）
06-30
本项目适用于课程设计，利用Vue实现的一个模仿antd官网的购物网站。项目功能如下所示。 1）前端功能 商品分类展示; 商品详情 商品搜索 订单详情(购物车) 登录与注册 注意：注册用户可以购买商品，非注册用户仅可以浏览、查询商品 2）后端功能（可选） 提供商品查询接口，满足系统功能。 或者：使用模拟数据，不需要后端提供数据接口 本项目采用的是模拟静态数据，所以不具备数据库文件。
学习Vue.js的心得体会【一课一得】
weixin_67768561的博客
12-27 940
其次，Vue.js强调组件化开发，这是我非常喜欢的特性。通过将页面拆分成多个组件，每个组件负责自己的逻辑和样式，我可以更加清晰地组织代码，并且可以复用组件，提高开发效率。同时，Vue.js提供了方便的组件通信机制，使得不同组件之间可以相互传递数据和触发事件，实现更复杂的交互逻辑。Vue.js提供了一种现代化的开发方式，让我能够更好地组织代码、提高开发效率，并且构建出更灵活、交互性更强的Web应用程序。：Vue.js引入了响应式数据绑定的机制，当数据变化时，相关的DOM会自动更新。
vue.js课程心得体会
2301_77805385的博客
12-31 470
vue.js因其简单易用、高效性能和强大生态系统的优势，成为了广大开发者喜爱的前端框架之一，拥有广泛的影响力。安装成功后如图显示。
Vue.js课程学习心得体会
fqyak的博客
12-30 543
总的来说，Vue.js 课程的学习为我打开了前端开发的大门，让我掌握了构建现代化、交互丰富的用户界面所需的技能。v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。
Vue.js学习心得
jcxek的博客
12-27 831
我选择学习Vue.js，一方面是因为其作为前端框架的流行度与日俱增，另一方面，它的简单、灵活和高效吸引了我。在经过一段时间的系统学习和实践后，我对Vue.js有了更深入的了解，下面分享一下我的学习心得。同时，我也希望能够参与到Vue.js的社区中，与其他开发者交流和学习，共同推动Vue.js的发展。最后，我想说，学习Vue.js不仅是一次技术的学习和掌握，更是一次思维的转变和提升。通过学习和实践Vue.js，我更加深入地理解了前端开发的本质和核心，也更加熟悉了现代前端开发的流程和模式。
age-of-vue.js
04-12
Vue.js，作为一款轻量级、高性能的前端JavaScript框架，自2014年发布以来，已经在Web开发领域取得了显著的地位。Vue.js以其易学易用、组件化和灵活性著称，尤其适合构建用户界面。在"Vue.js的时代"这一主题中，我们...
192springboot + vue 智慧党建系统.zip（可运行源码+数据库文件+）
最新发布
04-24
《基于Spring Boot与Vue.js的智慧党建系统详解》 智慧党建系统是现代信息化技术与党建工作紧密结合的产物，它借助先进的Web开发框架，如Spring Boot和Vue.js，实现了高效、便捷的党务管理工作。本系统旨在提供一个...
课程设计Vue实现基于物联网的蔬菜大棚温湿度监控系统源码
11-02
Vue.js是一款轻量级的JavaScript前端框架，它以其简洁的API、高效的响应式系统以及良好的可扩展性而受到开发者的青睐。在物联网（IoT）领域，这种系统能够实时收集和展示大棚内的环境数据，帮助农民优化农作物生长...
SpringBoot+Vue图书电子商务网站答辩PPT.pptx
09-08
此次实践证明，理论学习与实践操作相辅相成，使作者的专业知识和能力得到了显著提升，也深刻体会到终身学习的重要性。 最后，作者表达了对大学老师和论文指导老师的感激之情，他们的耐心指导对论文和系统开发起到了...
毕业论文ssm660基于SSM框架的在线学习系统设计与实现+vue论文.doc
07-31
本毕业设计《基于SSM框架的在线学习系统设计与实现+Vue》旨在构建一个高效、便捷的在线教育平台，利用现代信息技术提升教学效率与质量。通过采用SSM（Spring、SpringMVC、MyBatis）框架、MySQL数据库以及Java编程...
web课程设计报告 web课程设计报告
01-06
web课程设计报告 1 概述 1 1.1 设计目的 1 1.2 设计任务 1 1.3 可行性分析 1 2 支撑环境规划 2 3 系统目标和设计原则 2 3.1 系统目标 2 3.2 设计原则 2 4 需求分析 3 4.1 系统任务 3 4.2 系统功能 3 4.3 系统流程图 3 5 系统详细设计 4 5.1 系统主要功能结构 4 5.2 数据库设计 4 6 总体实施 6 6.1 功能模块设计实现 6 6.2 运行结果 10 7 研制报告 20
管理信息系统课程设计报告
06-20
管理信息系统课程设计报告 小超市货物信息系统
基于SpringBoot+Vue音乐网站源码及实习报告
12-05
基于SpringBoot+Vue音乐网站实习报告 源码及资源在中有网盘链接，1个G左右
Vue.js学习总结
qq_39629852的博客
12-28 1587
通过学习Vue.js，我确信自己即将走上大型项目开发的正确道路上，并且我对未来在开发领域中的职业发展充满了信心。学习是一项艰苦的工作，每次解决一个难题，都会有无比的成就感、满足感，仿佛征服了一个又一个的困难。Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex)Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架!
vue.js学习总结和心得体会
a2840561372的博客
12-28 580
同时，Vue.js还提供了许多方便的指令和组件，可以快速地构建复杂的界面。而且，Vue.js还提供了一套完整的生命周期钩子函数，可以在不同的阶段执行相应的操作，使得我们能够更好地控制应用程序的行为。总的来说，Vue.js是一个非常优秀的前端框架，我在使用它的过程中获得了很多收获。我相信，在未来的项目中，我还会继续使用和深入学习Vue.js，以提升自己的前端开发能力。Vue.js本身提供了丰富的功能，但是对于一些特定的需求，可能需要额外的插件来满足。在学习Vue.js的过程中，我获得了许多宝贵的经验和体会。
vue.js学习心得
aim_ty的博客
12-20 448
在课程中，学习Vue.js课程是一次非常有收获的经历。通过这次课程，我深入了解了Vue.js的核心概念特性和应用，同时也掌握了一实用的开发技巧和最佳实践。我相信这些知识和经验将对我未来的开发工作产生积极的影响。
VUE-学习报告
Howlyao的博客
06-22 630
iview iView 是一套基于 Vue.js 的 UI 组件库，主要服务于 PC 界面的中后台产品。 iview环境配置 可以打开iview的官网：iview官网 查看指南，都比较详细 安装iview $ npm install iview --save 引入iview 一般在 webpack 入口文件 main.js 中如下配置： ... import iView form 'i...
Vue学习总结(更新中)
是日前端
05-19 3287
一、Vue的基本使用及模板语法 1、Vue简介     1.1 Vue是一套用于构建用户界面的渐进式框架： 声明式渲染—>组件系统—>客户端路由—>集中式状态管理—>项目构建     1.2 优点： 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟DOM 2、Vue的基本使用  &
Vue学习总结
weixin_46333722的博客
01-23 423
Part1 01-Vue做了什么 1、下载开发版本Vue 2、Chrome下载开发者调试工具 3、关闭提示 修改ico——打开浏览器默认标题前的图标 学了什么 1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2、root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法 3、root容器里的代码被称为【Vue模板】 4、Vue实例和容器是一一对应的 5、真实开发中只有一个Vue实例，并且会配合着组件一起使用 6、{{XXX}}中的XXX要写j
Vue.js学习：日期操作与JS事件
"这篇文档是关于Vue.js的学习笔记，涵盖了日期对象的操作和JavaScript中的事件处理。" 在Vue.js的学习过程中，了解JavaScript的基础语法是至关重要的，其中包括对日期对象的处理。在JavaScript中，我们可以创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值