在Vue.js中,有没有办法让组件模板不受JavaScript字符串的影响？

Question

我刚刚通过Vue.js网站上的指南,我对组件模板感觉不好.我觉得他们用字符串指定是很奇怪的; 当然,也许这适用于非常短的模板,但是一旦你进入多行模板,你需要开始转义你的新行,并且在javascript字符串中开始使用html 感觉不对.更不用说语法高亮或任何其他好的IDE功能对JS字符串中的HTML都没用.

文档中详述的两个备选方案是使用内联模板或X模板,但不建议使用这两个选项.

唯一的另一种选择似乎是单文件组件,这似乎是一个不错的选择,但它们在高级部分和文档中,据说对于中小型应用程序,只需使用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作为样板,在那里您可以看到许多组件已经使用webpack集成编码,用于dev和prod env.这也是由核心vue团队开发并在官方文档中推荐的.

您可以看到每个组件都有不同的文件,一个组件看起来像是清楚地分离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进行构建并添加工作配置,我自己在生产中使用它没有任何问题.

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