VUE JS 使用组件实现双向绑定的示例代码

 更新时间:2017年1月22日 11:06  点击:2207
小编推荐的这篇文章介绍了VUE JS使用组件实现双向绑定的示例代码,有需要的同学快看看吧!

1.VUE 前端简单介绍

VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的。

另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全。

2.组件实现

在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器。

在VUEJS 封装时,可以使用组件和指令。

在VUEJS中有V-MODEL 这个感觉和ANGULARJS 类似,实际完全不同,没有ANGULARJS 复杂,他没有象ANGULARJS的 ng-model 的viewtomodel和modeltoview特性,而且这个v-model 只能在input checkbox select 等控件上进行使用,而 angularjs 可以 扩展 ngmodel实现他的render方法。。

另外我在使用 VUE指令时,实现双向绑定,这个我研究了自定义指定的写法,可能还是不太熟悉的原因,还没有实现。

我改用组件来实现:


Vue.component('inputText', {

      props: {

        'input':{

         required:true

      },pname: {

        required:true

      }},

      template:'<div><input type="text" v-model.lazy="input[pname]"><button @click="init" >选择</button></div>',

      data:function() {

        return{

         myModel:"ray"

        }

      },

       

      methods: {

       init:function() {

         varrtn=prompt("输入数据!","");

         this.input[this.pname]=rtn;

        }

      }

     })

在vue实现组件时,他使用的是单向数据流,在这里我们使用 对象来实现双向绑定。

在上面的代码中,有两个属性 :

input,pname 其中input 是一个数据对象实例,pname: 只是一个字符串。

模版代码:

<script type="x-template"id="myTemplate">

    <div >

      <table border="1"width="400">

         <tr>

           <td>name</td>

           <td>

             <input-text :input="person"pname="name"></input-text>

           </td>

         </tr>

         <tr>

           <td>age</td>

           <td>

             <input v-model="person.age">

           </td>

         </tr>

          

       </table>

       <table border="1"width="400">

         <tr>

           <td colspan="3">

             <a href="#"@click="addRow('items')"class="btn btn-primary">添加</a>

           </td>

         </tr>

          

         <tr v-for="(item, index) in person.items">

           <td >

             <input-text :input="item"pname="school"></input-text>

           </td>

           <td >

             <input-text :input="item"pname="year"></input-text>

           </td>

           <td >

             <a @click="removeRow('items',index)">删除</a>

           </td>

         </tr>

          

        

       </table>

   {{person}}

    </div>

  </script>

<inputtext :input="item"pname="school"></inputtext>

 

<inputtext :input="person"pname="name"></inputtext>

组件使用代码,这里绑定了 item,person 数据,pname 为绑定字段。

JS实现代码:

varapp8 =newVue({

     template:"#myTemplate",

     data:{

       person:{name:"",age:0,

        items:[]

       }

     }

     ,

     methods: {

       addRow:function(name) {

        this.person[name].push({school:"",year:""})

       },

       removeRow:function(name,i){

         this.person[name].splice(i,1) ;

       }

      }

      

    })

    app8.$mount('#app8')

这里我们实现了 子表的数据添加和删除。

界面效果:

小编推荐的这篇文章详细解析Vue自定义过滤器的实现,非常实用,有兴趣的同学可以参考一下

一 自定义过滤器(注册在Vue全局)

注意事项:

