一,前言:
随着互联网技术的爆发,越来越多的前端开发技术如雨后春笋般出现,在众多的 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 课程的学习为我打开了前端开发的大门,让我掌握了构建现代化、交互丰富的用户界面所需的技能。我将继续不断地学习、实践,并积极参与社区,不断提升自己的技术水平。