Vue.js基础语法

最新推荐文章于 2022-12-20 15:12:04 发布

lei_1994

最新推荐文章于 2022-12-20 15:12:04 发布

阅读量493

点赞数

分类专栏： web前端文章标签： Vue

本文链接：https://blog.csdn.net/lei_1994/article/details/79152735

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在实际操作中建议定义全局id  即在body标签中给定，不要重复使用new Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一次测试Vue.js</title>
		<!--<script  src="js/vue.min.js"></script>-->
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	</head>
	<style>
		.class1{
			background: #666;
			color: #fff;
		}
	</style>
	<body>
		<!--<div id="firstVue1">
			<p>
				{{ messagefirst }}
			</p>
		</div>
		<hr />
		<div id="firstVue2">
			<div v-html="message">
			</div>
		</div>
		<hr />
		<div id="firstVue3">
			<lable for="r1">修改颜色</lable><input type="checkbox" v-model="class1" id="r1">
			<br></br>
		<div v-bind:class="{'class1':class1}">
		    	看看我的颜色,测试一波v-bind(得到属性中的值) 复选框选中  则使用class1样式,否则不使用
		</div>
		</div>
		<hr>
		<div id="firstVue4">
			结果：{{6+6}} <br>
			三目结果：{{ok?'Yes':'No'}} <br>
			字符串反转：{{ message4.split('').reverse().join('')}}<br>
			拼接的id:<div v-bind:id="'demo-'+id">{{id}}</div>
		<div>
		<hr />-->
		<!--<div id="firstVue5">
		<p v-if="isSeen">测试是否可以进行显示</p>
			<template v-if="flag">
				<h1>我是标题</h1>
				<p>根据v-if来控制是否进行显示！</p>
			</template>
		</div>
		<hr>
			
		<!--测试vue的数据绑定-->
		<div id="firstVue6">
			<input type="text" v-model="text"/>
			{{ text }}
		</div>
		<hr />
		
		<!--测试v-bind指令下的href-->
		<div id="firstVue7">
			<pre><a v-bind:href="url">百度。。。。。</a> </pre>
			<pre><a v-on:click="doSomething">点击我哈</pre>
			<form v-on:submit="subSomething">
				<input type="submit" name="haha" id="haha" value="提交" />
			</form>
		</div>
		<hr />
		
		<!--将字符串进行反转-->
		<div id="firstVue8">
			{{ text }}<br>
			<input type="button" v-on:click="reverseString" value="反转字符串"/>
		</div>
		<hr />
		
		
		<!--过滤器的设置-->
		<div id="firstVue9">
			{{ filterText | capitalize }}
		</div>
		<script>
			/*new Vue({
			   el:'#firstVue1',
			   data:{
			   	messagefirst:'使用Vue.js 显示文本!'
			   }
			});
			
			new Vue({
				el:'#firstVue2',
				data:{
					message:'<h1>使用Vue.js将html显示在页面上</h1>'
				}
			});
			
			new Vue({
				el:'#firstVue3',
				data:{
					class1:false
				}
			});
			
			new Vue({
				el:'#firstVue4',
				data:{
					ok:true,
					message4:'zxcvbnm',
					id:6
				}
			});
			*/
			new Vue({
				el:'#firstVue5',
				data:{
					isSeen:true,
					flag:true
				}
			});
			
			new Vue({
				el:'#firstVue6',
				data:{
					text:'测试数据的绑定！'
				}
			});
			
			new Vue({
				el:'#firstVue7',
				data:{
					url:'https://www.baidu.com',
				},
				methods:{
					doSomething:function(){
						alert("恭喜你中奖了");
					},
					subSomething:function(){
						alert("提交表单！");
					}
				}
			});
			
			new Vue({
				el:'#firstVue8',
				data:{
					text:'abcdefg'
				},
				methods:{
					reverseString:function(){
						this.text=this.text.split('').reverse().join('')
					}
				}
			});
			
			new Vue({
				el:'#firstVue9',
				data:{
					filterText:'abcDefg'
				},
				filters:{
					capitalize:function(value){
						if(!value) return ''
						value=value.toString()
						return value.toUpperCase()
						/*return value.charAt(0).toUpperCase() + value.slice(1)*/
					}
				}
			})
			
		</script>
	</body>
</html>

更多详解推荐网址：http://www.runoob.com/

lei_1994

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js基础语法

在实际操作中建议定义全局id 即在body标签中给定，不要重复使用new Vue 第一次测试Vue.js --> .class1{ background: #666; color: #fff; } {{ messagefirst }} 修改颜色
复制链接

扫一扫