• 76072

    文章

  • 703

    评论

  • 18

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

Vue学习01

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

我的github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo

一、基本代码

1.导入Vue包,导包后浏览器内存中会产生一个Vue的构造函数

2.创建一个Vue实例

3.el 表示,当前我们new的这个Vue实例,要控制页面上的哪个区域

4.date属性中存放的是el中要用到的数据

5.传递内容插值表达式{{msg}}

 通过Vue提供的指令很方便的就能把数据渲染到页面,程序员不在手动操作DOM元素

二、v-cloak指令

1.使用v-clock指令设置样式可以解决插值表达式闪烁的问题

2.默认v-text没有闪烁问题
   v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符不会把整个元素的内容清空

3.v-html会以html形式传递内容,会覆盖元素中原本的内容

三、v-bind

v-bind: 是Vue中提供用于绑定属性的指令
v-bind: 指令可以被简写为 :要绑定的属性
v-bind 中可以写合法的JS表达式

四、Vue中提供了 v-on: 事件绑定机制 简写是@

五、事件修饰符

    使用.stop阻止冒泡

    使用 .prevent 阻止默认行为

    使用 .capture 实现捕获事件的机制

    使用 .self 实现只有点击当前元素的时候才会触发事件处理函数

    使用 .once 只触发一次事件处理函数

     .self和.stop 的区别:.self 只会阻止自己身上冒泡的触发,并不会真正阻止冒泡的行为

六、v-model

    v-bind 只能实现数据的单向绑定,从m自动绑定到v,无法实现数据双向绑定

    v-model 指令,可以实现表单元素和 Model中数据的双向绑定
    注意: v-model 只能运用在 表单元素中

七、Vue中样式

    第一种使用方式,直接传递一个数组,注意:这里的class需要使用v-bind做数据绑定

    第二种方式,在数组中使用三元表达式

    第三种方式,在数组中使用对象来代替三元表达式

    第四种方式,在为class使用v-bind 绑定对象的时候,对象的属性是类名属性的值是一个标识符
 


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

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

自定义皮肤
注册梁钟霖个人博客