在Vue.js中，有沒有一種方法可以避免使用JavaScript字符串的組件模板？

Question

我只是通過引導工作的Vue.js的網站，我有有關組件模板的不好的感覺。我覺得很奇怪，他們是用字符串指定的;當然，也許這工作很短的模板，但是一旦你到多模板，你需要開始逃避你的新線，只是感覺錯誤有在JavaScript字符串與開始HTML。更不用說在JS字符串中，語法突出顯示或任何其他漂亮的IDE功能對HTML都沒有用處。

在文檔中詳細說明的兩種替代方法是使用inline templates或X-templates，但這兩個選項都不鼓勵。

的唯一的選擇似乎是Single File Components，這似乎是一個不錯的選擇，但他們都在高級節和文檔，這是說，對於中小型應用，只需使用Vue.component應足夠。此外，單個文件組件看起來更難以集成到項目中，需要使用項目的構建系統（文檔討論Webpack和Browserify）。

所以我很困惑。我是否需要接受我的組件代碼將看起來像這個例子一樣混亂，直接從文檔中拉出來？

Vue.component('currency-input', { 
    template: '\ 
    <span>\ 
     $\ 
     <input\ 
     ref="input"\ 
     v-bind:value="value"\ 
     v-on:input="updateValue($event.target.value)"\ 
     >\ 
    </span>\ 
    ', 
...... 

Answer 1

既然你正在開始一個新的項目，你可以使用vue-hackernews-2.0爲樣板，在那裏你已經看到很多組件用devpack和prod env的webpack集成進行編碼。這也是由核心vue團隊開發的，推薦使用official docs。

你可以看到有different files爲每個組件和一個組件看起來像下面有HTML，JS和CSS部分的清晰的分離：

<template> 
    <li v-if="comment" class="comment"> 
    <div class="by"> 
     <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link> 
     {{ comment.time | timeAgo }} ago 
    </div> 
    <div class="text" v-html="comment.text"></div> 
    <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length"> 
     <a @click="open = !open">{{ 
     open 
      ? '[-]' 
      : '[+] ' + pluralize(comment.kids.length) + ' collapsed' 
     }}</a> 
    </div> 
    <ul class="comment-children" v-show="open"> 
     <comment v-for="id in comment.kids" :id="id"></comment> 
    </ul> 
    </li> 
</template> 

<script> 
export default { 
    name: 'comment', 
    props: ['id'], 
    data() { 
    return { 
     open: true 
    } 
    }, 
    computed: { 
    comment() { 
     return this.$store.state.items[this.id] 
    } 
    }, 
    methods: { 
    pluralize: n => n + (n === 1 ? ' reply' : ' replies') 
    } 
} 
</script> 

<style lang="stylus"> 
.comment-children 
    .comment-children 
    margin-left 1.5em 
.comment 
    border-top 1px solid #eee 
    position relative 
    .by, .text, .toggle 
    font-size .9em 
    margin 1em 0 
    .by 
    color #999 
    a 
     color #999 
     text-decoration underline 
    .text 
    overflow-wrap break-word 
    a:hover 
     color #ff6600 
    pre 
     white-space pre-wrap 
    .toggle 
    background-color #fffbf2 
    padding .3em .5em 
    border-radius 4px 
    a 
     color #999 
     cursor pointer 
    &.open 
     padding 0 
     background-color transparent 
     margin-bottom -0.5em 
</style> 

這裏使用的WebPack的構建，並增加了工作config以及我我自己正在生產中使用，沒有任何問題。

Answer 2

您可以使用<template>...</template>或<script type="text/x-template">...</script>，並在template屬性用於指定選擇。

<template id="myComponent"> 
    <div> 
    <h1>Hello!</h1> 
    <p><slot></slot></p> 
    </div> 
</template> 


Vue.component('myComponent', { 
    template: '#myComponent' 
}) 

簡單的工作在這裏例如：http://codepen.io/anon/pen/dNWrZG?editors=1010

而且，單個文件組件的構建過程並不難。您可以檢查webpack-simple模板：https://github.com/vuejs-templates/webpack-simple，在vue-loader會爲你做的一切。

一旦你感到舒服的WebPack，你可以看看完整的WebPack模板：https://github.com/vuejs-templates/webpack

Answer 3

從我的經驗來看，如果模板非常短，可以使用內嵌模式即可。如果沒有，X-模板也可以讓你擺脫逃脫換行符。我不明白你爲什麼認爲這些方法是不鼓勵的。你能提供更多信息嗎？

但是，如果你堅持要嵌入長模板內聯，你仍然可以做，沒有逃脫。答案是ES6 template literals - 字符串中``包裹：

template: ` 
    <span> 
    $ 
    <input 
     ref="input" 
     v-bind:value="value" 
     v-on:input="updateValue($event.target.value)" 
    > 
    </span> 
`, 

在另一方面，我真的覺得VUE-CLI是一個偉大的工具。 Webpack是值得學習的東西。

Answer 4

這是不是一個真正的直接的答案（它的編輯具體的），但我只是想我應該分享，但如果你使用Visual Studio代碼爲你的編輯器，然後你就可以保持你的模板作爲你的組件的一部分，並且仍然獲取語​​法突出顯示。

感謝這真棒擴展 angular-2-inline

它本來預定角2，但它適用於所有ES6模板字符串（提供的模板字符串的關鍵是「模板」）。

單個文件組件是推薦的方式，但是當您不構建完整的SPA並且您只是使用Vue來增強某些HTML模板時，它們可能會成爲一種負擔，而且您不需要想要參與Webpack。

不相信嗎？我目前正在使用它。