vue.js学习心得

前置知识

Vue.js是一个构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。核心职关注视图层，易于与其它库或已有项目整合。另一方面,当与现代工具链和各种支持库结合使用时，Vue 也完全能够为复杂的页用提供驱动。Vue.js的核心只关注视图层，易于与其它库或已有项目整合。另-面,当与现代工具链和各种支持库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

第一个vue.js实例

在vue.js项目中，每个vue.js应用都是通过vue构造函数创建新的vue实例开始的。在创建vue实例时，必不可少的一个选项就是el。el表示唯一根标，用于指定一个页面中已存在的DOM元素来挂载vue实例。签可以使用v-on来绑定点击事件。具体用法为v-on:click=”functionName”,中functionName是在Vue实例的methods定义的方法名。这个方法会在按钮被陆时触发，并且this指拘Vue实例。你也可以使用简写形式@click=" functionName",与v-on:click完全相同的。下面举个例子：

    <div id="app">
        <p>苹果电脑：价格--{{price}}</p>
        <p>苹果电脑：颜色--{{color}}</p>>
        <button @click="doChange">点击按钮把电脑价格改为10000</button>
    </div>
    <script>
        //2、创建一个vue实例
        var vm=new Vue({
            //绑定根标签，锁定作用域
            el:"#app",
                data(){
                    return{
                    price:5000,
                    color:"黑色",
                    num:2
                    }
             },
             //定义各种方法（函数）
             methods:{
                doChange(){
                       this.price=10000
                }
             }
        })
    </script>

运行结果：

组件

掌握组件化的开发方式:组件是Vue.js的核心特性之一-,通过组件化开发, 我们可以将界面拆分成多个独立的模块，每个模负责特定的功能和样式。在课程中,我学习习了如何创建、注册和使用组件,吸如何使用props和事件进行组件间的通信。通过组件化的开发方式，我可以更好地组织和管理代码，提高代码的可维护性可重用性。

组件导航菜单的使用，部分代码：

<template>
  <div id="app">
    <div class="left" v-if="$route.meta.isShow">
      <ul>
        <router-Link to="/">
          <li><img src="./assets/logo.png" alt="">首页</li>
        </router-Link>
        <router-Link to="/cart">
          <li><img src="./assets/logo.png" alt="">购物车</li>
        </router-Link>
        <router-Link to="/order">
          <li><img src="./assets/logo.png" alt="">订单</li>
        </router-Link>
        <router-Link to="/user">
          <li><img src="./assets/logo.png" alt="">用户列表</li>
        </router-Link>
      </ul>
    </div>

效果展示图：

过滤器

Vue.js过滤器是一种特殊的功能，它允许你在模板中对数据进行格式化。过滤器可以用在两个地方: mustache 插值和v-bind表达式。过滤器定义在Vue.js的原型上，它们通常使用大括号进行调用。过滤器可以接收参数,組可以返回任何值，包括字符串、数字、布尔值、对象数组等。
下面是一个简单的Vue.js过滤器的示例:

<div id="app">
        <table border="1">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.status|statusFormat}}</td>
                </tr>
            </tbody>
        </table>
        <h1>{{tel|telFormat}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    list: [
                        {
                            name: "衣服",
                            price: '100',
                            status: 1,
                        },
                        {
                            name: "帽子",
                            price: '50',
                            status: 0,
                        },
                        {
                            name: "鞋子",
                            price: '50',
                            status: 2,
                        }
                    ]
                }
            },
            methods: {

            },
            filters: {
                //定义一个给金额添加符号的过滤器
                //在过滤器里面，不能通过this拿到data里面的变量
                statusFormat(val) {
                    if (val == 0) {
                        return "待支付"
                    } else if (val == 1) {
                        return "待发货"
                    } else if (val == 2) {
                        return "已完成"
                    }
                },
            }
        })
    </script>

运行效果图：

总结

在参加Vue.js课程的学习后，我获得了许多宝贵的经验和知识。以下是我对Vue.js课程学习的一些总结:
1.深入理解Vue.js: 通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。
2.掌握开发技巧和最佳实践:课程中，我学习了许多实用的开发技巧和最佳实践。例如，如何使用组件化开发、如何进行状态管理、如何优化性能等。这些技巧和最佳实践不仅提高了我的开发效率也使我的代码更加健壮和可维护。
3.实践项目经验:通过参与课程中的实践项目，我加深了对Vue.js的理解和应用。我使用了Vue.js的各种特性和工具，如组件化、路由、状态管理等。通过实践项目,我不仅提高了自己的技能水平，也了解了实际项目中的需求和挑战。
4.学习团队协作:课程中,我与其他同学一参与了小组项目。通过团队协作,我不仅学会了如何与他人合作解决问题，也学会了如何更好地管理时间和资源。这些经验对我未来的职业发展非常重要。总之，参加Vue.js课程的学习是一次非常有收获的经历。通过这次课程,我深入了解了Vue.js的核心概念特性和应用，掌握了实用的开发技巧和最佳实践，并通过实践项目和团队协作提高了自己的技能水平。我相信这些经验和知识将对我未来的开发工作产生积极的影响。