Original: Vuejs implements a new method for single-file components with styles

The code is as follows:

Example.html

1<ScriptSrc= "Vue.js"></Script>2<DivId= "Example">3<H3>vue component<H3>4<Counter></Counter>5<Counter></Counter>6</Div>7Introducing Component Mycomp.js8<script src= "Mycomp.js" Span style= "COLOR: #0000ff" >></script> 9 <script>10 new Vue ({ Span style= "COLOR: #008080" >11  el:  " #example " 12 }) Span style= "COLOR: #008080" >13 </script>              

Mycomp.js

1//The Heredoc method outputs the component code in the comment2functionHeredoc (FN) {3Return fn.tostring (). Match (/[^]*\/\* ([^]*) \*\/\}$/) [1];4}5//Output Component Code6 document.write (Heredoc (function(){7/*8<style>9. my {color:red;padding:10px;}10</style>1112<script type= "Text/x-template" id= "C" >13<p class= "My" v-on:click= "Todo+=1" >14{{TODO}}15</p>16</script>17 18 <script>19 vue.component (' counter ', {20 Span style= "COLOR: #008000" > template: "#c", 21  data: function () {22  return {23 Span style= "COLOR: #008000" > Todo:124 }25 }26 }) 27 </script>28 */})             

Operation Result:

The Vue single file component is implemented as a simple JS file, with the advantages of a style, simple usage, and proximity to the. Vue file,

No Webpack, no AJAX requests, direct introduction to use!

Original: Vuejs implements a new method for single-file components with styles