1.vue3特性
vue的引入方式
- cdn引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>哈哈哈</h2>
<p>我是内容，呵呵呵</p>
<div id="app"></div>
<!-- cdn引入 -->
<script src="https://unpkg.com/vue@next"></script>
<script>
// 使用Vue
const app = Vue.createApp({
template:`<h2>Hello World</h2><span>呵呵呵</span>`
})
// 挂载
app.mount("#app");
</script>
</body>
</html>
- 本地引入
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
var app = Vue.createApp({
template:'<h1>哈哈哈</h1>'
})
app.mount("#app")
</script>
</body>
</html>
数据展示
- 字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:'<h2>{{message}}</h2>',
data:function(){
return {
title:"hello world",
message:'你好，vue3'
}
}
})
app.mount("#app")
</script>
</body>
</html>
- 列表数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
`,
data:function(){
return {
message:"你好啊，李银河",
movies:['大话西游','星际穿越']
}
}
})
app.mount("#app")
</script>
</body>
</html>
- 计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h2>当前计数器：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
`,
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++
},
decrement:function(){
this.counter--
}
}
})
app.mount("#app")
</script>
</body>
</html>
- 计数器（重构）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数器：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++
},
decrement:function(){
this.counter--
}
}
})
app.mount("#app")
</script>
</body>
</html>
- 原生dom计数器实现(命令式编程实现）
vue是声明式编程思想，原生是命令式编程思想。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 命令式编程和声明式编程 -->
<h2>当前计数：<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
// 获取dom
const h2El = document.querySelector("h2")
const counterEl = document.querySelector(".counter")
const addBtnEl = document.querySelector(".add")
const subBtnEl = document.querySelector('.sub')
// 2.定义一个变量记录数据
let counter = 10
counterEl.textContent = counter
// 2.监听按钮的点击
addBtnEl.onclick = function(){
counter++
counterEl.textContent = counter
}
subBtnEl.onclick = function(){
counter--
counterEl.textContent = counter
}
</script>
</body>
</html>
- options选项-data属性选项的详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="changeMessage">改变message的值</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data(){
return {
message:"hello"
}
},
methods:{
changeMessage:function(){
this.message = "你好，世界";
}
}
})
app.mount("#app")
</script>
</body>
</html>
- options_method属性选项
注意method中方法不可以使用箭头函数
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data:function(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++;
},
// es6写法
increment(){
},
// es6的箭头函数
increment:()=>{
},
decrement:function(){
this.counter--;
}
}
})
app.mount("#app")
</script>
</body>
</html>
VsCode生成代码片段
- 第一步，复制自己要生产的代码；
- 第二部，https://snippet-generator.app/在该网站中生成代码片段；
- 第三步，在VsCode中配置代码片段；设置-》首选项-》配置用户代码片段
