vue的基本使用

最新推荐文章于 2025-06-13 08:24:12 发布

weixin_47074036

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量67

点赞数

文章标签： javascript vue.js html

本文链接：https://blog.youkuaiyun.com/weixin_47074036/article/details/120810447

版权

vue官网

vue.js入口

vue简介

1.javascript框架
2.简化Dom操作
3.响应式数据驱动

v-text

<body>
		<div id="apps" v-text="message+'!'">这里有值无效</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					message:"你好，vue"
				}
			})
		</script>
</body>

v-html

<body>
		<div id="apps">
			<div  v-html="message+'!'">这里有值无效</div>
			
			<div  v-text="message+'!'">这里有值无效</div>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					message:"<a href='https://www.baidu.com'>百度网址</a>"
				}
			})
		</script>
</body>

v-if

<body>
		<!-- v-if操作的是dom元素，如果不存在则不会写该元素 -->
		<div id="apps">
			<input type="button" value="显示或隐藏" @click="changeIsAge">
			<!-- 标签内部判断隐藏 -->
			<h2 v-if="age>17">图片1</h2>
			<h2 v-if="wendu>30">热死了</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					age:15,
					wendu:31
				},
				methods:{
					changeIsAge:function(){
						this.age++
					}
				}
			})
		</script>
</body>

v-show

<body>
		<div id="apps">
			<!-- v-show操作的是display：none样式 -->
			<h2 v-show="isShow">图片</h2>
			<input type="button" value="显示或隐藏" @click="changeIsShow">
			<!-- 标签内部判断隐藏 ,大于17隐藏-->
			<h2 v-show="age>17">图片1</h2>
			<input type="button" value="显示或隐藏" @click="changeIsAge">
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					isShow:false,
					age:15
				},
				methods:{
					changeIsShow:function(){
						this.isShow=!this.isShow
					},
					changeIsAge:function(){
						this.age++
					}
				}
			})
		</script>
</body>

v-for

<body>
		<!-- v-if操作的是dom元素，如果不存在则不会写该元素 -->
		<div id="apps">
			<input type="button" value="添加水果" @click="add">
			<input type="button" value="移除水果" @click="remove">
			<ul>
				<!-- item是数据 index是属性 -->
				<li v-for="(item,index) in arr">
				{{index}}	你好：{{item}}
				</li>
			</ul>
			<h2 v-for="item in tables" v-bind:title="item.name">
				{{item.name}}
			</h2>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					arr:[1,2,3,4,5],
					tables:[
						{name:"西瓜"},
						{name:"香蕉"}
					]
				},
				methods:{
					add:function(){
						this.tables.push({name:"苹果"});
					},
					remove:function(){
						//移除最左边的，也就是第一个
						this.tables.shift();
					}
				}
			})
		</script>
</body>

v-on

<body>
		<div id="apps">
			<input type="button" value="按钮" v-on:click="doIt"> 
			<input type="button" value="按钮1" @click="doIt">
			<!-- 双击事件 -->
			<input type="button" value="双击事件" @dblclick="doIt">
			<!-- 事件修饰符 -->
			<input type="button" value="回车事件" @keyup.enter="sayHi">
			<!-- 更新数据 -->
			<h2 @click="changeFood">{{ food }}</h2>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					food:"西兰花"
				},
				methods:{
					doIt:function(){
						alert("双击事件")
					},
					changeFood:function(){
						this.food+="好好看！"
					},
					sayHi:function(){
						alert("回车事件")
					}
				}
			})
		</script>
</body>

v-bind

<head>
		<meta charset="utf-8">
		<title>v-bind属性</title>
		<style>
			.is{
				color:red
			}
		</style>
	</head>
	<body>
		<!-- bind绑定属性 -->
		<div id="apps">
			<a  v-bind:href="message">这里有值无效</a>
			<!-- 如果为isActive为true添加属性class为is -->
			<h1 :class="{is:isActive}" @click="isActiveShow">变颜色</h1>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					message:"https://www.baidu.com",
					isActive:false
				},
				methods:{
					isActiveShow:function(){
						this.isActive=!this.isActive
					}
				}
})
		</script>
</body>

v-model

<body>
		<div id="apps">
			<!-- @keyup按下键盘就会执行 -->
			<input type="text" v-model="message" @keyup.enter="getM">
			<h2>{{message}}</h2>
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var v=new Vue({
				el:"#apps",
				data:{
					message:"黑马"
				},
				methods:{
					getM:function(){
						alert(this.message)
					}
				}
			})
		</script>
</body>