Vuejs实现带样式的单文件组件新方法
更新时间：2017年05月02日 09:27:18 作者：卡先森
这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vuejs实现单文件组件的方法，供大家参考，具体内容如下
代码如下:
example.html
<script src="vue.js"></script>
<div id="example">
<h3>Vue component<h3>
<counter></counter>
<counter></counter>
</div>
//引入组件mycomp.js
<script src="mycomp.js"></script>
<script>
new Vue({
el: '#example'
})
</script>
mycomp.js
//heredoc方法输出注释中的组件代码
function heredoc(fn){
return fn.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
}
//输出组件代码
document.write(heredoc(function(){
/*
<style>
.my {color:red;padding:10px;}
</style>
<script type="text/x-template" id="c">
<p class="my" v-on:click="todo+=1">
{{todo}}
</p>
</script>
<script>
Vue.component('counter',{
template: "#c",
data: function () {
return {
todo: 1
}
}
})
</script>
*/}))
运行结果:
以简单的js文件形式实现了Vue单文件组件, 优点是带样式, 用法简单, 接近于.vue文件,
不用webpack, 不用发ajax请求, 直接引入使用 !
相关文章
这篇文章主要介绍了Vue项目导入导出文件功能以及导出文件后乱码问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
$once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除,下面这篇文章主要给大家介绍了关于Vue中$once的两个实用小技巧,需要的朋友可以参考下2022-04-04
我们在做项目经常会遇到多级导航这个需求,所以下面这篇文章主要给大家介绍了关于vue实现四级导航及验证码的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下2023-03-03
本篇文章主要介绍了vue-router history模式下的微信分享小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue开发Html5微信公众号的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了Vue3.0在组件外使用VueI18n的情况，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论