【4858美高梅】杰出1页纸,01Vue数据双向绑定

By admin in 4858美高梅 on 2019年4月21日

Vue作为前端MV*架构,Vue.js (读音 /vjuː/,类似于 view)
是1套营造用户分界面包车型地铁渐进式框架。与其余重量级框架差别的是,Vue
采取自底向上增量开垦的宏图。

Vue作为前端MV*架构,Vue.js (读音 /vjuː/,类似于 view)
是壹套营造用户分界面包车型客车渐进式框架。与其他重量级框架区别的是,Vue
采纳自底向上增量开垦的准备。

 

Vue官网:

https://cn.vuejs.org/v2/guide/forms.html\#基础用法

【入门系列】

(一)  

(二)   

(三)   

(四) 

(五) 

【本文转自】

  

 

2.一. 什么是双向绑定?

Vue框架很核心的效应正是双向的数目绑定。
双向是指:HTML标签数据 绑定到
Vue对象,此外反方向数据也是绑定的。通俗点说正是,Vue对象的改观会直接影响到HTML的竹签的变迁,而且标签的扭转也会反过来影响Vue对象的品质的转移。
style=”font-size: 1六px;”>那样来讲,就干净变革了前头Dom的开辟方式,以前Dom驱动的开采格局尤其是以jQuery为主的支付时期,都以dom变化后,触发js事件,然后在事变中经过js代码获得标签的转移,再跟后台实行互动,然后依照后台再次回到的结果再立异HTML标签,分外的累赘。有了Vue那种双向绑定,让开发人士只必要关爱json数据的成形就可以,Vue自动映射到HTML上,而且HTML的变化也会光彩夺目回js对象上,开采格局直接变革成了前者由数量驱动的
开辟时代,远远屏弃了Dom开拓为主的时代了。

style=”font-size: 16px;”>4858美高梅 1

二.二. Vue绑定文本

数量绑定最遍布的款型就是使用 “Mustache”
语法(双大括号)的公文插值,例如模板引擎:handlebars中正是用的{{}}.
style=”font-size: 16px;”>创制的Vue对象中的data属性便是用来绑定数据到HTML的。参考如下代码:

Message: {{ msg }}
<script>
  var app = new Vue({         // 创建Vue对象。Vue的核心对象。
    el: '#app',               // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hello Vue!'   // message 自定义的数据
    }
  });
</script>

二.三. 绑定数据中使用JavaScript表明式

对于具有的数据绑定, Vue.js
都提供了完全的 JavaScript 表明式扶助。

Message: {{ msg + ' - ' + name }}
<script>
  var app = new Vue({         // 创建Vue对象。Vue的核心对象。
    el: '#app',               // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hi',              // message 自定义的数据
      name: 'flydragon'       // name自定义的属性,vue可以多个自定义属性,属性类型也可是复杂类型
    }
  });
</script>

结果:

Hi - flydragon

style=”font-size: 1陆px;”>当然Vue还能支撑表明中的任何计算、函数管理等。参考下边包车型大巴综合点的案例。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之数据绑定-表达式运算</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ msg + ' - ' + name }}
    <p>
      {{ isOk ? '123' : '456' }}
    </p>
    <p>我的年龄是: {{ age *2 }}</p>
  </div>



二.四. Vue属性绑定

style=”font-size: 16px;”>Vue中不可能直接行使{{ expression }} 语法举办绑定html的竹签,而是用它特有的v-bind指令(就是壹种写法,先依照格式走,具体指令是哪些能够连续再驾驭)。

绑定的语法结构:

<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
例如:
{{ menuName }}

参考如下代码案例:

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之数据绑定--属性绑定</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId">
      <a href="#" v-bind:class="MenuClass">首页</a>
      <a href="#" v-bind:class="MenuClass">产品</a>
      <a href="#" v-bind:class="MenuClass">服务</a>
      <a href="#" v-bind:class="MenuClass">关于</a>
    </div>
  </div>



