如何直接在html中使用vue,就是说不做工程化
以下再一个html
<div id="app">
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<el-button type="primary" @click="handleClick">点击</el-button>
<p>{{message}}</p>
</div>
以下代码保存到html文件中,直接执行应该就是你要的了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue2+ElementUI Demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
<el-button type="primary" @click="handleClick">点击</el-button>
<p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: '',
message: ''
},
methods: {
handleClick() {
this.message = '你输入的内容是:' + this.inputValue
}
}
})
</script>
</body>
</html>