使用JS调用Vue.js的过程中,首先需要在HTML文件中引入Vue.js的js文件。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
接着,需要在JS文件中定义一个Vue实例。在定义Vue实例时,需要传入一个包含可观察属性和相关方法的JavaScript对象。
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { showMessage: function () { alert(this.message) } } })
在上面的代码中,el属性指定了Vue实例所挂载的DOM元素的选择器(这里是#app),data属性指定了可观察属性,methods属性指定了方法。
最后,可以在HTML中使用Vue实例的数据和方法。例如,在上面的Vue实例中,可以通过双花括号绑定数据:
<div id="app"> {{ message }} </div>
也可以通过v-on指令调用Vue实例的方法:
<button v-on:click="showMessage">Click Me</button>
上述代码定义了一个按钮元素,当用户点击按钮时,会调用Vue实例的showMessage方法。