框架:
框架结构,把很多基础功能已经实现(封装了)。
框架:在基础语言之上,对各种基础功能进行封装,方便开发者,提高开发效率。
举例:操作页面
现在:点击按钮,触发事件,获得要操作的标签,对标签进行操作。
框架:操作网页时,程序员只关注操作的内容即可,对标签的内容更新操作,都由框架完成。
前端框架:
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
二、解压后
![](https://i-blog.csdnimg.cn/direct/b55e0512ece84d68b93e5289da0c930d.png)
选好要安装的文件位置
![](https://i-blog.csdnimg.cn/direct/4c214064a4f740a5840f21dd8582836d.png)
![](https://i-blog.csdnimg.cn/direct/c318e8ec06e24259bf2aaec631da8b3d.png)
![](https://i-blog.csdnimg.cn/direct/1b1602f796ca43668c5db2b6e1f32c21.png)
![](https://i-blog.csdnimg.cn/direct/014d36bd99a54dcd8f9988649785fae6.png)