javascript - 在 vue.js 中，每次都声明“var ~ = new vue”？

Question

vue.js 中的新功能并尝试制作简单的网页但只是想知道我做得对吗？

这是我的代码

<div class="title">{{ page_title }}</div>
<div class="name">{{ username }}</div>
<div class="date">{{ date }}</div>

var title = new Vue ({
  el: '.title',
  data : {
     page_title :'This is title'
   }
})


var name = new Vue ({
  el: '.name',
  data : {
     username :'This is your name'
   }
})

var date = new Vue ({
  el: '.date',
  data : {
     Date :'Todays date'
   }
})

我每次都必须声明“var ~ = new vue”吗？或者有什么方法可以让更简单？

标签： javascriptvue.jsvuejs2

Answer 1

当然，您可以创建任意数量的 vue 实例，它们非常轻量级，更多的是管理您的代码并将其拆分为可重用的块。

只需将 Li357 的注释放入代码中：

Vue.component('page', {
  template: `
  <div>
    <div class="title">{{ page_title }}</div>
    <div class="name">{{ username }}</div>
    <div class="date">{{ date }}</div>
  </div>`,
  props: ["title"],
  data() {
    return {
      page_title: 'This is ' + this.title,
      username: 'This is your name',
      date: 'Todays date'
    };
  }
});

new Vue({
  template: `
  <div>
  <h1>This is my app</h1>
  <page title="TITLE!" />
  </div>`,
  el: '.my-app',
})

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="my-app"></div>

虽然我确实可以将日期或用户名元素想象为可重用的组件，但如果您只是显示一个值而仅此而已，那么我不会打扰。