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

为什么80%的码农都做不了架构师？>>>

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

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

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

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

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

　　如果你希望获取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。

转载于:https://my.oschina.net/530504/blog/3034787

好程序员Web前端教程分享Vue学习心得相关推荐

vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
好程序员web前端教程分享新手应该怎么学习webpack,什么是webpack?一句话概括:webpack是一个模块打包工具(module bundler).重点在于两个关键词"模块&quo ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
web 前端如何分享到instagram_好程序员web前端教程分享前端javascript练习题三
好程序员web前端教程分享前端javascript练习题三 cookie 一周内免登录样式代码: 姓名: 密码: 一周内免登陆 js功能代码: var input=document.getEleme ...
引入js_好程序员web前端教程分享js中的模块化一
好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...
好程序员web前端教程分享网页设计需要学那些东西？
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
好程序员web前端教程分享js中的模块化一
好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...

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

好程序员Web前端教程分享Vue学习心得相关推荐

最新文章

热门文章