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>Document</title>
</head>
<body>
<div id="app"><!--Vue的容器-->
<h1>{{msg}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script><!--用js的方式引入Vue-->
<script>
//Vue.createApp({})创建vue3的实例 vue2是new Vue({})
Vue.createApp({
data(){
return {
msg:"hello world"
}
}
}).mount("#app")//mount挂载dom节点
</script>
</body>
</html>
1.如何操作文本：v-text
<!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">
<!--指令：vue提供的一些特殊的属性v-开头-->
<h1 v-text="msg"></h1><!--跟<h1>{{msg}}</h1>效果一样-->
<!--v-text这个指令让h1标签绑定msg这个变量的文本-->
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//选项api（option api）
data(){
return {
msg:"hello world"
}
}
}).mount("#app")
</script>
</body>
</html>
2.如何操作属性：v-bind
将鼠标悬浮在hello world上就显示hello vue3的小框
现在要让title显示Vue里面的数据
<!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">
<!--v-bind是绑定属性的意思，:后面是属性-->
<h1 v-bind:title="tit" v-text="msg"></h1><!--将tit这个变量通过v-bind绑定到h1标签的title属性上-->
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg:"hello world",
tit:"hello vue"
}
}
}).mount("#app")
</script>
</body>
</html>
3.如何绑定事件：v-on
<!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">
<h1
v-bind:title="tit"
v-text="msg"
v-on:click="showData"
><!--v-on绑定事件，showData是个函数-->
</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
msg:"hello world",
tit:"hello vue"
}
},
methods:{//click事件的函数
showData(){
alert("hello vue3");
}
}
}).mount("#app")
</script>
</body>
</html>
实现计数器功能
<!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">
<button @click="decrease">-</button><!--v-on:click简写成@click-->
<span>{{number}}</span>
<button @click="increase">+</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data(){
return {
number:0
}
},
methods:{
decrease(){
if(this.number > 0){
this.number--;
}
},
increase(){
this.number++;
}
}
}).mount("#app")
</script>
</body>
</html>
