vue.js学习体会

yy_92

已于 2023-12-09 00:55:15 修改

阅读量867

点赞数 24

文章标签： vue.js 前端 javascript

于 2023-12-09 00:52:31 首次发布

本文链接：https://blog.csdn.net/yy_92/article/details/134889694

版权

作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。

Vue.js是一种前端JavaScript框架，用于构建用户界面。在学习Vue.js的过程中，我获得了以下几点心得体会：

常用指令

v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

1. 简单易学：Vue.js采用了简洁的语法和直观的API，使得学习曲线相对较低。即使没有深入了解JavaScript，也可以很快上手并开始构建应用程序。

第一个VUE实例：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

// 第一步：引入vue.js

<script src="../js/vue.js"></script>

</head>

<body>

// 第二步：创建根节点

<div id="app">

</div>

<script>

// 第三步：初始化vue实例，绑定根节点

var app= new Vue({

el: "#app",

data: {

msg: "第一个vue实例!",

})

</script>

</body>

</html>

2. 组件化开发：Vue.js鼓励开发者将应用程序拆分为多个独立的组件，每个组件负责特定的功能。这种组件化开发的方式使得代码更加可重用、可维护，并且方便团队协作。

常用的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

使用el 绑定DOM元素

3. 响应式数据绑定：Vue.js采用了双向数据绑定的方式，使得数据的变化可以自动更新到页面上。这种响应式数据绑定的特性极大地简化了前端开发的工作，减少了手动操作DOM的代码量。

4. 生态系统丰富：Vue.js拥有庞大的生态系统，包括官方维护的插件、工具库以及第三方开发者贡献的组件和工具。这使得开发者可以快速找到解决方案，并且可以根据自己的需求来扩展和定制Vue.js。

5. 社区活跃：Vue.js拥有一个活跃的开发者社区，开发者可以在社区中提问、分享经验和学习资源。这种社区的活跃程度使得解决问题更加便捷，并且可以从其他开发者的经验中获得启发。

综上所述，学习Vue.js是一种愉快的经历。它不仅可以帮助我构建高效、可维护的前端应用程序，还可以提高我的开发效率，并且让我能够与其他开发者分享和学习。