Html + Jquery + Vue前端学习笔记
<!DOCTYPE html>
<html>
<head>
<title>Vue学习示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button @click="reverseMessage">反转消息</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
}
}
});
</script>
</body>
</html>这个示例展示了如何在一个基本的HTML页面中嵌入Vue.js，并创建一个Vue实例来处理页面上的数据和事件。当用户点击按钮时，reverseMessage 方法会被调用，这会反转message数据属性中的字符串，并更新页面上显示的文本。这是学习Vue.js的一个简单入门示例。
评论已关闭