专栏首页A2DataVue第一天

Vue第一天

本文标识 : V00003

本文编辑 : Jack 风

编程工具 : Vscode

阅读时长 : 4分钟

话不多说,直入主题。 先来看一下,看完这篇文章,你可以了解学到什么?

本章知识点

事件修饰符

V-Bind

V-model

vue-样式

class-样式

style样式

制作简易计算器

1、事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事业

.capture 添加事件倾听器时使用事件捕获模式

.self 只当事件在该元素本身

.once 事件只触发一次

2、V-Bind

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

3、V-model

V-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定。

注意:使用 V-model 只能运用在表单元素中。

4、Vue样式

使用class样式

(1)数组

<h1 :class="['red', 'thin']">欢迎H1</h1>

(2)数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">关注H1</h1>

(3)数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">公号的H1</h1>

(4)直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">A2Data H1</h1>

style样式使用(head中)

    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;

        }

        .italic {
            font-style: initial;
        }

        .active{
            letter-spacing: 0.5em;
        }

    </style>

效果如下

<h1> 这是一个H1,是不是很大啊 </h1>
        <h1 class="red thin"> 这里配备了 class</h1>
<!-- 第一种使用方式,直接传递一个数组,注意,这里的class  需要使用 v-bind做数据绑定 -->

        <H1 class="['thin','italic']"> 这里传递个数组吧 </H1>

                <!-- 在数组中使用三元表达式 -->
        <h1 class="['thin','italic',flag?'active':'']" > 这里是三元表达式</h1>


            <!-- 在数组中使用 对象来代替三元表达式,提高代码的可读性 -->
    <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1,大到你无法想象!!!</h1>

    <!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号;  属性的值 是一个标识符 -->
    <h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!</h1>

具体案例请见次条哦!

本文分享自微信公众号 - DataScience(DataScienceTeam),作者:Jack 风

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 多表操作之列关联(一)

    上文介绍了相对简单的《多表操作之行关联》,本文则分享一小部分有关多表操作的列关联知识。其较于前者,明显更为复杂,其主要关键词为 JOIN,这也是在查询中非常常见...

    DataScience
  • Linux 基本命令

    · 正 · 文 · 来 · 啦 · Linux入门 / ----- 根目录 /bin 二进制可执行命令 /dev 设备特殊文件 /etc...

    DataScience
  • cloudera 第一天

    #配置文件设置 配置文件存在两个地方 ##/etc/default/impala

    DataScience
  • 11. Vue 中通过v-bind属性绑定为元素,设置class类样式

    因为v-bind的绑定的内容是js表达式,所以传递的参数是一个字符串数组([ 'red', 'thin', 'italic', 'active' ]),浏览器显...

    Devops海洋的渔夫
  • vue.js 初体验:Chrome 插件开发实录

    通过一个Chrome插件的开发,来领略下vue.js的魅力。顺便也来了解下Chrome插件开发的一些基本知识。在日常工作中,开发一些小工具可以大大的提高我们的工...

    陈纬杰
  • 如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

    双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时、数字增长等。相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTM...

    Nealyang
  • vuejs初体验-Chrome插件开发实录

    腾讯ISUX
  • 【JavaScript 理论知识】VUE.JS之初体验:Animate.css封装!

    对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用。 image.png 前言...

    Levi.Ackermann
  • 大数据对恋爱、亲密关系和行为的影响

    大数据文摘
  • Cocos Creator v2.3.4 正式接入腾讯云服务

    在激烈的市场环境下,很多游戏都有对云服务的需求。2019 年底,Cocos 与腾讯云正式宣布达成战略合作,双方聚势共赢,共同探索提升游戏开发工作流的效率,把游戏...

    陈皮皮

扫码关注云+社区

领取腾讯云代金券