前提・実現したいこと
vueを利用してSPAサイトを作成しています。
今回HTML+CSSの担当がvueなど一切わからないメンバーが多いため、完全にhtml部分を分離し、vueの要素を最小限にしたいと考えています。
最小限とは、変数{{}}や、if, forなどは使うということです。
なお、余談としては、<script>周辺を触れさせたくないというモチベーションもあります。
そこで、htmlとjs部分を完全分離する方法を教えていただきたく投稿します。
// vueを習得すべき!!という指摘はごもっともなのですが。
現在考えている形
以下が現状です。
<body onload="initial();">
で読み込むなど無駄が多すぎるなと考えており、合否だけでも指摘いただけると嬉しいです。
Codepen
javascript
1function initial() { 2 new Vue({ 3 el: "#content", 4 data: { 5 message: "固有のメッセージが表示されます", 6 categories: [] 7 }, 8 created() { 9 this.categories = this.doGet(); 10 }, 11 methods: { 12 doGet: function() { 13 return [ 14 { 15 code:"T001", 16 name:"カテゴリ1", 17 articles: [ 18 { 19 code:"S011", 20 name:"記事11", 21 }, 22 { 23 code:"S012", 24 name:"記事12", 25 } 26 ] 27 }, 28 { 29 code:"T002", 30 name:"カテゴリ2", 31 articles: [ 32 { 33 code:"S021", 34 name:"記事21", 35 }, 36 { 37 code:"S022", 38 name:"記事22", 39 } 40 ] 41 }, 42 ]; 43 } 44 } 45 }); 46}
html
1<html> 2 3<head> 4 <title>VueTry</title> 5 <meta charset="UTF-8"> 6 <!-- ここにVueと固有のjs、CSSなどをIncludeする --> 7</head> 8 9<body onload="initial();"> 10 <h1>HTMLとjs(vue)を完全に切り離したい</h1> 11 <div id="content"> 12 <p>{{ message }}</p> 13 <ul> 14 <li v-for="category in categories"> 15 {{ category.code }}: {{ category.name }} 16 <ul> 17 <li v-for="article in category.articles"> 18 {{ article.code }}: {{ article.name }} 19 </li> 20 </ul> 21 </li> 22 </ul> 23 </div> 24</body> 25 26</html>
brower
1HTMLとjs(vue)を完全に切り離したい 2固有のメッセージが表示されます 3 4T001: カテゴリ1 5S011: 記事11 6S012: 記事12 7T002: カテゴリ2 8S021: 記事21 9S022: 記事22
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。