二.五. 性格绑定简写

style=”font-size: 16px;”>由于v-bind 使用1贰分频仍,所以Vue提供了轻松的写法,能够去掉v-bind直接行使:即可。

例如:
<div :id="MenuContaineId">
等价于
<div v-bind:id="MenuContaineId">

2.6. 输出纯HTML

style=”font-size: 16px;”>由于Vue对于出口绑定的剧情做了提前encode,保险在绑定到页面上显得的时候不至于被xss攻击。但一些场景下,大家保险后台数据是平安的,那么大家将在在网页中体现原生的HTML标签。Vue提供了v-html指令。

<div id="app">
  <div v-bind:id="MenuContaineId" v-html="MenuBody">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue对象中绑定的数据
      MenuContaineId: 'menu',
      MenuBody: '<p>这里是菜单的内容</p>'
    }
  });
</script>

结果:

<div id="app">
  <div id="menu">
    <p>这里是菜单的内容</p>
  </div>
</div>

二.七. 样式绑定

style=”font-size: 1陆px;”>对于普通的属性的绑定,只可以用地点的讲的绑定属性的形式。而Vue专门加强了class和style的性质的绑定。能够有千头万绪的对象绑定、数组绑定样式和类。

贰.七.1. 绑定样式对象

style=”font-size: 1陆px;”>日常大家供给对体制进行切换,比如:div的展现和藏身,有些标签active等。Vue提供的靶子绑定样式的法子就很容做这几个职业。

代码:
<div v-bind:class="{ active: isActive }"></div>
解释:
当 isActive为 true时, div就会具有了active样式类,如果 isActive为false,那么div就去掉active样式类。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之绑定样式类</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <style>
  .active {
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:id="MenuContaineId" v-bind:class="{ active: isActive }">
      绑定颜色类
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   // data: 是Vue对象中绑定的数据
        MenuContaineId: 'menu',
        isActive: true
      }
    });
  </script>
</body>
</html>

贰.7.二. 错落普通的HTML标签样式类及绑定样式对象

v-bind:class 指令能够与普通的 class
属性共存。

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {                   // data: 是Vue对象中绑定的数据
      isActive: true,
      hasError: false
    }
  });
</script>

【4858美高梅】杰出1页纸,01Vue数据双向绑定。结果:

<div id="app">
  <div class="static active">
  </div>  
</div>

2.柒.3. 绑定data中的样式对象

style=”font-size: 16px;”>直接在html属性中的双引号内写对象,依旧很不爽,也远非智能提醒,很轻巧写错。
Vue能够让大家直接把绑定的class字符串指向data的叁个目标,那样就尤其有利了,既能够有智能提示,又有什么不可很复杂实行编写制定,不用忧虑烦人的""了。

<div id="app">
  <div class="static"
     v-bind:class="classObject">
  </div>
</div>
<script>
  var app = new Vue({         
    el: '#app',               
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  });
</script>

结果:

<div id="app">
  <div class="static active">
  </div>
</div>

二.七.肆. 绑定样式数组

style=”font-size: 1陆px;”>其实绑定数组,正是绑定样式对象的一而再,看官方网站的例证代码吧。

<div v-bind:class="[activeClass, errorClass]">

data: {
activeClass: ‘active’,
errorClass: ‘text-danger’
}

style=”font-size: 1陆px;”>当然还有诸多任何很风趣的支撑,就不赘述了。

例如:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">

二.7.伍. 内联样式绑定

style=”font-size: 1陆px;”>内联样式的绑定,万分周边于样式类的操作。v-bind:style
的目的语法11分直观——瞧着十三分像 CSS ,其实它是三个 JavaScript 对象。
CSS属性名能够用驼峰式(camelCase)或短横分隔命名(kebab-case)。

看个例证:

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
      vue 入门系列教程
    </div>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        size: 19,
        width: 200,
        bgcolor: 'red'
      }
    });
  </script>
</body>
</html>