(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算

(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突

(4)用户从input输入的数据在回传到model之前也可以先处理

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>vue自定义过滤器</title>

    <script src="../js/vue.js"type="text/javascript"charset="utf-8"></script>

    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

  </head>

  <body>

    <div class="test">

      <p>{{message | sum}}</p>

      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->

      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

       

      <input type="text"v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

       

    </div>

    <script type="text/javascript">

     

//    -----------------------------------------华丽分割线(从model->view)---------------------------------------

      Vue.filter("sum",function(value) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + 4;

      });

       

      Vue.filter('cal',function(value, begin, xing) { //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

        returnvalue + begin + xing;

      });

 

//    -----------------------------------------华丽分割线(从view->model)---------------------------------------

      Vue.filter("change", {

        read:function(value) {// model -> view 在更新 `<input>` 元素之前格式化值

          returnvalue;

        },

        write:function(newVal,oldVal) {// view -> model 在写回数据之前格式化值

          console.log("newVal:"+newVal);

          console.log("oldVal:"+oldVal);

          returnnewVal;

        }

      });

 

      varmyVue =newVue({

        el:".test",

        data: {

          message:12

        }

      });

       

    </script>

  </body>

</html>

二 自定义过滤器(注册在实例化内部)

上面的例子直接注册在Vue全局上面,其他不用这个过滤器的实例也会被迫接受,其实过滤器可以注册在实例内部,仅在使用它的实例里面注册

上面的程序改写为:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>vue自定义过滤器</title>

    <script src="../js/vue.js"type="text/javascript"charset="utf-8"></script>

    <meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

  </head>

  <body>

    <div class="test">

      <p>{{message | sum}}</p>

      <p>{{message | cal 10 20}}</p> <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算。-->

      <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->

       

      <input type="text"v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

       

    </div>

    <script type="text/javascript">

      Vue.filter("change", {

        read:function(value) {// model -> view 在更新 `<input>` 元素之前格式化值

          returnvalue;

        },

        write:function(newVal,oldVal) {// view -> model 在写回数据之前格式化值

          console.log("newVal:"+newVal);

          console.log("oldVal:"+oldVal);

          returnnewVal;

        }

      });

 

      varmyVue =newVue({

        el:".test",

        data: {

          message:12

        },

        filters: {

          sum:function(value) {

            returnvalue + 4;

          },

          cal:function(value, begin, xing) {

            returnvalue + begin + xing;

          }

        }

      });

       

    </script>

  </body>

</html>

这篇文章介绍了网站中图片日常使用以及优化手法,非常实用,有需要的同学不妨来看看吧

前言: 最近新到一个团队,才意识到基础的薄弱,牛人遍地,还是好好学习,天天向上。

一直都觉得网站优化的重点是图片,图片的使用也是博大精深。有必要总结一下图片的日常使用以及优化手法~

总的来说,图片的使用分为background和img两种,而优化方向来说分为减少请求,减少大小和清晰度 三个方面

一. background和img的区别:

日常开发中使用的场景区别:

img是内容部分的东西,background-image是修饰性的东西。

加载方式的区别:

在网页加载的过程中,以css背景图存在的图片background-image会等到结构加载完成(网页的内容全部显示以后)才开始加载,

而html中的标签img是网页结构(内容)的一部分会在加载结构的过程中加载,换句话讲,网页会先加载标签img的内容,再加载背景图片background-image,如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之后,才开始加载背景图片,不会影响你浏览网页内容。

二. 平时使用图片有以下几种方式:

1. 图片内联 (base 64)          减少http请求

2. 图片雪碧图(多张图片合并)  减少http请求

3. webp     在压缩方面比 JPEG 格式更优越,并能节省大量的服务器带宽资源和数据空间。与 JPEG 相同,WebP 也是一种有损压缩,主要优势在于高效率。在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。

4. svg  

三. 日常图片展示主要有以下三种形式

1.普通图片

顾名思义,非常普通的图片,不需要因为屏幕扩张或者缩小改变宽度以及高度, 以京东手机网站为例,常见于以下布局

不管在任何手机下面,该图片都是以100*100的形式展示,对于这种图片,可以直接给一个宽度100,高度100,处理起来也非常简单粗暴

2.图片的宽高比

此种常见于响应式网站,以下为京东手机网站举例

在iphone5 及320*568的手机上,该图片显示的宽度和高度分别如下

在iphone6 即375*667的手机上,该图片显示的宽度和高度分别如下

不难看出,上面的宽高比实际上为同一个数值,这样既可以保证该图片适配屏幕,又不让图片变形,因为这种场景,也产生了以下需求

1.列表是响应式的,在不同浏览器下要自适应宽度高度

2.图片在自适应中,图片的长宽比要保持不变

在实际开发中,我们通常会设置图片的宽度为百分比来满足自适应,不设置高度来满足长宽比不变,但是这样又会出现一种问题,在图片没有加载出来的时候,浏览器是无法计算出图片的实际尺寸的,当图片加载出来后,再把容器撑高,造成页面抖动 

优化方案:

1. 首先,按照往例,先上一个知识点

块级元素(div,p)的padding设置为百分比的时候,是按照父级块的宽度来定的,所以由padding(padding-top/padding-bottom)来撑开容器高度,而不是height,保证了容器的宽高比例。图片在绝对定位于块级元素(div,p)下面即可。

代码实现:

 
.placeholder{
 height: 0;
 padding-bottom: 56.25%; /* 16:9 */
 position: relative;
 width: 100%;
}
.placeholder .img{
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

3.背景图片

background这个属性花样很多,也很杂,常见的有以下几种

  1. background-color  
  2. background-position 
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-image

在定义背景属性的时候,可以分开对单个属性进行赋值,通常建议使用下面这个属性,而不是分别使用单个属性,因为需要键入的字母也更少。

 
body{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
// background: color url() repeat attachment position
}

1. background-position 属性  这个属性设置背景原图像的位置

常见使用的值:顺序方面,首先是 x 轴,其次是 y 轴,

2.background-repeat   比较简单,设置背景图片是否重复

3.background-size       在响应式布局中背景图片上用得比较多的一个属性

兼容性:

  • 安卓4.3- 不支持将background,所以必须单独申明这个样式   [所以background-size一般不写进background中,而是单独 background-size:]
  • 安卓4.3- 不支持contain

常见属性: auto ,cover,contain, 100%

从上图可以看到,contain其实等同于background-size: 100% auto;cover等同background-size: auto 100%。

但是,如果背景图像是一张纵向的图(高>宽),那么cover应该等同于background-size: 100% auto;contain等同background-size: auto 100%。

在实际开发中,最常用到的值是cover,如果容器已经有了宽高(当然这里的宽高是指可以随着机型变化的),比如全屏,我们就直接用cover了;而如果容器没有宽高,那就又回到了第二个问题(图片的宽高比),我们可以使用图片或者把设置背景图的这个容器设置成我们图片的宽高比,那样再使用cover或contain都可以。

四. 优化方法:

1. 减少请求

将图片变成base64内联图片, 合并成雪碧图,

以上2种方法在目前一些流行的自动化构建工具都会自动帮忙生成,使用非常方便

适用对象: 不经常改变的icon小图标

2. 减少大小

压缩图片,使用webp格式图片

3.提高清晰度

由于目前的手机高清度越来越高,日常开发中使用2倍图,3倍图的方法

常见优化方法:

1.图片懒加载

优点:通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。

懒加载有多种场景,但原理都是一样的。以下举例滚动懒加载。

原理:将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

github源码: ps://github.com/beidan/lazeLoadImg">https://github.com/beidan/lazeLoadImg

2.图片预加载

基于用户行为的预加载就是,虽然在用户看不到的时候加载了,但是,用户却有更大或者说很大的概率会看到此图。

后续再对这个进行详细的说明~

这篇文章介绍了html清除浮动的几种方法,有需要的朋友赶快来看看吧

html

<div>
    <divclass='box-left'></div>
    <divclass='box-right'></div>
</div>

css

.box-left,.box-right{
        width:200px;
        height:200px;
        float:left;
        background:red;
        border:1pxsolid#333;
    }

第一种方法:.box{clear:box}

第二种方法:.box{overflow:hidden}

第三种方法:.box{overflow:auto}

第四种方法:.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法:.box{height:200px}设置高度

第六种方法:.box{display:table}

还有什么方法欢迎补充,加油,共同进步

[!--infotagslink--]

相关文章

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
  • Vue实现动态查询规则生成组件

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
  • vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
  • 利用js实现Vue2.0中数据的双向绑定功能

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下...2021-07-19
  • vue递归实现自定义tree组件

    这篇文章主要为大家详细介绍了vue递归实现自定义tree组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-20
  • Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
  • Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...2021-03-03
  • C#控制台程序使用Log4net日志组件详解

    这篇文章主要为大家详细介绍了C#控制台程序使用Log4net日志组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • Vue2.x 的双向绑定原理及实现

    这篇文章主要介绍了Vue2.x 的双向绑定原理,Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容...2021-09-27
  • 使用Angular CDK实现一个Service弹出Toast组件功能

    本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28
  • vue实现从外部修改组件内部的变量的值

    这篇文章主要介绍了vue实现从外部修改组件内部的变量的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
  • BootStrap 附加导航组件

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
  • Vue父子组件传值的一些坑

    这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
  • Bootstarp创建可折叠的组件

    这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
  • React 高阶组件HOC用法归纳

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
  • React Class组件生命周期及执行顺序

    这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
  • Android组件间通信利器EventBus详解教程

    现在的Android应用功能越来越多了,为了保证应用的各部分保持高效的通信,这时候就需要用到Android组件间通信利器EventBus。 概述及基本概念 **EventBus**是一个...2016-09-20
  • 聊聊vue集成sweetalert2提示组件的问题

    这篇文章主要介绍了vue 集成 sweetalert2 提示组件的问题,本文通过项目案例实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-11-03
  • JavaScript资源预加载组件和滑屏组件的使用推荐

    这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12