TongSir的Vue3的学习笔记（一）Vue3之初体验
博主得跟得上时代的潮流 赶紧恶补一下Vue3
Vue3目前是国内前端框架的大趋势
所以接下来都是博主自己的学习笔记啦
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>首先来进行vue的cdn引入
第一种
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const why ={
template: '<h2>Hello TongSir，这是你的第一个Vue3学习页面</h2>'
}
const app = Vue.createApp(why);
app.mount("#app")
</script>
</body>
</html>第二种
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp(
{
template:'<h2>Hello TongSir，这是你的第一个Vue3学习页面</h2>'
}
).mount("#app")
</script>
</body>
</html>两段代码实现的效果都如下
接下来 用原生JavaScript 和vue3分别实现一下简单的计数器的功能
首先用原生的JavaScript来实现 代码如下
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记之原生JavaScript实现计数器</title>
</head>
<body>
<h2>TongSir的Vue3学习笔记之原生JavaScript实现计数器</h2>
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
//1.获取所有的元素
const counterE1 =document.querySelector(".counter");
const incrementE1 =document.querySelector(".increment");
const decrementE1 =document.querySelector(".decrement");
//2.定义变量
let counter =0;
counterE1.innerHTML=counter;
//3.监听按钮的电机
incrementE1.addEventListener('click',() => {
counter +=1;
counterE1.innerHTML=counter;
})
decrementE1.addEventListener('click',() => {
counter -=1;
counterE1.innerHTML=counter;
})
</script>
</body>
</html>接下来用Vue3来实现效果，代码如下
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记之原生JavaScript实现计数器</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
template: `
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
`,
data: function() {
return{
message : "TongSir的Vue3学习笔记之原生JavaScript实现计数器",
counter : 0
}
},
//定义各种各样方法
methods: {
increment(){
console.log("点击了+1");
this.counter++;
},
decrement(){
console.log("点击了-1");
this.counter--;
}
},
}).mount('#app');
</script>
</body>
</html>把template模块分离出来可以这样呈现
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记之原生JavaScript实现计数器</title>
</head>
<body>
<div id="app"></div>
<script type="x-template" id="TongSir">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
document.querySelector("#TongSir")
Vue.createApp({
template: '#TongSir',
data: function() {
return{
message : "TongSir的Vue3学习笔记之原生JavaScript实现计数器",
counter : 0
}
},
//定义各种各样方法
methods: {
increment(){
console.log("点击了+1");
this.counter++;
},
decrement(){
console.log("点击了-1");
this.counter--;
}
},
}).mount('#app');
</script>
</body>
</html>还有一种写法
<!DOCTYPE html>
<html lang="zh">
<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>TongSir的Vue3学习笔记之原生JavaScript实现计数器</title>
</head>
<body>
<div id="app"></div>
<template id="TongSir">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
document.querySelector("#TongSir")
Vue.createApp({
template: '#TongSir',
data: function() {
return{
message : "TongSir的Vue3学习笔记之原生JavaScript实现计数器",
counter : 0
}
},
//定义各种各样方法
methods: {
increment(){
console.log("点击了+1");
this.counter++;
},
decrement(){
console.log("点击了-1");
this.counter--;
}
},
}).mount('#app');
</script>
</body>
</html>上面所有的代码呈现的效果 都如图下所示
空空如也！