• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程10:v-on绑定事件指令 和 v-model双向数据绑定指令

    vue开发教程10:v-on绑定事件指令 和 v-model双向数据绑定指令

    作者: 分类:vue开发 点击: 89 次
    wordpress CMS主题:ssmay主题

      vue框架是一个MVVM框架,也就是视图改变会影响模型,模型发生改变会影响视图,也就是双向数据互为影响,一变皆变。本章,我们将介绍vue框架的一个非常得要的指定——双向数据绑定指令 v-model,以及事件绑定指令v-on。

      1:v-on事件绑定指令。

      学过jquery的都知道,jquery事件绑定会用到一个关键字on,vue可能也是参考一下jquery吧,使用v-on绑定事件。

      案例:

      JS代码中添加:

      methods:{
      show_str(){
      alert("弹出弹窗。");
      }
      }

      模板代码中添加绑定事件:

      <button v-on:click="show_str">v-on绑定事件</button>

      v-on:click省略写法:

      <button @click="show_str">v-on绑定事件</button>

      show_str后面不能跟小括号(),这时,我们点这个按钮,就会是一个弹窗弹出。v-on可以绑定所有的事件。这里只以这个点击事件click作为演示。

      2:v-model双向数据绑定指令。

      如果你学习过angular,会知道angular有个双向数据绑定指令——ng-model。vue应该就是参照了angular,使用v-model指令来进行双向数据绑定。

      案例:

      data里声明一个属性:

      massage:'aaa',

      模板中双向数据绑定:

      <input v-model="massage" type="text">  【注:这里的massage不能用大括号括起来】
      <div>{{massage}}</div>

      这时,在input输入框中修改input框架的数据,massage属性的值会发生变化,这是视图变化影响了模型。massage属性值 改变后,div中的massage也跟着发生变化 ,这就是模型改变后,视图也发生改变。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809236989.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.