简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
//通过cdn引人
<script src="https://unpkg.com/vue@next"></script>
//通过本地代码引人
<!-- <script src="../js/vue.js"></script> -->
<script>
// const qqq = {
// template: '<h2>hello world</h2>'
// }
//通过createApp方法创建一个vue实例，createApp方法中可以传入一个对象，此对象包含多个属性如data，methods
// const app = Vue.createApp(qqq);
//将创建的实例挂载到一个具体的元素上
// app.mount("#app")
//使用链式编程的方法
Vue.createApp({
template: '<h2>hello world</h2>'
}).mount("#app")
</script>
</body>
</html>
会在浏览器上显示：hello world
计数器的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器的使用</title>
</head>
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<template id="qqq">
<div>{{num}}</div>
<button @click=addNum>+1</button>
<button @click=subNum>-1</button>
</template>
<script>
Vue.createApp({
template: '#qqq',
data: function () {
return {
num: 10
}
},
methods: {
addNum() {
this.num++;
},
subNum() {
this.num++;
}
}
}).mount('#app');
</script>
</body>
</html>
此计数器的整个过程就相当于是vue的一般使用了
网友评论