前言
在我们开发项目的时候，避免不了要写许多页面，在原来我们就要创建许多的html文件，或许你觉得问题不大，但是在开发页面的时候，类似导航栏这种的，我们要重复使用，那我们怎么处理这种重复的数据呢，我们可以把它写成公共使用的吗？你想来想去只能在每个你创建的html和css里面再写一遍。那我们想如果能将重复的数据打包起来作为公用，在js里面进行封装很好实现。那在html中呢，我们称为组件的开发方式，那我们怎么做，传统的html不具备这个能力，而我们就要使用大佬们所写的框架了，我们拿到框架，在框架的基础上开发，你就可以实现组件化的开发，vue就是我们今天要认识的组件化的开发框架
vue创建的大佬是尤雨溪，它是美籍华裔人，在github上搜索vue,就可以找到他了。
传统开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="ul"></ul>
<button id="btn">确认</button>
<script>
let arr =['html','css','js','vue']
arr.forEach((item,i,arr)=>{
let li = document.createElement('li')
li.textContent = item
document.getElementById('ul').appendChild(li)
})
</script>
<script>
document.getElementById('btn').addEventListener('click',function(){
this.innerText='提交'
});
</script>
</body>
</html>
在上面一段代码是传统开发方式，我们假设arr是从js引入的一段数据，我们想把他放在前端，我们就要对它进行遍历，每次遍历都往ul标签里面创建一个li标签，并且将引入的数据放入li标签里面。我们想要创建一个鼠标监听就要先给btn绑定一个鼠标监听，然后写监听后的事件。
那我们利用框架该怎么做
初识vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
template:'<h2>hello world</h2>'
})
app.mount('#app')
</script>
</body>
</html>
利用框架，我们在html里只用创建一个app容器就不用再写任何html了，接下来，我们只用写js了，而且js里面会有很多封装好的方法可以使用，src="unpkg.com/vue@3/dist/…" ，这个就是vue的源代码，我们将它引入html相当于引入了vue的源代码
看这段代码里面，我们怎么做的，我们创建一个变量app，使用Vue.createApp方法，我们传一个对象进去，使用template(模板)，然后里面你就可以当html来写，以字符串的形式随便添加。我们写一个h2标签，并添加hello world,app.mount('#app')中#app表示会找到html中的id为app容器，为什么不能类名为app，因为类名可以重复，id不能重复,并将我们创建的变量app中添加进这个容器。
我们在网页上看看有没有添加到app容器里面
可以看到，我们在js中写的字符串被放入了html中，不用框架，我们也可以直接先获取app这个容器，然后创建一个h2标签，再把h2标签添加到app容器里面也可以，但是我们这是内容很少，如果有一百行，一千行，那你要创建那么多标签，然后又要添加，而在这里，我们只需要将html标签直接粘贴在这里
我们实现一个效果，创建两个点击按钮，一个点击会+1，另一个点击会-1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<template id="demo">
<div>
<h2>{{state.title}}</h2>
<h3>{{state.count}}</h3>
<button @click="decrement">-1</button>
<button @click="add">+1</button>
</div>
</template>
<script>
const { createApp, reactive } = Vue
const app = createApp({
template: "#demo",
setup(){
let state = reactive({
title:'hello world',
count: 0
})
const decrement = () => {
state.count--
}
const add = () => {
state.count++
}
return{
state,
decrement,
add
}
}
})
app.mount('#app')
</script>
</body>
</html>
因为在js里面，我们写字符串没有快捷提示，我们可以将template写在html里面，然后给他取一个id,然后我们在js部分将它引入template中，然后我们想干的操作都写在setup函数里面，我们在里面创建一个对象state,将我们想输出的内容放在里面，然后在template中直接读取就可以了，这样，我们就将我们想创建的dom都放好了。
接下来我们要让button中创建的按钮能够点击后产生相应的效果，换在之前，我们想实现这个操作，必须先将这个标签引入，然后给这个标签一个监听事件，监听事件里还要获得你想改变的dom结构，然后对它进行改变
而我们现在使用了vue框架就不需要了，你直接在想绑定的dom结构里写一个@click="xxx"
然后在setup里面创建decrement,写你要想改变的东西,最后return就行了，然后你每次点击就可以使你所写的事件发生一遍。这样你就达成了你想要的效果，可能你感觉这样和原生js也差不多，但是如果是几百个，那么你要引入几百个dom结构，而这种只需要你正常写js代码就可以了，最后因为点击事件成功了，但是页面不会重新渲染，所以我们要在所写的state对象上绑定一个reactive()，这个reactive()的作用就是可以让对象里的dom结构改变后页面都重新渲染一次。这样我们想要的效果就有了。
vue是一个js框架，将dom结构以字符串的方式读取，并解析，得到真实的 dom添加到页面上，对 dom结构的操作就变成了对数据的操作，因为变量可以声明成响应式，就再也不需要人为操作dom了。
那我们想再写一个页面，我们还需要再创建一个html文件吗，不需要了，我们只需要要使用 <template id="xxx"> 写一个代码块，再将它引入app容器就可以了
<template id="bot">
<div>BOT page</div>
</template>
const app = createApp({
template: "#bot"
})
单页应用，永远只有一个html文件，所有的页面本质上都是一个代码块，只需要切换不同的代码块来显示
但是这样我们就要写特别多的代码块，这样js部分就会很大，所有尤雨溪考虑到这一点创建了vite。
vite
vite不是框架，而是为了方便我们写js代码打造出来的工具
这是下载指令npm create vite@latest，然后按它的指令来就可以了。
下载完后在她的main.js文件里面，有四行代码，我们将第二行删掉
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
第一行就表示，我们从vue里面引入了createApp方法，第二行是将./App.vue文件作为一个对象将它引入进来，最后将这个对象所写的dom展示在app容器里面。
接下来我们只需在App.vue这个文件内写代码即可
<template>
<div>
<h2>{{state.title}}</h2>
<h3 :class="{'red': state.isActive}">{{state.count}}</h3>
<button @click="increment">-1</button>
<button>+1</button>
</div>
<ul>
<li v-for="(item, index) in state.arr">{{item}}</li>
</ul>
</template>
<script setup>
import { reactive } from 'vue'
let state = reactive({
title: 'Hello, Vue.js!',
count: 0,
isActive: false,
arr: ['html', 'css', 'js', 'vue']
})
const increment = () => {
state.count--
if (state.count < -5) {
state.isActive = true
} else {
state.isActive = false
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
<script setup>是它为了方便我们写代码，我们在js里面就不用写setup方法并且return。直接就可以写js代码了，<style scoped>表示只在这个.vue文件下有用，因为我们是当页应用，这里一个vue文件其实就是代表一个代码块，如果类名冲突就会发生错误，所有这个是让这里标签里面的东西只在这个vue文件里面有效
我们创建state对象并在这个对象中放置title属性，然后放在h2标签里面，这样我们就能在html页面看到了。我们在h3中放上state.count，然后放一个button,给一个按钮，我们点击这个-1按钮就能够使state.count进行-1的操作，然后到-5以下，就使数字变红，怎么实现呢
我们给-1按钮一个绑定事件，然后让它每点击一下，count实现-1操作，由于是state对象里面的，我们要给它一个响应式，我们从vue中引入，然后绑定在state对象中，这样就实现了-1的操作了，那怎么实现按钮变红的操作呢，我们提前写要一个red样式，然后在对象中创建一个isActive为false，然后在点击事件increment里面，我们判断count是否小于-5，如果小于-5，那么就改为true否则不变，然后将类名red动态引入h3,这样就实现了这些效果。
我们还想实现一个功能，将数组里面的属性以li标签添加到ul里面，怎么实现呢，我们直接在ul标签里面放一个li标签，然后<li v-for="(item, index) in state.arr">{{item}}</li>，使用v-for方法item表示数组的每一项，index代表每一项的下标用in引入遍历的数组，然后在h3标签里面将数组每一项放入即可
结语
通过本文的介绍，我们了解了Vue这一前端框架的基本概念和优势。Vue通过组件化的开发方式，极大地简化了前端开发过程，使得开发者能够更高效地创建和管理页面。同时，Vue还提供了响应式的数据绑定和丰富的API，使得前端开发变得更加灵活和便捷。通过Vite等工具的使用，Vue进一步提升了开发效率和代码质量。总之，Vue是一个功能强大、易于上手的前端框架，它能够帮助开发者更快速地构建出优秀的Web应用。无论是对于初学者还是资深开发者，Vue都是一个值得学习和掌握的重要工具。
