zoukankan      html  css  js  c++  java
  • 使用vue开发功能模块

    理论知识

    • 画静态ui界面。分析业务功能,得到基本的ui界面。基于html+css实现静态的ui界面。
    • 改造ui界面。利用vue模板语法,包括数据绑定、属性绑定、方法绑定等各种绑定,得到符合vue模板语法的ui界面。
    • 实现用户操作。利用vue的事件绑定和js的控制逻辑,开发业务功能。
    • 整体思路如下图,此图类似beetl,一定程度说明vue也是一个模板引擎
    • vue是声明式编程,只需要告诉程序需要什么效果,其他的交给程序完成,即基于vue模板语法的网页结构和最终效果基本一致。

    实践

    • 方法一代码,这种方法手工操作多,为使用遍历、类。
    <!DOCTYPE html>
    <html>
    <head>
    	<script type="text/javascript" src="vue.js"></script>
    	<style type="text/css">
    		.active{
    			border: 1px, solid;
    			background: green;
    
    		}
    		.img{
    			height: 180px;
    			 180px;
    		}
    		.test{
    			 180px;
    		}
    		.test> button{
    			 calc(180px /3 );
    		}
    	</style>
    </head>
    <body>
    	<div id="app">
    		<div class="test"><button @click='b'>香蕉</button><button @click='c'>橘子</button><button @click='a'>苹果</button></div>
    		<div><img class="img" :src='url'></div>
    	</div>
    	<script type="text/javascript">
    		Vue.config.keyCodes.aaa= 65
    		var app = new Vue({
    			el: '#app',
    			data:{
    				url:'img/a.png'
    				
    			},
    			methods:{
    				a:function(){
    					this.url='img/a.png'
    				},
    				b:function(){
    					this.url='img/b.png'
    				},
    				c:function(){
    					this.url='img/o.png'
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
    • 方法二代码,这种方法使用了vue的遍历、样式绑定。
      • 首先将所有元素和图片遍历到前端。
      • 获取点击事件,并保存点击元素的索引。
      • 在所有图片中对比点击元素的索引是否与自己的索引相同,如果相同则设置图片可见。
    <!DOCTYPE html>
    <html>
    <head>
    	<script type="text/javascript" src="vue.js"></script>
    	<style type="text/css">
    		.active{
    			border: 1px, solid;
    			background: green;
    
    		}
    		.img{
    			height: 180px;
    			 180px;
    		}
    		.test{
    			 180px;
    		}
    		.test> button{
    			 calc(180px /3 );
    		}
    		.show{
    			display: block;
    		}
    		img{
    			display: none;
    		}
    	</style>
    </head>
    <body>
    	<div id="app">
    		<div>
    			<ul>
    				<li @click='change(index)'  :key='index' v-for='(item,index) in fruit'>{{ item.name }}</li> //传递index
    			</ul>
    		</div>
    		
    
    		<div>
    			<ul>
    				<img  :class='current==index?"show":""' :key='index' :src='item.url' v-for='(item,index) in fruit'> 
    			</ul>
    		</div>
    
    	</div>
    	<script type="text/javascript">
    		Vue.config.keyCodes.aaa= 65
    		var app = new Vue({
    			el: '#app',
    			data:{
    				current:0,
    				fruit:[
    				{
    					id:'0',
    					name:'apple',
    					url:'img/a.png'
    				},
    				{
    					id:'1',
    					name:'orange',
    					url:'img/o.png'
    				},
    				{
    					id:'2',
    					name:'banana',
    					url:'img/b.png'
    				}]
    				
    				
    			},
    			methods:{
    			change:function(index){
    				this.current=index;
    			}
    			}
    		})
    	</script>
    </body>
    </html>
    
    • 代码效果,点击不同按钮,出现对应图片。
  • 相关阅读:
    EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
    easyui datagrid plunges 扩展 插件
    jQuery EasyUI DataGrid Checkbox 数据设定与取值
    Easyui Tree方法扩展
    记账凭证
    部分扩展功能总结
    凭证
    voucer
    Box2D 一、学习资料(库、pdf)
    EUI EXML内部类Skin和ItemRenderer
  • 原文地址:https://www.cnblogs.com/guojuboke/p/12324116.html
Copyright © 2011-2022 走看看