用vue.js框架写一个简单的应用页面
时间: 2023-09-12 14:09:53 浏览: 67
好的,以下是一个简单的使用Vue.js框架的应用页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<input v-model="newItem" type="text">
<button v-on:click="addItem">Add Item</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Welcome to my Vue.js App!',
items: ['Item 1', 'Item 2', 'Item 3'],
newItem: ''
},
methods: {
addItem: function() {
this.items.push(this.newItem);
this.newItem = '';
}
}
});
</script>
</body>
</html>
```
这里的Vue.js实例包含一个数据对象,其中包含了一个message字符串、一个items数组和一个newItem字符串。页面中使用了Vue.js的模板语法,通过双括号{{}}绑定了message字符串和v-for指令渲染了items数组。同时还添加了一个表单,用于向items数组中添加新的元素。addItem方法通过push()方法向items数组中添加新元素,并将newItem字符串重置为空。
该页面使用了CDN链接引入Vue.js,需要注意确保网络连接正常。在实际项目中,也可以选择下载Vue.js并在本地引入。