武汉互赢网络科技股份有限公司

为企业创品牌·从营销型网站建设开始·互赢懂技术·更懂品牌营销

24小时热线

159 7210 9576027-89992189

您的位置:首页 > 新闻资讯 > 行业百科 > 行业动态

vue入门

作者:龙 时间:2018-07-13 浏览:

1.vue绑定函数
 
<head>
	<meta charset="UTF-8">
	<title>vue01.js</title>
	<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
	<div class="box" id="box">
		{{ww(scale)}}
		<p v-bind:style = fontS>hello world</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				scale:60,
				fontS:"font-size:25px;color:red"
			},
			methods:{
				ww:function(scale){
					if(isNaN(scale)){
						return "数据错误"
					};

					if(scale>=90 && scale<=100){
						return "优秀"
					}else if(scale>=75 && scale <90){
						return ""
					}else if(scale>=60&& scale <75){
						return "及格"
					}else if(scale>=0 && scale <60){
						return "不及格"
					}else{
						return "错误了"
					}
				}
			}
		})
	</script>
</body>
2.vue绑定事件
 
<div id="box" class="box">
		<input type="button" v-bind:value="a" @click="click"> 	
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:1
			},
			methods:{
				click:function(){
					this.a++
				}
			}
		})
	</script>
3.vue绑定属性
 
<div id="box" class="box">
		<p v-bind:style="{'color':colors[a],'fontSize':fons[a]}">hello world</p>
		<input type="button" v-bind:value="a+1" @click="click"> 
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				colors:["red","pink","skyblue","orange","rgba(125,36,220,0.6)"],
				fons:["12px","20px","16px","14px","26px"]
			},
			methods:{
				click:function(){
					this.a = ++this.a%this.colors.length
				}
			}
		})
	</script>
4.vue绑定事件与生命钩子
 
<div id="box" class="box">
		<p v-bind:style="{'color':colors[a],'fontSize':fons[a]}">hello world</p>
		<input type="button" v-bind:value="a+1" @click="click"> 
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				colors:["red","pink","skyblue","orange","rgba(125,36,220,0.6)"],
				fons:["12px","20px","16px","14px","26px"]
			},
			beforeCreate(){
				setInterval(function(){
					this.click();
				}.bind(this),1000)
			},
			methods:{
				click:function(){
					this.a = ++this.a%this.colors.length
				}
			}
		})
	</script>

5.v-model
 
<div class="box" id="box">
		<input type="text" v-model="scale">
		{{ww(scale)}}
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				scale:""
			},
			methods:{
				ww:function(scale){
					if(scale==""){
						return ""
					}
					if(isNaN(scale)){
						return "数据错误"
					};

					if(scale>=90 && scale<=100){
						return "优秀"
					}else if(scale>=75 && scale <90){
						return ""
					}else if(scale>=60&& scale <75){
						return "及格"
					}else if(scale>=0 && scale <60){
						return "不及格"
					}else{
						return "错误了"
					}
				}
			}
		})
	</script>
6.v-for实现计算器
 
<div id="box" class="box">
		<p><input type="text" v-bind:value="a" ></p>
		<div class="con">
			<button v-for="item in nums" @click = "val(item)">{{item}}</button>
		</div>
			
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				nums:['0','1','c','2','3','4','5','6','7','8','9','+','-','*','/','=']
			},
			methods:{
				val:function(n){
					if(n=="="){
						this.a=eval(this.a);
					}else if(n=="c"){
						this.a=0;
					}else{
						if(this.a==0){
							this.a=n;
						}else{
							this.a+=n;
						}
					}
					
				}
			}
		})
	</script>
7.v-for
 
<div id="box" class="box">
		<div class="con">
			<p v-for="(index,item) of nums" @click="al(item)">{{index}}------{{item}}</p>
		</div>
	</div>
	
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				nums:['0','1','c','2','3','4','5','6','7','8','9','+','-','*','/','=']
			},
			methods:{
				al:function(n){
					alert(n)
				}
			}
		})
	</script>
8.实现“全部”、“未完成”、“已完成”效果
 
<body>
	<div id="box" class="box">
		<input type="text" v-model="mes" @keyup.enter="add(mes)">
		<div class="con">
			<p v-for="(item,index) of getlist">
				<input type="checkbox" v-model="item.flag">{{item.value}}
			</p>
		</div>
		<p><span><i>{{this.nums.length}}</i>&nbsp;&nbsp;&nbsp;项未完成</span><br>
			<button @click="ww(0)">全部</button><button @click="ww(1)">已完成</button><button @click="ww(2)">未完成</button></p>
	</div>
	<script type="text/javascript">
		var vm= new Vue({
			el:".box",
			data:{
				a:0,
				mes:"",
				nums:[]
			},
			computed:{
				getlist:function(){
					var arr=[];
					if(this.a==0){
						for(var i=0;i<this.nums.length;i++){
							arr.push(this.nums[i])
						}
					}else if(this.a==1){
						for(var i=0;i<this.nums.length;i++){
							if(this.nums[i].flag){
								arr.push(this.nums[i])
							}
						}
					}else{
						for(var i=0;i<this.nums.length;i++){
							if(!this.nums[i].flag){
								arr.push(this.nums[i])
							}
						}
					}
					return arr;
				}
			},
			methods:{
				add:function(x){
					this.nums.push({
						value:x,
						flag:false
					});
					this.mes=''
				},
				ww:function(m){
					this.a=m;
				}
			}
		})
	</script>
</body>

image.png

9.请求数据
 
<body>
	<div class="box" id="box">
		<p><input type="text" v-model="city"></p>
		<p><input type="button" value = "登录" @click = "login"></p>
		<p >{{tips}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#box",
			data:{
				city:"北京",
				tips:"还为返回数据"
			},
			methods:{
				login:function(){
					this.$http.jsonp("http://wthrcdn.etouch.cn/weather_mini?city="+this.city,
						{
							jsonp:"callback"
						}
					).then(function(data){
						console.log(data)
						this.tips ="数据成功返回"
					})
					
				}
			}
		})
	</script>
</body>

最新动态

常见问题百宝箱

全国服务热线

027-89992189

扫一扫关注微信

Copyright 2013-2020 All Rights Reserved 武汉互赢网络科技股份有限公司 鄂ICP备19027860号

获取品牌营销方案

快速填写

马上获取

互联网低成本创名牌从此开始!