自动抬高前缀
当 v-bind:style 使用须要一定前缀的 CSS
属性时,如 transform ,Vue.js 会自动侦测并累加相应的前缀。

二.8. 划算属性

style=”font-size: 16px;”>在做多少的绑定的时候,数据要拓展拍卖现在本领突显到html页面上,尽管vue提供了要命好的表明式绑定的点子,可是只好应对低强度的须求。比方:
把多少个日子依据规定格式实行输出,可能就必要我们对日期对象做一些格式化的出来,表达式恐怕就一无所得了。

style=”font-size: 1陆px;”>Vue对象提供的computed属性,能够让大家开辟者在里头能够停放一些艺术,补助大家绑定数据操作,那一个艺术能够跟data中的属性同样用,注意那个形式用的时候绝不加()
例子来了:

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed里面的函数可以直接当成data里面的属性用,非常方便,注意没有括号!!!-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年龄</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        birthday: 914228510514,     // 这是一个日期对象的值:1998年11月1日
        age: 19,
        address: '北京昌平区龙泽飞龙'
      },
      computed: {
        // 把日期换成 常见规格格式的字符串。
        getBirthday: function () {
          var m = new Date(this.birthday);
          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';
        }
      }
    });
  </script>
</body>
</html>

二.9. 绑定的多寡过滤器

style=”font-size: 1六px;”>过滤器本质就是数据在表现在此之前先举行过滤和筛选。官方网站络写的不利,小编就不再赘言,上边是官方网址的描述。

Vue.js
允许你自定义过滤器,被看作一些分布的文本格式化。过滤器应该被增多在
mustache 插值的尾巴部分,由“管道符”提示:

{{ message | capitalize }}
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

过滤器函数总接受表明式的值作为第三个参数。
new Vue({
// …
filters: {
capitalize: function (value) {
if (!value) return ”
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(一)
}
}
})
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因而尚可参数:
{{ message | filterA(‘arg一’, arg2) }}
那里,字符串 ‘arg1’ 将传给过滤器作为第壹个参数, arg二 表达式的值将被求值然后传给过滤器作为第三个参数。

二.十. 中坚:自动响应对象的转换到HTML标签

上边的事例都是数据对象是写死在开立的Vue对像上,这要是数据(data)发生改换时会怎么样呢?
让大家用chrome把地方例子的页面展开,并开垦发者工具调整台,输入:app.age = 20 会有怎么着情况时有发生啊?


 

style=”font-size: 16px;”>4858美高梅 2

style=”font-size: 16px;”>在页面中加多贰个开关,动态的加码年龄:

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <!-- computed里面的函数可以直接当成data里面的属性用,非常方便,注意没有括号!!!-->
        <td>生日</td><td>{{ getBirthday }}</td>
      </tr>
      <tr>
        <td>年龄</td><td>{{ age }}</td>
      </tr>      
      <tr>
        <td>地址</td><td>{{ address }}</td>
      </tr>
    </table>
  </div>





二.1一. 双向数据绑定

上边包车型地铁事例我们多数讲的是单向的 js对象向
HTML数据开始展览绑定,那HTML怎么着向js实行汇报数据吧?
HTML中唯有发挥能承受用户的输入,最简易的示范双向绑定的就是文本框了。

style=”font-size: 1陆px;”>Vue提供了三个新的指令:v-model进行双向数据的绑定,注意不是v-bind。

<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之htmlraw</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- v-model可以直接指向data中的属性,双向绑定就建立了 -->
    <input type="text" name="txt" v-model="msg">
    <p>您输入的信息是:{{ msg }}</p>
  </div>
  <script>
    var app = new Vue({         
      el: '#app',               
      data: {                   
        msg: '双向数据绑定的例子'
      }
    });
  </script>
</body>
</html>

style=”font-size: 16px;”>最后的结果即是:你退换input文本框的剧情的时候,p标签中的剧情会随之实行更换,哇是或不是很美妙呢…

