HTML——Vue—基本语法

最新推荐文章于 2023-08-30 19:19:13 发布

Jhinhua

最新推荐文章于 2023-08-30 19:19:13 发布

阅读量205

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104969201

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

Vue基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="box">
			<h3 v-text="detail"></h3>
			<h3 v-html="detail"></h3>
			<img src="../img/pic17.jpg" v-show="flag" />
			<!-- 满足条件 数据渲染 -->
			<p v-if="value == 1">{{ boy }}</p>
			<p v-else-if="value == 2">{{ girl }}</p>
			<p v-else>{{ other }}</p>
			
			<ul>
				<li v-for="ele in enjoy"> {{ ele }} </li>
			</ul>
			
			<ul>
				<li v-for="value, key in score">
					{{ key }} 的成绩是 {{ value }}</li>
			</ul>
			
			<button v-on:click="btnClick()">按钮</button>
			<!-- 事件绑定简写的行为 -->
			<button @click="btnClick()">按钮1</button>
			<input type="text" v-on:input="inputEvent()" />
			
			<img v-bind:src="imgpath" />
			<!-- 简化 -->
			<img :src="imgpath" />
			
			<input type="text" v-model="inputMessage" />
			<p> {{ inputMessage }} </p>
		</div>
		
		
		<script type="text/javascript">
			/**
			 * Vue的指令 是带有v-前缀的特殊的属性  指令的属性值都是单一JS表达式
			 * 指令的职责 就是将JS的表达式的结果 渲染到DOM层的
			 * 
			 * 设置文本的
			 * 	{{}}
			 * 	v-text
			 * 	v-html  --- 识别标签的
			 * 设置css的display的属性
			 * 		v-show  属性对应的值是真或者假  真为显示  假为隐藏
			 *判断结构 
			 * 	v-if  通过某个属性的之去做判断条件
			 * 	v-else 
			 * 	v-else-if
			 * 循环的结构
			 * 	v-for  渲染容器的数据
			 * 			数组   字符串   对象
			 * 事件的绑定
			 * 		v-on
			 * 操作属性的
			 * 		v-bind
			 * 操作表单的
			 * 		v-model
			 */
			
			var vue = new Vue({
				el:"#box",
				data:{
					detail: "<font color='red'>you are very beautiful</font>",
					flag:true,
					boy: "hello boy",
					girl: "hello girl",
					other: "hello ...",
					value: 3,
					enjoy: ["篮球","足球", "排球", "棒球"],
					score:{"语文":78, "数学":88},
					imgpath:"../img/pic16.jpg",
					inputMessage:""
				},
				// 绑定事件对应的方法的位置
				methods:{
					btnClick:function(){
						console.log("按钮被点击了")
					},
					inputEvent:function(){
						console.log("内容输入了")
					}
				}
			})
			
		</script>
		
	</body>
</html>

Jhinhua

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML——Vue—基本语法

Vue基本语法 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"&gt...
复制链接

扫一扫