Vue学习心得体会

今天第六遍

已于 2023-12-20 16:05:36 修改

阅读量2.5k

点赞数 37

文章标签： vue.js 学习前端

于 2023-12-20 15:29:59 首次发布

本文链接：https://blog.csdn.net/2301_76263033/article/details/135109461

版权

前言

在学习的时候，即使有做计划，有时候也会因为一些其他的干扰，陷入迷茫之中，断断续续的学习，所以总结一下学习vue的一些表层的东西，帮助自己在学习过程中更加明确每一步该怎么走，也分享给大家。

Vue简介

Vue.js是一款轻量级的以数据驱动的前端JS框架，其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来实现页面的更新与展示。

vue安装及配置

首先下载node.js要求版本在8.9以上官网：https://nodejs.org/zh-cn/

npm install -g @vue/cli
# OR
yarn global add @vue/cli

下载完可检查在windows任务命令行里输入node -v

使用淘宝NPM镜像源下载比较快命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli（全局安装vue-cli）命令：cnpm install vue-cli -g

检查环境是否安装上：vue -V

你还可以用这个命令来检查其版本是否正确：

vue --version

升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

项目依赖

创建vue项目：

在命令行里输入命令：vue init webpack vue_text（创建名字为‘vue_text’的文件夹）

然后进入此文件夹：cd vue_text

然后手动下载：cnpm install

最后运行程序：npm run dev

运行之后会导出网址：http://localhost:8080

在网页上输入上面的网址即可

Vue特点

1.易上手：

首先，Vue.js的学习曲线相对平缓，对于初学者来说比较容易上手。它的核心概念包括组件、数据双向绑定、模板语法等，这些概念都是基于实际开发需求而设计的，因此在实际开发中非常实用。

Vue入门相对容易，课程从基本的Vue概念讲起，逐步引导我们了解和掌握Vue的核心特性，如组件、双向数据绑定、模板语法等。在学习过程中，我能够将这些理论知识运用到实际项目中，从而加深对Vue的理解。

2.响应式数据绑定：

Vue 的响应式编程模型是一大亮点。通过数据劫持和发布订阅模式，我们可以轻松实现数据和视图的双向绑定。当数据发生变化时，视图也会自动更新，大大简化了开发过程。这种编程模型不仅提高了代码的可读性和可维护性，也使得团队协作更加高效。

3.生态系统完善：

Vue生态系统完善，插件和库丰富。课程中介绍了许多常用的Vue插件和库，如vue-router、vuex、axios等，它们可以帮助我们快速扩展功能，提高开发效率。

4.组件化：

Vue的组件化开发方式非常实用。课程中强调了组件的重要性，引导我们如何设计和实现组件。通过组件化开发，我们可以将应用程序拆分为一个个独立的模块，每个模块都可以独立开发和测试。这种开发方式不仅提高了代码的重用性和可维护性，也使得团队协作更加高效。

Vue.的优势

1.首先，学习 Vue 课程使我更加深入地了解前端开发。在学习过程中，我不仅掌握了Vue的核心知识和技能，还了解了前端开发的流程和最佳实践。这些知识将对我的职业发展产生积极的影响。

2.其次，Vue.js的响应式编程模型非常强大。它可以通过数据劫持和发布订阅模式来实现数据和视图的双向绑定，当数据发生变化时，视图也会自动更新。这种编程模型不仅简化了开发过程，也提高了代码的可维护性和可读性。

3.在实践中，我发现在Vue.js 中构建单页应用程序变得非常容易。它提供了丰富的组件和指令，可以帮助我们快速构建出漂亮的界面。而且，Vue.js的生态系统也非常完善，我们可以轻松地使用各种插件和库来扩展功能。

Vue常用指令

在Vue项目的开发中，我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令，我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍：

（1）v-text: 用于更新绑定元素中的内容，类似于jQuery的text()方法

（2）v-html: 用于更新绑定元素中的html内容，类似于jQuery的html()方法

（3）v-if: 用于根据表达式的值的真假条件渲染元素，如果上图P3为false则不会渲染P标签

（4）v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性

（5）v-for: 用于遍历数据渲染元素或模板，如图中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3

（6）v-on: 用于在元素上绑定事件，图中在P标签上绑定了showP3的点击事件

除此之外还有许多Vue指令可以查看Vue2.0文档

组件安装

npm安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

我们要在打包文件打开终端，然后输入代码安装。

cnd

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

我们不会的可以去 element官网

学习

vue实例

在一个html文件中，我们直接可以通过script标签引入Vue.js，然后就可以在页面里写Vue.js代码了。上图中我们通过new Vue()构建了一个Vue的实例，在实例中，可以包含挂在元素（el），数据（data），模板（template），方法（methods）与生命周期钩子（created等）等选项。不同的实例选项拥有不同的功能，如：

（1）el表明我们的Vue需要操作哪一个元素下的区域，’#demo’表示操作id为demo的元素下区域。

（2）data表示Vue 实例的数据对象，data 的属性能够响应数据的变化。

（3）created表示实例生命周期中创建完成的那一步，当实例已经创建完成之后将调用其方法。

var vm = new vue（{
   el：'id',
   data:{
   a:1,
   b:2
}
create:function(){
//this 指vm实例
   console.log('a is:'+this.a);
}
}）

总结

通过使用Vue，我深刻体会到了它的简洁、灵活和高效。 Vue的渐进式特性使得它适用于不同规模和难度的项目，响应式数据绑定和组件化开发简化了开发流程，虚拟DOM的使用提高了性能，丰富的生态系统为开发者提供了更多便利。希望我的这些心得体会能够对正在学习和使用Vue的开发者有所帮助。学习是一个不断进步和成长的过程，它是我们提升自己、扩展知识和技能的重要途径。每个人在学习的过程中都会遇到困难和挑战，但只要我们保持积极的态度和坚定的决心，就能够克服这些障碍，并取得进步。