Js.vue课程心得体会
当我开始学习Vue.js时，我感到非常兴奋和好奇。作为一个Web开发人员，我一直渴望探索新的技术，并尝试将它们应用到我的项目中。Vue.js是一个流行的JavaScript框架，它可以帮助我们构建交互式Web应用程序。通过学习Vue.js，我能够更好地理解前端开发的基础知识，并掌握一些有用的工具和库，以帮助我们构建更强大和灵活的应用程序。
例如事件修饰符
键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：
在开始学习Vue.js之前，我阅读了一些教程和文档，并尝试了一些简单的示例。
我发现Vue.js非常易于学习，并且它提供了一种简单而直观的方式来构建Web应用程序。
概述：
指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。
Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。
v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
案例：
v-on
v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。v-on可以直接使用“@”
案例：
v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-model修饰符
v-model有3个修饰符，分别是lazy、number、trim
1、lazy
v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。
<input type="text" placeholder="搜索" v-model.lazy='keyword' />
2、number
默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。
<input type="text" placeholder="搜索" v-model.number='keyword' />
3、trim
trim修饰符可以去除输入内容左右两边的空格。
<input type="text" placeholder="搜索" v-model.trim='keyword' />案例
使用指令完成计算总价：
例如组件
组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。
组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。
为什么使用组件
1、方便重复使用
2、减少代码重复冗余
3、便于多人协同开发
4、有助于提高开发效率
5、提升整个项目的可维护性
Tip:通常，代码中一些没有见过的自定义标签，如<my-component>等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。
举例，比如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。
element的安装成功的显示：
引入element：
在学习Vue.js的过程中，我遇到了许多挑战和困难。其中最大的挑战之一是如何处理异步数据和事件。Vue.js提供了一些有用的工具和库，如Vuex和Vee-Validate，以帮助我们处理这些复杂的问题。通过使用这些工具，我能够更好地理解Vue.js的核心概念，并逐渐掌握了如何使用它们来构建更复杂的应用程序。
除了基本概念之外，我还学习了Vue.js的一些高级功能，如动态组件、插槽和指令等。这些功能使Vue.js成为一个非常强大的框架，可以帮助我们创建更复杂和定制化的应用程序。通过学习这些高级功能，我能够更好地了解Vue.js的强大之处，并掌握一些有用的技巧和方法，以帮助我们构建更强大和灵活的应用程序。
在学习Vue.js的过程中，我意识到它不仅仅是一个JavaScript框架，而是一个完整的开发生态系统。Vue.js有许多有用的库和工具可供选择，例如Element UI、Vuetify和Element Plus等，它们提供了许多预构建的组件和UI库，以帮助我们快速构建高质量的Web应用程序。此外，Vue CLI、Vite和Nuxt.js等工具也提供了许多有用的功能和选项，以帮助我们更轻松地开发和部署应用程序。
路由传参：简单的页面跳转是无法满足用户需求的，在进行页面跳转的时候经常需要传递一些参数，并在新的页面接受参数。例如点击某个商品进入商品详情页，此时需要传递当前被点击商品的id到商品的详情页以便获取商品的详情数据。
使用组件和指令完成登录页面
在课程的最后，通过学习Vue.js，我不仅掌握了前端开发的基础知识，还学会了如何使用一些有用的工具和库来构建更强大和灵活的应用程序。我意识到Vue.js是一个非常强大和灵活的框架，它可以帮助我们创建高质量的Web应用程序。在学习过程中，我也学会了如何处理异步数据和事件等复杂问题，并掌握了一些有用的技巧和方法。
