Vue.js课程学习心得体会

 一，前言:

       随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。

二，什么是vue.js？：

Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用
户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

Vue.js的优点：

轻量级: Vue 简单、 直接，所以Vue使用起来更加友好。
双向数据绑定:数据驱动视图，视图也可以驱动数据。
组件化开发: vue.js 提供了非常方便且高效的组件管理来进行加载公用的模块。
指令:指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为
插件:插件用于对vue框架功能进行扩展。

三，关于vue.js：

1.MVVM 模式：

Vue.js的开发模式: MVVM(Model-View-ViewModel)模式包括3个核心部分。
1）、Model(模型):数据层，主要是从数据库取出的经过特定出来之后的数据。
2）、View(视图):视图层，即HTML文档的DOM元素，也就是我们看到的页面。
3）、ViewModel(视图模型):用于连接视图与数据的数据模型，负责监听Model或者View的修改。

2.基础特性：

methods概述：

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

  data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

常用指令概述：

        指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

        Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

使用v-model指令实现select元素的双向数据绑定：

事件修饰符：

        v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。

用弹性布局实现如下效果：

四，总结：
        在实践项目中应用所学知识是最具挑战性和收获丰富的部分。通过构建实际项目，我更深入地理解了 Vue.js 的特性，并学会了解决实际项目中遇到的问题。这让我感受到了自己的成长和进步。总的来说，Vue.js 课程的学习为我打开了前端开发的大门，让我掌握了构建现代化、交互丰富的用户界面所需的技能。我将继续不断地学习、实践，并积极参与社区，不断提升自己的技术水平。