Vue.js的学习心得

您所在的位置:网站首页 js实训心得3000字 Vue.js的学习心得

Vue.js的学习心得

2024-07-03 16:50| 来源: 网络整理| 查看: 265

学习Vue.js的过程中,我收获了很多,下面是我个人的学习心得体会。

  1.Vue.js是一种前端框架,它的设计理念是响应式的数据绑定和组件化。通过数据绑定,我们可以方便地将数据和DOM元素进行关联,实现数据的自动渲染和更新。通过组件化,我们可以将页面拆分成多个独立的组件,提高代码的可复用性和维护性。在学习Vue.js的过程中,我首先掌握了它的基本语法和概念。Vue实例是Vue.js的核心,通过实例化一个Vue对象,我们可以将数据、方法、计算属性等绑定到视图上。

  2.在Vue项目的开发中,我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令,我们可以淋漓尽致地发挥Vue数据驱动的强大功能。指令是Vue中常用的语法糖,如v-bind用于绑定属性,v-if和v-for用于条件渲染和循环渲染等。理解这些基本概念对于后续的学习非常重要。以下便是一些常用指令的简单介绍:

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

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

(3)v-if: 用于根据表达式的值的真假条件渲染元素

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

(5)v-for: 用于遍历数据渲染元素或模板

(6)v-on: 用于在元素上绑定事件

  3.我深入学习了Vue.js的组件化开发。组件可以进行细粒度的拆分,每个组件可以有自己的数据、模板和方法,通过组件的嵌套和组合,可以构建出复杂的应用。在组件化开发中,我学会了如何定义组件、如何进行组件间通信,包括父子组件的数据传递和事件触发,兄弟组件间的通信等。掌握组件化开发可以提高代码的复用性和可维护性,提升开发效率。

  4.我学习了Vue.js的路由和状态管理。Vue Router是Vue.js官方提供的路由管理器,通过它可以实现页面间的切换和参数传递。Vuex是Vue.js的状态管理库,它可以集中管理应用的状态,并提供一种响应式的机制来保持状态和视图的同步更新。学习了路由和状态管理可以更好地进行前端项目的开发和维护。

  5.我通过实际项目的实践加深了对Vue.js的理解和应用能力。在项目中,我充分发挥Vue.js的优势,使用响应式数据绑定和组件化开发,提高了开发效率、代码可读性和可维护性。同时,我也遇到了一些挑战和问题,在解决这些问题的过程中,我不断学习、查阅文档和与其他开发者交流,提高了自己的技能水平。

总的来说,学习Vue.js是一次很有收获的经历。通过学习Vue.js,我掌握了前端开发的核心技术,提高了开发效率和代码质量。不过我们要保持对学习的激情和持续的学习态度。Web开发技术变化非常快,不断学习新的技术和框架是我们作为开发者必须做的事情。在学习过程中,遇到问题不要灰心,搜索和请教他人是解决问题的有效途径。我相信,在不断实践和探索中,我会进一步提升自己的Vue.js技能,实现更加复杂和优雅的前端应用。

以下是我写的登录页面效果截图以及代码分享

mall-admin 登录 import axios from 'axios'; export default { name:"Login", data() { return { ruleForm: { name: "", password: "", }, rules: { name: [ { required: true, message:"请输入用户名", trigger: 'blur' }, ], password:[ { required: true, message:"请输入密码", trigger: 'blur' }, ], }, }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //调用登录的接口,实现登录功能 axios .post("http://106.52.94.26:3001/user/login",{ username: this.ruleForm.name, password: this.ruleForm.password, }) .then((res)=> { console.log(res); // 登录成功之后,把服务器返回来的数据,存储到本地 localStorage.setItem("userinfo",JSON.stringify(res.data.user)) if (res.data.code == 200) { this.$message({ message:"登录成功", type:"success", }); //跳转到首页 this.$router.push("/home") } }) .catch((err)=>{ console.log(err); this.$message.error(err.response.data.msg); }); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } .Login{ color:rgba(6, 83, 248, 0.842); display: flex; justify-content: center; .box{ width: 350px; box-shadow: #ccc 0px 0px 8px; padding:50px; margin-top: 150px; h1{ text-align: center; } .Login-btn{ width: 350px; } } }

以上便是我个人的Vue的部分所学,欢迎大家进行参考、评价~



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3