我如何从 vue 内部到 vue 外部使用属性

Question

我正在使用 vue2.5。我只是想让一个 vue 之外的变量（传统的 javascript 或 jquery）从 vue 模型访问一个属性。本例中的属性是太阳。我希望将在太阳中找到的数据显示在 Const 星球中。我怎样才能做到这一点？我尝试使用 const planet = $app.sun 但这不起作用。不确定如何进行这项工作。请看我的例子

const planet=""
//document.getElementById("cat").append("myName");

new Vue({
  el: "#app",
  data: {
   earth:"this is a ball",
    sun:"s",

  },
  methods: {
    toggle: function(){
   this.sun="a ball of stars"


    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

{{sun}}
<br>
<button v-on:click="toggle()">magic

</button>
<div id="planet">
</div>
</div>

Answer 1

可以在变量中设置Vue然后访问$data:

var vm = new Vue({
  el: "#app",
  data: {
     earth:"this is a ball",
     sun:"s"
  },
  methods: {
    toggle: function(){
      this.sun="a ball of stars"
    }
  }
})
const planet = vm.$data.sun
document.getElementById("cat").append(planet);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{sun}}
  <br>
  <button v-on:click="toggle()">magic</button>
  <div id="planet">
  </div>
</div>
<p>outside of Vue</p>
<div id="cat"></div>

我如何从 vue 内部到 vue 外部使用属性

how do i use property from within vue- to outside of vue

javascript

vue.js

vuejs2

我如何从 vue 内部到 vue 外部使用 属性

how do i use property from within vue- to outside of vue

javascript

vue.js

vuejs2

我如何从 vue 内部到 vue 外部使用属性