Vue2 基于 CDN 的快速开发
<body>
<!-- 1. 提供容器 -->
<div id="app">
<h1>{{ message }}</h1>
<button @click="show('ABC')">点击我弹出信息</button>
</div>
</body>
<!-- 2. 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 3. 实例化 Vue 对象
new Vue({
// 4. 绑定容器
el: '#app',
// 5. 数据源
data: {
message: '页面加载于 ' + new Date().toLocaleString()
},
// 6. 方法
methods: {
show(data) {
alert('Hello, ' + data)
}
}
})
</script>
<style type="text/css">
h1 {
color: red;
}
</style>