Vue（前端框架）

小谭同学ha

已于 2023-12-14 15:36:32 修改

阅读量2.9k

点赞数

文章标签： vue.js javascript 前端

于 2023-04-21 14:31:06 首次发布

本文链接：https://blog.csdn.net/qq_69032468/article/details/130183715

版权

1.MVVM

Model-View-ViewModel 是前端的一种架构思想

2.Vue

vue是前端的一个框架

框架：是技术，代码的封装，在框架的基础上进行开发，语法简单便捷。而JavaScript语法称为原生态，语法复杂。

原生js做法：获得要操作的标签对象（DOM对象），将值赋给标签对象的属性。

3.Vue安装

1.用<script>引入（为vue-cli搭建项目，在下篇文章)

1.下载：https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

2.另存到文件夹

3.将文件导入到 js 文件夹里

4.Vue指令

*v-text

将字符串当作文本输出，不能解析标签

*v-html

可解析字符中的标签

v-html="message" v-text="message" 会覆盖带标签的内容

*v-on

为标签添加事件为事件绑定处理函数

事件名 on 可简写为 @

<input type="button" value="测试1" v-on:click="test1(5)"/>

<input type="button" value="测试2" @click="test2(10)"/>

*v-model

v-model="message" 可以将输入框的value属性值与data中的message相绑定.

*v-show

v-show="isshow" 控制标签是否显示通过操作标签的display属性操作,效率高

原理是修改元素的 display，实现显示;数据改变之后，对应元素的显示状态会同步更新

*v-if

v-if="isshow" 控制标签是否显示通过直接操作dom(删除,创建) 效率低

显示状态表达式的值为 true，元素存在于 dom 中;为 false，从 dom 中移除,频繁的切换 v-show，使用v-show更为方便。

*v-bind

为标签中的属性动态赋值

写法：

<img v-bind:src="imgSrc"/>

*v-for

根据数据生成列表结构

数组经常和 v-for 结合

如打印列人名表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="a">
			<table id="tid">
				<tr>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var array=[{name:"张三",age:18},{name:"李四",age:20}];
			var s="";
			for (var i = 0; i < array.length; i++) {
				s+="<tr>"
				s+="<td>"+array[i].name+"</td>"
				s+="<td>"+array[i].age+"</td>"
				s+="</tr>"
			}
			document.getElementById("tid").innerHTML+=s;
		</script>
	</body>
</html>

更为简洁方便的做法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="a">
			<table id="tid">
				<tr>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="user in users">
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var app=new Vue({
				el:"#a",
				data:{
					users:[{name:"张三",age:18},{name:"李四",age:20},{name:"王五",age:8}]
				}
			});
		</script>
	</body>
</html>

Vue 实例生命周期

每个Vue实例被创建时需经过初始化过程，与此同时会运行某些叫做生命周期钩子函数，使用户可在不同阶段添加代码。

beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
/* 使用mounted，当vue对象与标签绑定完毕后执行，类似于onload事件
在此向后端发送请求，后端响应数据 */
console.log("mounted")

}