Vue.js前端框架技术学习心得体会

     Vue.js前端框架技术学习心得体会

目录

     Vue.js前端框架技术学习心得体会

一、Vue.js介绍

1.易上手：

2.响应式数据绑定：

3.生态系统完善：

4.组件化：

二、Vue.js的优势

三、总结

四、代码

1.app登陆页代码

2.app侧边栏代码

---

---

---

学习Vue.js 是一次非常有价值的经历。在开始学习之前，我对前端开发有一定的了解，但Vue.js的出现让我对前端开发有了全新的认识。

一、Vue.js介绍

1.易上手：

       首先，Vue.js的学习曲线相对平缓，对于初学者来说比较容易上手。它的核心概念包括组件、数据双向绑定、模板语法等，这些概念都是基于实际开发需求而设计的，因此在实际开发中非常实用。

       Vue入门相对容易，课程从基本的Vue概念讲起，逐步引导我们了解和掌握Vue的核心特性，如组件、双向数据绑定、模板语法等。在学习过程中，我能够将这些理论知识运用到实际项目中，从而加深对Vue的理解。

2.响应式数据绑定：

       Vue 的响应式编程模型是一大亮点。通过数据劫持和发布订阅模式，我们可以轻松实现数据和视图的双向绑定。当数据发生变化时，视图也会自动更新，大大简化了开发过程。这种编程模型不仅提高了代码的可读性和可维护性，也使得团队协作更加高效。

3.生态系统完善：

       Vue生态系统完善，插件和库丰富。课程中介绍了许多常用的Vue插件和库，如vue-router、vuex、axios等，它们可以帮助我们快速扩展功能，提高开发效率。

4.组件化：

       Vue的组件化开发方式非常实用。课程中强调了组件的重要性，引导我们如何设计和实现组件。通过组件化开发，我们可以将应用程序拆分为一个个独立的模块，每个模块都可以独立开发和测试。这种开发方式不仅提高了代码的重用性和可维护性，也使得团队协作更加高效。

二、Vue.js的优势

       1.首先，学习 Vue 课程使我更加深入地了解前端开发。在学习过程中，我不仅掌握了Vue的核心知识和技能，还了解了前端开发的流程和最佳实践。这些知识将对我的职业发展产生积极的影响。

       2.其次，Vue.js的响应式编程模型非常强大。它可以通过数据劫持和发布订阅模式来实现数据和视图的双向绑定，当数据发生变化时，视图也会自动更新。这种编程模型不仅简化了开发过程，也提高了代码的可维护性和可读性。

       3.在实践中，我发现在Vue.js 中构建单页应用程序变得非常容易。它提供了丰富的组件和指令，可以帮助我们快速构建出漂亮的界面。而且，Vue.js的生态系统也非常完善，我们可以轻松地使用各种插件和库来扩展功能。

三、总结

       不过，Vue.js也有一些挑战和难点。例如，它的一些概念和用法可能会让初学者感到困惑。此外，在构建大型应用程序时，我们需要注意组件的划分和层级结构的设计，这需要一定的经验和技巧。

       总的来说，Vue.js是一个非常优秀的前端框架，具有易上手、灵活性强、可扩展性高等特点。通过学习 Vue.js，我不仅掌握了一项实用的技术，掌握了Vue.js的核心知识和技能，还对前端开发有了更深入的理解。我相信在未来的工作中，Vue.js 将会成为我重要的武器之一，将成为我的得力助手。

四、代码

课堂学习代码案例

app登陆页代码案例
app侧边栏代码案例

1.app登陆页代码

<template>
  <div class="login">
    <!-- 中间的盒子 -->
    <div class="box">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <h1>mall-admin</h1>
        <el-form-item prop="name">
          <el-input placeholder="请选择用户名" prefix-icon="el-icon-user-solid" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请选择密码" prefix-icon="el-icon-lock" show-password v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  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) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  computed: {},
};
</script>


<style scoped lang="scss">
.login {
  display: flex;
  justify-content: center;

  .box {
    margin-top: 200px;
    width: 400px;
    box-shadow: 0px 0px 10px #888888;
    padding: 35px;

    .login-btn {
      width: 400px;
      margin-top: 50px;
    }
  }
}
</style>

2.app侧边栏代码

<template>
  <div id="app">
    <!-- v-show v-if 为真显示 为假隐藏 -->
    <div class="left" v-if="$route.meta. isShow">
      <ul class="menu">
        <li>
          <router-link to="/"><i class="el-icon-s-home"></i>首页</router-link>
        </li>
        <li><router-link to="/about">关于</router-link></li>
        <li><router-link to="/order"><i class="el-icon-s-order"></i>订单页面</router-link></li>
        <li><router-link to="/cart"><i class="el-icon-shopping-cart-full"></i>购物车</router-link></li>
        <li><router-link to="/my"><i class="el-icon-user-solid"></i>我的</router-link></li>
        <button @click="toHome">跳转到首页</button>
      </ul>
    </div>
    <div class="right">
      <div class="header" v-if="$route.meta.isShow">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-show="$route.meta.title !== '首页'"><a href="/">{{ $route.meta.title
          }}</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img src="./assets/logo.png" alt="">
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="退出" >退出</el-dropdown-item>
            <el-dropdown-item command="个人资料">个人资料</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 路由的占位符 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    toHome() {
      this.$router.push("/")
    },
    handleComand(command){
      //alert("点击菜单列吗")
      //跳转到登录页
      if(command=="退出"){
        this.$router.push("/login")
      }else{

      }
    }
  }
}
</script>


<style lang="scss" scoped>
#app {
  display: flex;

  .left {
    .menu {
      padding-top: 25px;
      background: #545C64;
      color: white;
      list-style: none;
      height: 800px;
      width: 160px;

      li {
        margin-top: 20px;

        a {
          color: white;
          text-decoration: none;
        }

        i {
          font-size: 22px;
          color: #909399;
          margin-right: 10px;
        }
      }
    }
  }

  .right {
    flex: 1;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 40px;
        border-radius: 50%;
      }
    }
  }
}
</style>