目前比较流行vue,所以要学习一下vue3的应用,大家一起吧!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="hello-vue">
{{ message }}
</div>
<script>
const HelloVueApp = {
//data是一个函数,所以要注意写return
data() {
return {
message: 'Hello Vue!!'
}
}
}
//找到要使用的根组件(HelloVueApp,再去指定要使用的DOM元素
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
<div id="app">{{ count }}</div>
<script type="text/javascript">
const app = Vue.createApp({
data(){
return{
count: 4
}
}
})
const vm = app.mount("#app");//div的innerhtml的值和下方一样会被改变
//两种写法
document.write(vm.count +"<br>")//=>4
document.write(vm.$data.count + "<br>")//=>4
//两种修改方式
vm.count = 5 // 修改上面data函数中count的值
document.write(vm.count + "<br/>");//=>5
document.write(vm.$data.count + "<br/>");//=>5
vm.$data.count = 6;
document.write(vm.count + "<br/>");//=>6
document.write(vm.$data.count);//=>6
</script>
<div id="ap">
</div>
<script type="text/javascript">
const t = Vue.createApp({
data(){
return{
index: 1
}
},
methods:{
increase(){
this.index++
}
}
})
const tt = t.mount("#ap");
document.write(tt.index + "<br/>");
tt.increase();
document.write(tt.index);
</script>
</body>
</html>