好程序员Web前端教程分享Vue学习心得

简介:   好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

  好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。Vue+webpack也成了很多开发项目的标配。在学习的过程中也碰到了很多坑,在这里分享下自己学习的一些心得。

  Vue是组件化的,每一个部分都可以做成一个组件,但是这里就出现了一个问题,就是组件之间如果涉及到传值问题,就会比较麻烦。如果涉及到兄弟组件的传值,我们可以给Vue实例上挂载一个$bus属性

7

  之后可以通过this.$bus.$emit来推送数据,this.$bus.$on来接收数据。

  Vue本身并不鼓励使用DOM操作(并不是不能),如果你希望获取到节点,那么可以通过ref属性做到。

8

  然后可以通过this.$refs访问到所有具有ref属性的节点。

9

  如果你希望获取input的value值,你还可以通过v-model属性做到。V-model实际上实现了数据的双向绑定。把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。Vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来实现数据的双向绑定的。

  Vue本身提供了特有的计算属性computed。经常有人会分不清computed和watch。关于computed和watch的比较,computed是计算属性,会被混入到Vue实例中,计算属性具有依赖性,如果依赖的那个数值没有发生改变,那么就会执行一次,除非依赖发生改变,它才会重新开始计算。watch是观察属性,Vue将会在实例化的时候调用watch,遍历watch对面的每一个属性,当其中属性发生变化时,都会触发watch。以上两种都不能使用箭头函数来定义,因为箭头函数是绑定了父级作用域的上下文,此时的this并没有指向Vue实例。

  另外一个容易弄混的是指令v-if和v-show。两者的区别是,v-if和v-show都能够控制组件的显示和隐藏,区别在于v-show为false的时候页面加载的时候就会把组件加载进来,只是把组件的display属性设置为none而已,然后v-if为false的,组件是不会加载进来的,只有当值为true的时候才会把组件加载进来,所以实现按需加载就可以使用v-if,只是控制组件的显示隐藏就可以使用v-show。

相关文章
|
18天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
18天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
21天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
19 4
|
23天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
30天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
85 4
|
1月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
18 1
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
1月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
1月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
75 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化