style=”font-size: 1陆px;”>关于其余表单的绑定的语法小编就不赘述了,依旧参考官方网址吧,作者那里大多数例子也是根源官网。

2.1二. 多少绑定计算

style=”font-size: 1陆px;”>vue提供了大批量的绑定的语法和艺术,万分便宜大家开始展览数据的绑定,越发它是双向的多寡绑定,十分大的缩减了我们dom操作的劳动程度。大概你越是喜欢它了吧…

 

style=”font-size: 16px;”>Github地址:源码下载 

style=”font-size: 1陆px;”>其他详细的情况请参考:

style=”font-size: 16px;”>4858美高梅 3

Vue.js 和
angular.js同样也是三个客户端框架,利用H5自定义标签的力量,把多少和操纵通过js达成分离的功用

Vue
的宗旨库只关心视图层,它不只轻巧上手,还有利于与第一方库或既有等级次序整合。

Vue
的主题库只关怀视图层,它不只轻巧上手,还便宜与第3方库或既有品种整合。

撞击相当的大的便是freemarker,jsp那么些服务端模板技巧,利用客户端框架+Ajax、落成客户端层面包车型客车MVC,MVP,MVMM这么些形式。html和js,双向绑定。自此,服务端能够绝不再关切页面内容分发那些,只须求提供劳动接口,比如Rest

一面,当与单文件组件和 Vue
生态系统扶助的库组合使用时,Vue
也全然可认为复杂性的单页应用程序提供驱动。

另1方面,当与单文件组件和 Vue
生态系统协理的库组成使用时,Vue
也统统可感到复杂性的单页应用程序提供驱动。

1、规范用法

4858美高梅 4

4858美高梅 5

入门的 vue例子

大面积的三种多少绑定情势:

广阔的二种多少绑定情势:

4858美高梅 6

一 使用{{expression}},那种方式比较轻便。但是假设网速相当的慢,大概给用户观望{{expression}}的体验

一 使用{{expression}},那种办法比较轻易。可是假设网速比相当慢,或然给用户看到{{expression}}的体会

含蓄元素

  ,当然也得以和Angular同样投入2个v-cloak,使其在加载完后在拓展体现。那种表明式还有其它三种扩充:

  ,当然也得以和Angular同样插足1个v-cloak,使其在加载完后在进展体现。那种表达式还有其它三种扩展:

I、id 属性标注1个 app 名称 — 对应的 angular
对象就是ng-app/ng-controller???

  • {{*expression}}一次性绑定,前面就是expression中剧情有变化,展现也不会时有产生转移。
  • {{{expression}}}将expression中的内容转义成html,同时起到了js注入的难点。




    Document



    绑定:输入是啥,输出就是啥

    {{username}}


    一次性绑定,初始化绑定,之后即便是修改了,也不会发生变化了

    {{*username}}


    会将绑定内容转义成html

    {{{username}}}


  • {{*expression}}3回性绑定,后边正是expression中内容有变化,突显也不会时有爆发更换。
  • {{{expression}}}将expression中的内容转义成html,同时起到了js注入的题材。




    Document



    绑定:输入是啥,输出就是啥

    {{username}}


    一次性绑定,初始化绑定,之后即便是修改了,也不会发生变化了

    {{*username}}


    会将绑定内容转义成html

    {{{username}}}


II、定义三个 Vue 对象,当中 el属性 对应到 前边的id属性 (背后的逻辑即是document.getElementById())– 对应angular 就是 define???

二.行使标签

2.用到标签

III、Vue 中的数据存款和储蓄在 data属性中

  重要标签有v-model:进行双向数据绑定,注意那几个貌似是调整在input标签上,要是放置任何标签可能未有效应。

  主要标签有v-model:举办双向数据绑定,注意这些貌似是决定在input标签上,要是放置任何标签恐怕未有效应。

