Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
更新時(shí)間：2017年05月02日 09:27:18 作者：卡先森
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vuejs實(shí)現(xiàn)單文件組件的方法，供大家參考，具體內(nèi)容如下
代碼如下:
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>
*/}))
運(yùn)行結(jié)果:
以簡(jiǎn)單的js文件形式實(shí)現(xiàn)了Vue單文件組件, 優(yōu)點(diǎn)是帶樣式, 用法簡(jiǎn)單, 接近于.vue文件,
不用webpack, 不用發(fā)ajax請(qǐng)求, 直接引入使用 !
相關(guān)文章
這篇文章主要介紹了詳解如何在Vue里建立長(zhǎng)按指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本篇文章主要介紹了詳解vue嵌套路由-params傳遞參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Vue新手指南之創(chuàng)建第一個(gè)vue-cli腳手架程序
vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個(gè)vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue?element如何添加遮罩層問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細(xì)，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Vue Router中應(yīng)用中間件的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue router,感興趣的朋友可以了解下2020-08-08
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問(wèn)題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問(wèn)題,需要的朋友可以參考下2018-04-04
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue?+?element-ui?背景圖片設(shè)置方式
這篇文章主要介紹了Vue?+?element-ui?背景圖片設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08