框架：
框架结构，把很多基础功能已经实现（封装了）。
框架：在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率。
举例：操作页面
现在：点击按钮，触发事件，获得要操作的标签，对标签进行操作。
框架：操作网页时，程序员只关注操作的内容即可，对标签的内容更新操作，都由框架完成。
前端框架：
JavaScript是原生的。
vue.js 是一个js框架，不是代替js的，是对js进行封装。
优点:
体积小
效率高
双向数据绑定：
M V VM
生态丰富，学习成本低（花费时间少点）
UI框架：将前端常用的一些组件（表单，按钮，消息提示）进行封装；对html和css进行封装。
后端java框架：
mybatis--jdbc
spring···
部分VUE指令
v-show&&v-if和v-else
v-show="布尔值" true-显示，false-隐藏 控制标签的display属性，显示和隐藏标签，效率高 v-if="布尔值" true-显示，false-隐藏 会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script><style>img{width: 100px;height: 100px;}</style></head><body><!-- v-show="布尔值" true-显示，false-隐藏 控制标签的display属性，显示和隐藏标签，效率高v-if="布尔值" true-显示，false-隐藏 会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合，--><div id="app"><img v-show="isShow" src="img/1.jpg"/><img v-show="age<18" src="img/2.jpg"/><img v-if="isShow" src="img/3.jpg"/><img v-if="age<18" src="img/4.jpg"/><img v-else src="img/5.jpg"/><input type="button" value="切换" @click="qh()"></div><script>var app = new Vue({el: '#app', data: {isShow:true,age:15},methods:{qh(){this.isShow=!this.isShow;this.age=19;}}})</script></body>
</html>v-users
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script></head><body><div id="uid"><li></li></div><script>var users=[{name:"jim",age:20,gender:"男"},{name:"lih",age:21,gender:"女"},{name:"xm",age:22,gender:"男"}]var uobj =document.getElementById("uid");var s="";for(var i=0;i<users.length;i++){s+="<li>姓名:"+users[i].name+",年龄:"+users[i].age+",性别:"+users[i].gender+"</li>"}uobj.innerHTML=s;</script></body>
</html>v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script></head><body><div id="app"><li v-for="usr in users">姓名:{{usr.name}}年龄:{{usr.age}}性别:{{usr.gender}}</li></div><script>var app = new Vue({el: '#app', data: {//数组，模拟从后端响应回来的数据users:[{name:"jim",age:20,gender:"男"},{name:"lih",age:21,gender:"女"},{name:"xm",age:22,gender:"男"}]},methods:{}})</script></body>
</html>VUE-CLI(脚手架)
vue-cli官方提供的脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，使得开发更加的快速；
主要的功能 ：
统一的目录结构，本地调试，热部署，单元测试，集成打包上线
需要的环境：
Node.js(前段js的一个运行环境)
npm:
使用HbuilderX 搭建vue-cli项目步骤：
一、创建一个vue-cli默认项目或者vue3-cli默认项目，学习前期建议使用vue-cli默认项目创建后会进行下载，需要等待一段时间
二、通过npm i vue-router@3.5.3命令在命令窗口安装vue-router插件包
三、创建Router目录，并在其中创建index.js文件，并在其中配置路由，导入路由和其他组件
四、在Vue.use(router)后定义组件路由，最后在导出路由。
五、使用路由
六、在main.js中配置路由。
七、运行项目
搭建Node.js环境：
一、下载Node.js
二、解压后
选好要安装的文件位置
![[AIGC][Dify开发]添加并实现新的模型](http://pic.xiahunao.cn/nshx/[AIGC][Dify开发]添加并实现新的模型)