IV、使用数据对象{{}} — 那点和angular 是壹致性的

  • v-text:对应上边的{{expression}}
  • v-once:对应上边包车型大巴{{*expression}}
  • v-html:对应上边的{{{expression}}}




    v-model



    绑定:输入是啥,输出就是啥


    一次性绑定,初始化绑定,之后即便是修改了,也不会发生变化了


    会将绑定内容转义成html

    使用v-model进行数据绑定



  • v-text:对应上边的{{expression}}
  • v-once:对应上面的{{*expression}}
  • v-html:对应上边的{{{expression}}}




    v-model



    绑定:输入是啥,输出就是啥


    一次性绑定,初始化绑定,之后即便是修改了,也不会发生变化了


    会将绑定内容转义成html

    使用v-model进行数据绑定



V、对于 Vue data中的对象,Vue都直接代理 即 var v = new Vue 后 v.message
能够一向引用

此间只怕必要留意computed那个vue属性,一般情形expression表明式会产出vue.data中的字段,不过

4858美高梅 ,此间或许供给留意computed那个vue属性,一般情状expression表明式会现出vue.data中的字段,可是

Vue对象中的别的实例方法 v.$watch(‘obj’,function(old,new){});
监控属性值变化

compute也能够出现字段,比如:

compute也能够出现字段,举例:

2、概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>
<body>
    <div id="box">
        <p>a=>{{b}}</p>
        <!-- <p>b=>{{b}}</p> -->
        <input type="text" v-model="a" />
    </div>
</body>
<script type="text/javascript">
    // window.onload=function(){
        var vm=new Vue({
            data:{
                a:10
            },
            computed:{
                b:{
                    get:function(){
                        alert("调用了get方法"+this.a);
                        return parseInt(this.a)+2;
                    }
                }
            }
        }).$mount("#box")
    // }
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>
<body>
    <div id="box">
        <p>a=>{{b}}</p>
        <!-- <p>b=>{{b}}</p> -->
        <input type="text" v-model="a" />
    </div>
</body>
<script type="text/javascript">
    // window.onload=function(){
        var vm=new Vue({
            data:{
                a:10
            },
            computed:{
                b:{
                    get:function(){
                        alert("调用了get方法"+this.a);
                        return parseInt(this.a)+2;
                    }
                }
            }
        }).$mount("#box")
    // }
</script>
</html>

对应每3个模板框架,基础部分都急需领悟:
表明式;逻辑调节。掌握了那两有的,就可以切入这些模型,后续高等部分在应用中读书。

运转这么些事例的时候开掘,页面在加载{{b}}是会去调用b:get
方法,大家在vue定义的数据,vue底层都回来生成叁个set和get方法

运营这么些事例的时候开采,页面在加载{{b}}是会去调用b:get
方法,大家在vue定义的数量,vue底层都回去生成一个set和get方法

更主要的是,大致全数的模板框架那有的内容都有相似之处,精通三个就足以领悟绝大大多的使用

其一就像面向对象语言中的bean对象。展开调控输出一下vue对象,可以找到如下图的定义。

那几个就如面向对象语言中的bean对象。展开调控输出一下vue对象,能够找到如下图的定义。

I、表达式

4858美高梅 7

4858美高梅 8

— js的表达式全体支撑

asddsadasd
asddsadasd

4858美高梅 9

  

  

II、逻辑调整指令

a、决断逻辑 v-if 指令

4858美高梅 10

因而在 属性中 扩大 v-if 属性,假诺中间的表达式总结结果为真,则该
成分会插入到最后的页面中

b、循环逻辑 v-for 指令

4858美高梅 11

应用在性质中 扩大 v-for 属性,属性之中迭代语法 item in items
和js的迭代语法类似

3、绑定

绑定是贯彻MVMM/MVP3个骨干因素,通过修改
数据model部分的数码,能够实时联合浮动改动html中的数据,从而系统落成了决定,无需再特别做Controller的开荒,收缩了开辟开销

I、数据绑定 v-model指令

4858美高梅 12

— 那点和 angular 的 ng-model 是同样的

绑定的变量 class一,在分界面和数量js中双向绑定,一般用在表单成分比较多

