热门标签
热门文章
- 1火了一年的元宇宙消停了？展望 2022年 元宇宙的十大发展趋势_最主流的元宇宙
- 2HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 一）_arkts flengine
- 3【QT】如何检测目录或文件中的内容被修改，可以使用QFileSystemWatcher类进行检测_qt中如何判断一个文件是否有改动
- 4AI 绘画 | Stable Diffusion 提示词_ai绘画提示词
- 5paddle 预训练模型的使用_paddle加载预训练模型
- 6ICP算法进行点云匹配_rigid_transformation_estimation_ transformation_es
- 7Ubuntu 16.04 上基于已安装的 Opencv 安装 Opencv_contrib_-dopencv_extra_modules_path=
/modul - 8Ubuntu 14.04(64位)+GTX970+CUDA8.0+Tensorflow配置 （双显卡NVIDIA+Intel集成显卡） ------本内容是长时间的积累，有时间再详细整理...
- 9JS实现图片延迟加载（lazyload改编）_js 图片无线延长
- 10vscode的Bookmarks如何使用？_vscode bookmarks
当前位置: article > 正文
VUE前端框架
作者：小小林熬夜学编程 | 2024-02-28 02:06:53
赞
踩
vue前端框架
使用jQuery的复杂性问题
-
使用jQuery进行前后端分离开发，即可以实现前后端交互（ajax），又可以完成数据渲染
-
存在的问题：jQuery需要通过HTML标签拼接、DOM节点操作完成数据的显示，开发效率低且容易出错，渲染效率较低
-
vue是继jQuery之后的又一优秀的前端框架；专注于前端数据的渲染--语法简单、渲染效率高
简介
前端框架
-
前端三要素：HTML、CSS、JavaScript
-
HTML决定网页结构
-
CSS决定显示效率
-
JavaScript决定网页功能（交互、数据显示）
-
-
UI框架：
-
Bootstrap
-
amazeUI
-
Layui
-
-
JS框架：
-
jQuery(jQuery UI)
-
React
-
angular
-
node.js ---- 后端开发
-
vue集各种前端框架的优势发展而来
-
MVVM
项目结构经理的三个阶段
后端MVC我们就可以理解为单体架构，流程控制是由后端控制器来完成
前端MVC前后端分离开发，后端只负责接收响应请求
MVVM前端请求后端接口，后端返回数据，前端接收数据，并将接收的数据设置VM，HTML从vm取值
-
M model数据模型 指的是后端接口返回的数据
-
V view视图
-
VM ViewModel视图模型 数据模型与视图之间的桥梁，后端返回的model转换前端所需的vm，视图层可以直接从vm中提取数据
-
入门使用
Vue被设计为可以自低向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
vue的引入
-
离线引用：下载vue的js文件，添加到前端项目，在网页中通过script标签引用vue.js文件
-
CDN引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="container">
{
{str}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str:"helloword"
}
});
</script>
</body>
</html>
Vue的语法
基本类型数据和字符串
{
{code}}
{
{str}}
-------------------------
data:{
code:10,
str:"test"
}
对象类型数据
-
支持ognl语法
{
{stu.stuNum}}
{
{stu.stuName}}
-----------------------------
data{
stu:{
stuNum:"100001",
stuName:"张三",
stuGender:"M",
stuAge:20
}
}
条件 v-if
//条件不成立则不显示
<label v-if="stu.stuGender=='M'">男</label><br/>
-------------------------------------------------------
data:{
stu:{
stuNum:"100001",
stuName:"张三",
stuGender:"M",
stuAge:20
}
}
循环 v-for
<table border="1" cellspacing="0" width="400">
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="s,index in stus">
<td>{
{index+1}}</td>
<td>{
{s.stuNum}}</td>
<td>{
{s.stuName}}</td>
<td>
<label v-if="s.stuGender == 'M'">男</label>
<label v-if="s.stuGender == 'F'">⼥</label>
</td>
<td>{
{s.stuAge}}</td>
</tr>
</table>
data:{
stus:[
{
stuNum:"100001",
stuName:"张⼤三",
stuGender:"M",
stuAge:23
},
{
stuNum:"100002",
stuName:"张中三",
stuGender:"M",
stuAge:22
},
{
stuNum:"100003",
stuName:"张⼩三",
stuGender:"F",
stuAge:20
}
]
}
v-bind绑定标签属性
-
v-bind：可简写为 :
<input type="text" v-bind:value="str"/>
<img :src="stu.stuImg"/>
------------------------------------
data{
str:"从前有座⼭",
stu:{
stuImg:"img/01.jpg"
}
}
表单标签的双向绑定 v-model
-
只能使用在表单输入标签
-
v-model:value 可以简写为 v-model
<input type="text" v-model:value="str"/>
<input type="text" v-model="str"/>
------------------------------------
data{
str:"从前有座⼭"
}
vue实例
每个使用vue进行数据渲染的网页文档度需要创建一个Vue实例--ViewModel
Vue实例的声明周期
vue实例生命周期--vue实例从创建到销毁的过程
-
创建vue实例（初始化data、创建el）
-
数据挂载（将vue实例data中的数据渲染到网页HTML标签）
-
重新渲染（当vue的data数据发生变化，会重新渲染到HTML标签）
-
销毁实例
钩子函数
为了便于开发者在vue实例生命周期的不同阶段进行特定的操作，vue在生命周期四个阶段的前后分别提供了一个函数，这个函数无需开发者调用，当vue实例到达生命周期的指定阶段会自动调用对应的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<label v-once>{
{str}}</label>
<label>{
{str}}</label><br />
<input type="text" v-model="str" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str:"从前有座山"
},
beforeCreate:function(){
//data初始化之前执行，不能操作data
},
created:function(){
//data初始化之后执行，模板加载之前，可以修改/获取data中的值
console.log(this.str);
//this.str = "山里有座庙"
},
beforeMount:function(){
//模板加载之后，数据初始渲染之前，可以修改/获取data中的值
//this.str = "庙里有口井"
},
mounted:function(){
//数据初始渲染之后，可以对data中的变量进行修改，但是不影响v-once的渲染
//this.str = "井里有只娃"
},
beforeUpdate:function(){
//数据渲染之后，当data中的数据发生变化触发重新渲染，渲染之前执行此函数
//data数据被修改之后，重新渲染到页面之前
//this.str = "从前有座山2"
},
updated:function(){
//data数据被修改之后，重新渲染到页面之后
//this.str = "从前有座山3"
},
beforeDestroy:function(){
//实例销毁之前
},
destroyed:function(){
//实例销毁之后
}
})
</script>
</body>
</html>
计算属性和侦听器
计算属性
data中的属性可以通过声明获得，也可以通过在computed通过计算获得
特性：计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" v-model="str1" /><br />
<input type="text" v-model="str2" /><br />
{
{str3}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str1:"千峰",
str2:"武汉"
},
computed:{
str3:function(){
return this.str1 + this.str2;
}
}
});
</script>
</body>
</html>
侦听器
侦听器，就是data中属性的监听器，当data中的属性值发生变化就会触发侦听器函数的执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" v-model="str1" /><br />
<input type="text" v-model="str2" /><br />
{
{str3}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
str1:"千峰",
str2:"武汉",
str3:"千峰武汉"
},
watch:{
str1:function(){
this.str3 = this.str1+this.str2;
},
str2:function(){
this.str3 = this.str1+this.str2;
}
}
});
</script>
</body>
</html>
class与style绑定
我们可以使用mustache语法将vue中data的数据绑定到HTML标签及标签的属性，如何将data中的值绑定到标签的class及style属性呢
class绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.mystyle1{
width: 200px;
height: 100px;
background: orange;
}
.mystyle3{
width:200px;
height: 100px;
background: black;
}
.my-style2{
border-radius: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--如果b1为true就加载mystyle1；如果b2为true，则加载my-style2-->
<div :class="{mystyle1:b1,'mystyle2':b2}"></div>
<!--为class属性加载多个样式名-->
<div :class="[chooseStyle1,chooseStyle2]"></div>
<!--如果b3为true，则class='mystyle3'，否则class='mystyle1'如果在三目运算中使用样式名则需加单引号，不加单引号则表示从data变量中获取样式名-->
<div :class="[b3 ? 'mystyle3' : 'mystyle1']"></div>
<div :class="[b3 ? chooseStyle3 : chooseStyle1]"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
b1:true,
b2:true,
b3:false,
chooseStyle1:"mystyle1",
chooseStyle2:"my-style2",
chooseStyle3:"mystyle3"
}
})
</script>
</body>
</html>
style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<style>
.mystyle1{
width: 200px;
height: 100px;
background: orange;
}
.mystyle3{
width:200px;
height: 100px;
background: black;
}
.my-style2{
border-radius: 10px;
}
</style>
</head>
<body>
<div id="container">
<!--当使用v-bind绑定内联样式时：
1.使用{}定义style样式，才能获取data中的值，{}要遵循json格式
2.{}中不在使用style样式属性名“font-size”，而要使用对应的js属性名
border-style-width ---- borderStyleWidth
-->
<div v-bind:style="{color:colorname,fontSize:fontsize+'px'}">
WH2010
</div>
<!--我们可以直接为style属性绑定一个data中定义好的内联样式 的字符串-->
<div v-bind:style="mystyle1">
Wh2021</div>
<!--可以直接为style属性绑定一个data中定义好的内联样式的对象-->
<div v-bind:style="mystyle2">
wh2021
</div>
<!--可以在同一个style上通过数组引用多个内联样式的对象-->
<div v-bind:style="[mystyle2,mystyle3]">
wh2021
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/157139?site
推荐阅读
相关标签
