使用vue开发功能模块

时间：2020-02-18 00:02:51 阅读：78 评论：0 收藏：0 [点我收藏+]

理论知识

画静态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;
            width: 180px;
        }
        .test{
            width: 180px;
        }
        .test> button{
            width: 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;
          width: 180px;
      }
      .test{
          width: 180px;
      }
      .test> button{
          width: 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>

代码效果，点击不同按钮，出现对应图片。

使用vue开发功能模块

原文：https://www.cnblogs.com/guojuboke/p/12324116.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

使用vue开发功能模块

理论知识

实践