Vue.js的学习心得

学习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的部分所学,欢迎大家进行参考、评价~

  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 两个月Vue.js学习计划 第一周: - 了解Vue.js是什么以及它的特点 - 学习Vue.js的基本语法和指令 - 创建简单的Vue实例 - 练习使用Vue的数据绑定和事件绑定 第二周: - 学习Vue组件的使用 - 练习使用Vue路由 - 了解Vuex(Vue的状态管理库) - 创建一个简单的Vue项目 第三周: - 学习使用Vue CLI创建和管理Vue项目 - 学习使用Axios进行Ajax请求 - 练习使用Vue进行组件间通信 - 创建一个简单的Vue项目 第四周: - 学习使用Vue的动画效果 - 学习使用Vue的表单绑定 - 学习使用Vue的验证 - 创建一个简单的Vue项目 第五周至八周: - 练习使用Vue.js创建一个完整的项目 - 学习使用Vue的高级特性,如自定义指令和过渡效果 - 学习使用Vue的第三方库 - 创建一个简单的Vue项目 第九周至十周: - 学习使用Vue的服务端渲染 - 学习使用Vue的打包和部署 - 练习使用Vue与其他技术栈配合使用,如Vue+Node.js - 创建一个简单的Vue项目 每周都需要练习使 ### 回答2: 学习Vue.js需要系统性的学习和实践的过程。下面是一个为期两个月的Vue.js学习计划: 第一个月: 1. 第一周:先了解Vue.js的基础知识,包括Vue.js的特性和核心概念。 2. 第二周:学习Vue.js的基础语法和模板语法,并能够用Vue.js创建简单的应用。 3. 第三周:深入学习Vue.js的组件化开发,包括组件的使用、传递数据和通信。 4. 第四周:学习Vue.js的路由和状态管理,掌握Vue Router和Vuex的使用方法。 第二个月: 1. 第一周:学习Vue.js的进阶特性,如Vue的动画和过渡效果。 2. 第二周:了解Vue.js的生命周期钩子函数和异步请求,学会在实际项目中使用它们。 3. 第三周:学习Vue.js的优化技巧和性能调优,包括代码分割和懒加载等。 4. 第四周:完成一个实际的Vue.js项目,可以是一个简单的个人博客、电商网站等。 此外,还有一些额外的建议: 1. 在学习过程中多查看Vue.js的官方文档,掌握最新的特性和技术。 2. 参加一些Vue.js的社区讨论或者线上课程,与其他开发者交流经验和学习心得。 3. 实践是学习的重要环节,尽量多做一些小项目或者练习,加深对Vue.js的理解和应用能力。 通过遵循这个学习计划,希望你能够在两个月内系统地学习和掌握Vue.js,并且能够较为熟练地应用它来开发前端项目。祝你学习顺利! ### 回答3: 学习Vue.js的计划可以分为以下几个阶段,这个计划为期两个月,每个阶段大约为2-3周左右。 阶段一:理论基础(1周) - 了解Vue.js的基本概念和特点 - 学习Vue.js的基本语法和指令 - 掌握Vue.js的生命周期和组件通信方式 阶段二:项目实践(2周) - 实践一些小型项目,如制作一个简单的TodoList - 学习如何使用Vue.js进行组件开发和数据绑定 - 掌握Vue.js的路由管理和状态管理 阶段三:深入学习(2周) - 学习Vue.js的原理和内部运行机制 - 掌握Vue.js的高级特性,如自定义指令和过滤器 - 学习如何使用Vue.js进行表单验证和动画效果 阶段四:项目实践升级(2周) - 尝试开发一个中等复杂度的项目,如论坛或电商网站 - 进一步熟悉Vue.js的高级组件和插件库的使用 - 掌握如何进行Vue.js的优化和性能调优 阶段五:实际项目(2周) - 参与一个真实的项目,与团队合作进行Vue.js的开发 - 学习如何调试和解决实际项目中的问题 - 掌握前后端的接口对接和协同开发 阶段六:总结与扩展(1周) - 总结学习过程中的经验和教训 - 了解Vue.js的周边生态,如Vue Router和Vuex - 学习如何扩展Vue.js,如自定义指令和插件开发 在学习的过程中,可以结合官方文档、视频教程和实战项目进行学习。同时要注重动手实践,通过编写代码来加深理解和掌握Vue.js的知识。另外,也可以参加一些线上或线下的Vue.js培训和交流活动,与其他开发者分享经验和解决问题。总之,坚持不懈、持续学习是掌握Vue.js的关键。祝你学习愉快!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值