II、属性绑定 v-bind指令

4858美高梅 13

— 那些和 angular的 ng-bind 也是均等的,v-bind: 能够缩写成 :

new Vue({

el: ‘#app’,

data:{

class1: false,

class2: true

}

});

1种是粗略的绑定表明式的值;

1种是绑定对象和数组(重要针对 class和style 属性)

{class1:true, class2:true} – 那一点类似于angular

[class1,class2]

除开,还足以选择 computed 重临值,只要重临值是切合如上格式的对象

4、逻辑-事件-控制

v-if/v-for
只是对分界面内容的简短调整,web开采有非常的大学一年级部分是事情相应调控,Vue模版使用什么来顶替js的onclick
那些事件管理呢

I、v-on 指令 + Vue 方法

4858美高梅 14

v-on 指令对常用的 html事件都足以操作,一般相应的函数都放在 methods中,
v-on: 能够缩写成 @

4858美高梅 15

v:on 对应js全体的 鼠标和键盘事件

II、其他Vue方法

a、过滤器 |

对应 angular ,能够兑现类似
管道的过滤效果,前多个管理结果,作为第三个参数字传送给后二个过滤器函数,对于过滤器必须运用
filters 来标注函数。

4858美高梅 16

4858美高梅 17

b、总计属性 computed

4858美高梅 18

和日常methods的差别是,直接运用 名称就能够,而methods要求 ()
才干同日而语艺术试行;其余,computed
的记录会缓存,直到信赖的数量发生变化,而methods每一趟调用都再次施行

伍、表单元素

注重通过v-model绑定表单控件的值

4858美高梅 19

比如 复选框

6、组件化

任何框架最后的杀伤力都以力所能及模块化,组件化,那是丰硕优秀首要的片段,Vue也不例外,上面看Vue怎样抽象封装成新的框架和零部件

组件化,一般包罗多少个部分:a、H5分界面上,使用的自定义标签和质量;b、js模版中,提供标签和质量的
html模版替换

I、组件化的一个例子

4858美高梅 20

II、组件化的步骤

一、注册八个零部件

a、全局组件 Vue.component

b、局地组件 在 new Vue 中 的 components 属性

new Vue({

components: {

‘runoob’: {template: ‘<  > 自定义组件 <>”}

}

})

二、使用 template 实行轮换 标签成分

3、父控件(外层) 传递数据给 子控件(内层),通过 props 传递数据

假诺传递的是静态数据举例字符串 间接采取 todo属性,比方todo=”aaa”;如若是动态数据,绑定的别样数据利用 v-bind:todo 绑定1个变量

四、子控件(内层) 传递数据给父控件(外层),通过事件来传递

行使 $on(eventName) 监听事件

4858美高梅 21

4858美高梅 22

4858美高梅 23

接纳 $emit(eventName) 触发事件

柒、自定义指令

Vue和AugularJS同样,也有自定义指令,但是功用却不平等,angularJS的自定义指令对应的是Vue的component
组件功用,通过自定义指令那样可以落成更多的三结合效应,比方能够在命令中定义本人的事件管理连串

和组件一样,也有全局和部分指令

Vue.directive(‘focus’, {});

directives: {focus:{});

4858美高梅 24

I、注册二个指令 directive

II、钩子(回调)函数 bind/inserted/update/componentUpdated/unbind

函数入参

el — 指令绑定的元素

binding — 获得绑定的指令的音信

vnode — vue编写翻译后的节点

采纳钩子函数用在曾几何时完毕指令的效益,若是不点名则有着时候都见效

III、通过函数获取的 el,bingding 对象落成相应的操作

8、别的关键文化

别的相近指令

v-show 指令

— 对比 angular 的ng-show

4858美高梅 25

福寿年高的功力和 v-if 类似,但背后的逻辑不通,v-if
是调控是不是插入该因素,而v-show 是迟早插入该因素,通过 display:none
样式调节展现

=

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有