Vue2-黑马(二)

这篇具有很好参考价值的文章主要介绍了Vue2-黑马(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录:

(1)vue2-基础-属性绑定

(2)vue2-事件绑定

(3)vue2-双向绑定

(4)vue2-计算属性


(1)vue2-基础-属性绑定

Vue2-黑马(二)

 Vue2-黑马(二)

 属性与js数据绑定:Vue2-黑马(二)

v-bind:有一个简写方式:   :

Vue2-黑马(二)

 没有加冒号:显示里面的内容age:Vue2-黑马(二)

 (2)vue2-事件绑定

定义方法可以简写:

 Vue2-黑马(二)

 绑定事件:v-on:click鼠标单击事件

Vue2-黑马(二)

v-on:简写形式:@

Vue2-黑马(二)

 Vue2-黑马(二)

使用this代表方法中返回的数据  画出的部分对象

 Vue2-黑马(二)

 加:Vue2-黑马(二)

 减:

Vue2-黑马(二) 

 (3)vue2-双向绑定

不使用v-binid:而使用v-model

实现双向绑定:

Vue2-黑马(二)

 使用vue的调试工具检测js中的数据的改变:

Vue2-黑马(二)

Vue2-黑马(二) 

 改变值;Vue2-黑马(二)

 Vue2-黑马(二)

Vue2-黑马(二) 

Vue2-黑马(二) 

Vue2-黑马(二) 

 Vue2-黑马(二)

 Vue2-黑马(二)

 Vue2-黑马(二)

v-model:主要跟表单标签配合使用,其他表签不使用,如果是文本内容使用{{}}   ,如果是文本属性使用v-bind:         

 文章来源地址https://www.toymoban.com/news/detail-412641.html

(4)vue2-计算属性

我们说过{{}} 里面只能跟一个属性,但是我们可以把它当成一个表达式,他们都是字符串,可以做字符串拼接,整个字符串做拼接:

Vue2-黑马(二)

 Vue2-黑马(二)

计算属性:computed:

Vue2-黑马(二)

 Vue2-黑马(二)

 

 计算属性:优势:它是有缓存的,就是数据没有发生变化,在第一次使用的时候才会计算执行,后面几次,不会调用这个而是走缓存:

Vue2-黑马(二)

只打印一次进入了:第一次计算出来,第二次不用重新计算,而是走缓存 

Vue2-黑马(二) 

 

到了这里,关于Vue2-黑马(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2-黑马(十一)

    目录: (1)vue2-联调准备  (2)vue2-登录实战-国际化  (3)vue2实战-登录-login-index.vue (1)vue2-联调准备 登录这个请求,并不是发给后台的,现在还没后台,它发给9527,9527里面也有一段代码,返回假的moke响应,包含了登录的模拟数据 它会找到mock文件夹:响应的代码在us

    2023年04月16日
    浏览(24)
  • Vue2-黑马(七)

    目录: (1)router-路由嵌套  (2)router-路由跳转  (3)router-导航菜单 (1)router-路由嵌套 我们有这样的需求,我们已经显示了主页,但是主页里面有,更多的功能,比如说多个管理:学生管理、老师管理等等 这些功能也是一个个组件,这些组件需不需要再主页的某个区域

    2023年04月19日
    浏览(21)
  • Vue2-黑马(二)

    目录: (1)vue2-基础-属性绑定 (2)vue2-事件绑定 (3)vue2-双向绑定 (4)vue2-计算属性 (1)vue2-基础-属性绑定    属性与js数据绑定: v-bind:有一个简写方式:   :  没有加冒号:显示里面的内容age:  (2)vue2-事件绑定 定义方法可以简写:    绑定事件:v-on:click鼠标

    2023年04月14日
    浏览(19)
  • Vue2-黑马(五)

    目录: (1)vue2-组件重用 (2)vue2-element ui安装 (3)vue2-ElementUI-table (4)Element-ui-分页pagination (1)vue2-组件重用 页面上有很多的html和js代码,具备一定的重用性,我们可以把这些代码集中起来,形成一个可重用的组件 可重用的组件放到这个里面:components 定义子组件: 

    2023年04月12日
    浏览(19)
  • vue2双向数据绑定基本原理

    vue2的双向数据绑定(又称响应式)原理,是通过数据劫持结合发布订阅模式的方式来实现的,通过 Object.defineProperty() 来劫持各个属性的 setter , getter ,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。也就是说数据和视图同步,数据发生变化,视图跟着变化

    2023年04月10日
    浏览(54)
  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(76)
  • vue2和vue3关于class类的绑定以及style的绑定的区别

    本篇为个人笔记 例如:单个类绑定 多个类绑定:   例如:单个绑定  多个绑定

    2024年02月16日
    浏览(43)
  • react和vue2/3父子组件的双向绑定

    目录 Vue3 父子传值:props(attrs)/emit 父传子 props 父child :属性名=\\\"变量\\\" 子props=defineProps({属性名:type...}) attrs父作用域(除 class、 style 、 props )属性集合 父child :属性名=\\\"变量\\\",属性名=\\\"常量\\\" 子 attrs = useAttrs() 子传父emits+@=v-on: 父child @事件名\\\"=\\\"parentClick\\\",parentClick(msg) 子emi

    2024年02月16日
    浏览(45)
  • vue2:鼠标触发各类事件

    移动端 pc端 template javascript 如何获取鼠标的x,y坐标 这就要利用事件回调中的 e.targetTouches 属性了。 如何获取鼠标每次移动的差值 当鼠标移动时,如何计算得出,当前鼠标位置与上一次鼠标位置的差值呢? 例如,当前鼠标位置为(1,2),上一次鼠标位置为(0,0),差值就是: x:1,

    2024年04月13日
    浏览(41)
  • Vue2:解绑自定义事件

    上一节,我们学习了,自定义事件绑定到组件上。 现在,我们学习下,给组件解绑自定义事件的几种方法。 首先,我们试想一下,这个功能的适用场景? 一般同学都会想,解绑?那就注释掉代码就是了呗。 这个办法也可以,但是,不好,因为每次都要修改代码。 现在,我

    2024年01月18日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包