Vue基本代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gamacode.com</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1> //{{ 数据调用 }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> //引入vue
<script>
let app = new Vue({ //申明对象
el : '#app', //指定div使得Vue对象对其有效
data : { //数据
message : 'Hello World'
}
});
</script>
</body>
</html>
Vue双向数据绑定:
- model数据
- view视图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gamacode.com</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="message"> //v-model绑定数据键名
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app = new Vue({
el : '#app',
data : {
message : 'Hello World'
}
});
</script>
</body>
</html>