《Vue.js前端框架技术》心得体会

2301_78466479

已于 2023-12-09 15:44:22 修改

阅读量50

点赞数

文章标签： javascript

于 2023-06-02 23:46:19 首次发布

本文链接：https://blog.csdn.net/2301_78466479/article/details/131015821

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

《Vue.js前端框架技术》心得体会

提示：以下是本篇文章正文内容，下面案例可供参考

一、开头

这学期我们学到了vue框架，并开始入手做了第一个项目，每周一次的课程让我们收获了知识的同时，还锻炼了我们的逻辑能力，能够清楚地认识到自己的不足。老师很耐心地为我们讲解例题，讲的很仔细，我们学到了很多以前没有学到或者没有认真学习、已经忘记的知识点。

二、主体

1.知识理解

vue,js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式，用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上，增量式开发设计。它的好处在于轻量级（Vue简单、直接，所以Vue使用起来更加友好）双向数据绑定（数据驱动视图，视图也可以驱动数据）组件化开发（vue.js提供了非常方便的而且高效的组件管理来进行加载公用的模块）指令（指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为）插件（插件用于对vue框架功能进行扩展）等这几个方面。同时vue.js是一个Web前端，主要是可以让我们更加快速及系统化地构建前端，它主要涉及到HTML,CSS，和JavaScript，因为之前有学习了其他前端HTML,CSS,和JavaScript的经验，所以感觉操作不是特别困难。一开始我们就做了第一个vue.js案例

要点：

1.引入Vue.js核心文件

2.创建Vue实例，绑定DOM元素，定义数据

3.使用插值表达式{{}}绑定数据

第一个vue.js案例

2.深入学习

Vue.is 不仅改善了前端的开发体验，还极大地提高了开发效率。为了更好地理解并掌握 Vue.js 的使用方法，我们学习了Vue 实例的创建、模板、data 初始数据的定义、methods 方法的定义。在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

一、使用el 绑定DOM元素

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。 data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

二、data数据对象

1、对象（Object）的形式

2、函数（Function）的形式

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

三、 this.属性名的形式来访问，this表示Vue实例。

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