如何在HTML当中使用vue+element
warning:
这篇文章距离上次修改已过432天，其中的内容可能已经有所变动。
要在HTML中使用Vue和Element UI，首先需要引入Vue库和Element UI库的CSS和JavaScript文件。以下是一个基本的HTML模板，展示了如何集成Vue和Element UI：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue + Element UI Example</title>
<!-- 引入Vue.js -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Element UI JavaScript 库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 使用Element UI组件 -->
<el-button @click="handleClick">点击我</el-button>
</div>
<script>
new Vue({
el: '#app',
methods: {
handleClick() {
alert('按钮被点击');
}
}
});
</script>
</body>
</html>在这个例子中，我们通过script标签引入了Vue.js和Element UI。然后在Vue实例中，我们可以使用Element UI提供的组件，如<el-button>。点击按钮时，会触发一个简单的警告框。
评论已关闭