首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue第一天

Vue第一天

作者头像
DataScience
发布2019-12-30 17:47:47
2820
发布2019-12-30 17:47:47
举报
文章被收录于专栏:A2DataA2Data

本文标识 : 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>

具体案例请见次条哦!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-09-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 DataScience 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档