VUE的基本用法_const app = new vue({ ...app })-CSDN博客

本文链接：https://blog.csdn.net/weixin_60232967/article/details/119939536

一.MVC思想说明在这里插入图片描述

二.VUE的基本用法

2.1基本案例

	<body>
		<!-- 基本语法 -->
		<div id="app">
			{{msg}}   <!-- 插值表达式-->
		</div>
		
		<!-- 1.导入js类库 -->
	<script src="../js/vue.js"></script>
	<!-- 2.创建vue对象 -->
	<script>
		const app = new Vue({
			el:'#app', //挂载点
			data:{
				msg:"vue案例"
			}
		})
	</script>
	</body>

2.2常用指令的学习

2.2.1表单的双向绑定（v-model）

流程：View根据Model展示页面，当页面发生操作时（commander），View传递指令到Controller层，Controller层根据commander对Model做出修改，Model发生变化后，通知View重新渲染。
在这里插入图片描述

问题: 表单中的哪些标签可以使用双向数据绑定？

双向数据绑定说明: 用户可以录入的标签.

答案: 1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域

<div id="app">
			
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
			 </form>			 
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				}	
			})
		</script>
	</body>

在浏览器中按F12打开开发者模式，在console界面可以验证是否双向绑定成功

2.2.2取消标签的默认行为（v-click.prevent）

<div>
	<!-- 
	VUE的点击事件中有一个属性,可以取消标签的默认行为
	@click.prevent
	常用场景: 
		1. form标签  阻止 action 提交
		2. a标签     阻止 href   属性跳转
 -->
	<input type="submit" value="提交" @click.prevent="formBtn"/>
</div>
<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>

2.2.3当页面没有渲染完成，不予展现（v-text）

	<body>
		<div id="app">
			<!-- 语法说明：
					1.{{msg}}当页面没有渲染成功时，以原标签展现
					2.v-text 当页面没有渲染完成，则不予展现
			 -->
			<h1>{{msg}}</h1>
			<!-- 1.v-text -->
			<h1 v-text="msg"></h1>
		</div>
	<script src="../js/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				msg:"vue案例"
			}
		})
	</script>
	</body>

2.2.4 解析数据中的元素标签（v-html）

当你的数据中有html元素标签，并且希望按照元素标签的样式显示的时候，这个时候就需要使用v-html来绑定数据。

<body>
		<div id="app">	
        <div v-html="div"></div>
</div>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
				div:"<h3>我是一个标题标签</h3>"
			}
		})
	</script>
	</body>

运行结果

2.2.5 将输入的内容转化为数值类型（v-model.number）

简单的计算（v-on:click）

<body>
		<!-- 事件绑定语法 
		v-on:click= "简单的计算"-->
		<div id="app">
			年龄: <input type="number" v-model.number="num"/>
			<button v-on:click="num++">自增</button>
			<button @click="addNum">自增函数</button>
		</div>
		
		<!-- 1.导入js类库 -->
	<script src="../js/vue.js"></script>
	<!-- 2.创建vue对象 -->
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				num:''
			},
			methods:{
			addNum:function(){
				this.num = this.num + 1
			}	
			}
		})
	</script>
	</body>

运行结果

每按一次按键加一

每按一次”自增函数“的按键，后面加一个“1”.

2.2.6分支结构

	<body>
		<!-- 基本语法 -->
		<div id="app">
			<!-- 用户可以手动输入成绩
					根据成绩,自动计算成绩
					等级规范
						>=90  优秀
						>=80  良好
						>=70  中等
						否则  继续努力
						命令:v-if  如果为true,则展现元素
							 v-else-if  如果不满足v-if,检查是否满足v-else-if
							 v-else  上述都不满足才展现
						-->
						请输入成绩:<input type="text" v-model="score" /><br>
						等级:
							<h3 v-if="score >= 90">优秀</h3>
							<h3 v-else-if="score >=80">良好</h3>
							<h3 v-else-if="score >= 70">中等</h3>
							<h3 v-else>继续努力</h3>
		</div>
		
		<!-- 1.导入js类库 -->
	<script src="../js/vue.js"></script>
	<!-- 2.创建vue对象 -->
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				score:0
			}
		})
	</script>
	</body>

2.2.7循环遍历(v-for)

案例1 以循环方式输出爱好

<body>
<div id="demo1">
	<p v-for="value in hobby"v-text="value" ></p>
</div>
<script src="../js/vue.js"></script>
     <script>
		var app = new Vue({
			el:'#app',
			data:{
				hobby:["z","x","c"]
		}
		})
	</script>
</body>

运行结果

案例2 以循环方式输出爱好,展示下标

<p v-for="value,index in hobby" >固定

<body>
	<div id="demo2">
				<p v-for="value,index in hobby" >
                    <!-- 下标 -->
				<span v-text="index+1"></span>------
                    <!-- 元素 -->
				<span v-text="value"></span>
				</p>
	</div>
<script src="../js/vue.js"></script>
	<!-- 2.创建vue对象 -->
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				hobby:["z","x","c"]
		}
	})
	</script>
</body>

运行结果

案例三将遍历的结果填入表格内

div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名字</td>
						<td>年龄</td>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id" ></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
<script src="../js/vue.js"></script>
	<!-- 2.创建vue对象 -->
	<script>
		var app = new Vue({
			el:'#app',
			data:{
                userList: [{id:100,name:"麦克雷",age:40},
							{id:101,name:"安娜",age:60},
							{id:102,name:"温斯顿",age:30},
							]
			}
		})
	</script>

运行结果