编写 Vue.js 单页模板需要按照以下步骤进行:
创建一个基本的 HTML 页面,并引入 Vue.js 的 CDN。 例如:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app">
<!-- Your app content goes here -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="app.js"></script>
</body>
</html>
创建一个新的 JavaScript 文件(例如,),并在其中创建一个 Vue 实例。 例如:app.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello, world!'
},
methods: {
greet: function () {
alert(this.message)
}
}
})
在 HTML 页面中添加 Vue 模板代码。 例如:
<div id="app">
<p>{{ message }}</p>
<button v-on:click="greet">Say Hi</button>
</div>
这里的 将会被替换为 Vue 实例中定义的 数据属性的值,而 将会绑定到 Vue 实例中定义的 方法上。{{ message }}messagev-on:click="greet"greet
运行应用程序,查看效果。
以上是编写 Vue.js 单页模板的基本步骤。 当然,实际开发过程中还有很多其他的内容需要考虑,例如使用路由、组件和状态管理库等等。