学习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技能，实现更加复杂和优雅的前端应用。
以下是我写的登录页面效果截图以及代码分享
<template>
<div class="Login">
<div class="box">
<h1>mall-admin</h1>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item prop="name">
<el-input prefix-icon="el-icon-user-solid" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input show-password prefix-icon="el-icon-lock" v-model="ruleForm.password" type=“password”></el-input>
</el-form-item>
<el-form-item>
<el-button class="Login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
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();
}
}
}
</script>
<style scoped lang="scss">
.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;
}
}
}
</style>以上便是我个人的Vue的部分所学，欢迎大家进行参考、评价~
