<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 2.0 实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>{{ greeting }}</h1>
<input v-model="userInput" placeholder="Type something...">
<p>{{ reversedMessage }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
// 创建一个 Vue 实例
var app = new Vue({
el: '#app', // 指定要管理的 DOM 元素
data: {
greeting: 'Hello, Vue!',
userInput: ''
},
computed: {
reversedMessage: function () {
// 使用计算属性反转用户输入的消息
return this.userInput.split('').reverse().join('');
}
},
methods: {
reverseMessage: function () {
// 通过方法反转消息
this.greeting = this.greeting.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
在这个例子中：
- {{ greeting }} 是一个数据绑定的例子，显示了 greeting 数据的值。
- v-model="userInput" 实现了双向数据绑定，将用户输入与 Vue 实例中的 userInput 数据关联起来。
- {{ reversedMessage }} 是一个计算属性的例子，用于反转用户输入的消息。
- v-on:click="reverseMessage" 使用了事件处理，当按钮被点击时，调用 reverseMessage 方法来反转消息。
打开浏览器，你将看到一个简单的页面，可以在输入框中输入文本，点击按钮后会反转文本并更新显示。这个例子演示了 Vue.js 中基本的数据绑定、计算属性和事件处理的使用。
转载请注明出处：http://www.zyzy.cn/article/detail/4796/Vue