脚本宝典收集整理的这篇文章主要介绍了Vue组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件可以扩展 HTML
元素,封装可重用的代码。
vue.js的核心组件:
v-on
指令将用户输入事件和组件方法进行绑定。created
、attached
、destroyed
等。在这些钩子函数中,我们可以封装一些自定义的逻辑。和传统的MVC相比,这可以理解为Controller
的逻辑被分散到了这些钩子函数中。Vue.js的核心库只提供基本的API,本身在如何组织应用的文件结构上并不做太多约束。但在构建大型应用时,推荐使用 Webpack+vue-loader
这个组合以使针对组件的开发更高效。
Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件,同时支持CommonJS和AMD格式。但让它与众不同的是,它提供了强大的loader API来定义对不同文件格式的预处理逻辑,从而让我们可以将CSS、模板,甚至是自定义的文件格式当做JavaScript模块来使用。Webpack 基于loader还可以实现大量高级功能,比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等,可以说是目前前端构建领域最有竞争力的解决方案之一。
Vue.js还有几个值得一提的特性:
watcher
会被推送到一个队列中,并且每个watcher
只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。Transition
或Animation
效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的 props
选项。
子组件要显式地用 props
选项声明它期待获得的数据。
Vue.component({
props: ['message'],
template: '<span>{{message}}</span>'
});
Vue 中子组件可以通过通过事件和父组件进行通信的。向父组件发消息是通过 this.$dispatch
,而向子组件发送消息是通过 this.$boardcast
。
Vue 把双向绑定称作 reactive,可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter
和 setter
方法实现的,所以不支持 IE8 及以下浏览器,这种实现方式有两个容易犯错的地方:
vm.$set(“name”, value)
的方式来添加。data.a
是一个对象,那么 data.a.b = 1
这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。Vue 对DOM的更新是异步的! 这个异步是在一个异步队列中进行的,不过这个异步队列会在当前的 Event Loop
中执行完,所以如果修改了 Data 立刻去DOM中做查询操作是不对的,这个时候DOM还没有更新,正确的做法是这样做:
vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
或者这样:
vm.$nextTick(function () {
this.$el.textContent === 'new message' // true
})
以上是脚本宝典为你收集整理的Vue组件全部内容,希望文章能够帮你解决Vue组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。