1. :class = “a”

说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值

2. :class = “{ active:isactive }”

Active的存在取决于 isactive的值,为true就说明存在,为false就说明不存 在。

3. :class = [“a”,”b”]

注意 在数组中元素带不带引号的问题。带了说明是类名,不带就是data中      的属性对应的值。

:style

在vue中 style 是一个对象

1. 注意 style中是一个对象,中间用,隔开。前者是style属性,值是data      中对应的数值

总结 vue 基础知识点:

1. Mvc 和 MvvM的区别?

Mvc:后台开发的一个概念。它是站在整个项目角度来考虑项目,

MvvM:前端开发的一个概念。MvvM 只考虑前端页面,把前端页面分 model,vue,和vm。其中 vm 是核心,它是我们的调度者,离开 vm MvvM所有优势都没了,vm提供了一个很重要的功能是:双向数据绑定

2.  基本指令 插值表达式: v-cloak  v-text  v-bind(缩写是:)  v-on(缩写是@)  v-model  v-for  v-if  v-show

3.  事件修饰符:.stop  .prevent  .capture  .self  .once

4.  el:指定要控制的区域。 data是个对象:指定了控制区域要用到的数据。  methods 虽然带个s后缀,但是是个对象。这里可以自定义方法

5.  在vue实例中,如果想访问 data 中的数据,或者要访问 methods 中的方法,必须带 this

6.  在v-for中 要会使用 key 属性(只接受 string / number)

7.  v-model 只能应用于表单元素

8.  在 vue 中绑定样式,两种方式:v-bind:class, v-binf:style

作者:晋飞翔

手机号(微信同步):17812718961

希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议

vue学习指南:第四篇(详细) - vue的 :class 和 :style的更多相关文章

  1. vue学习指南:第二篇(详细Vue基础) - Vue的指令

    一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...

  2. vue学习指南:第九篇(详细) - Vue的 Slot-插槽

    Slot  v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...

  3. vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )

    导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...

  4. vue学习指南:第一篇 - vue的介绍

    三大主流框架: 1. Vue.js 是目前最火的一个前端框架,react是最流行的前端框架 (react除了开发网站,还可以开发手机app,Vue语法也是可以用于手机App开发的,需要借助于wexx) ...

  5. Vue学习【第四篇】:Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  6. SQL学习指南第四篇

    SQL必知必会(第4版)学习笔记 插入数据 插入有几种方式: 插入完整的行 插入行的一部分 插入某些查询的结果(INSERT SELECT) 注意:省略列 如果表的定义允许,则可以在 INSERT 操 ...

  7. Java工程师学习指南(中级篇)

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  8. RabbitMQ学习总结 第四篇:发布/订阅 Publish/Subscribe

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  9. vue学习指南:第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

随机推荐

  1. 记录TortoiseGit=>https请求/ssh请求配置

    ssh C:\Program Files\Git\usr\bin\ssh.exe https C:\Program Files\TortoiseGit\bin\TortoisePlink.exe

  2. BayaiM__ORACLE之ASM概念 --V 1.0.0

    BayaiM__ORACLE之ASM概念                                --V 1.0.0 -------------------------------------- ...

  3. 跳跃空间(链表)排序 选择排序(selection sort),插入排序(insertion sort)

    跳跃空间(链表)排序 选择排序(selection sort),插入排序(insertion sort) 选择排序(selection sort) 算法原理:有一筐苹果,先挑出最大的一个放在最后,然后 ...

  4. itest(爱测试) 3.3.7 发布,开源BUG 跟踪管理& 敏捷测试管理软件

    v3.3.7 下载地址 :itest下载 itest 简介:查看简介 V3.3.7 增加了 5个功能增强,和8个BUG修复 ,详情如下所述. 5个功能增强 :(1)任务看板中,除了显示任务外,增加测试 ...

  5. Java学习路线|转至CodeSheep

    Java学习路线 基础知识 . 基本语法 基本网络知识:tcp/ip http/https 工具方面 . 操作系统:linux (CentOS\Ubuntu\Fe..) 代码管理:svn/git 持续 ...

  6. pytest-2:allure 的安装、使用

    版本对应: python3.4==>allure-pytest2.7.0 python3.6==>allure0pytest2.8.6 环境安装: 1.先安装好对应的python,准备好p ...

  7. 全网最新方法:win10下如何安装和配置64位JDK-13

    1.下载JDK-13 下载链接:https://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装JDK-13 双击下图的 ...

  8. 线程让步yield

    一.yield()的作用 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并不能保证在当前线程调用yield()之后,其 ...

  9. FT_Get_Var error on comiling

    [Julian@julian-linux-t450 gtk]$ gcc `pkg-config --cflags gtk+-.` -o exam00 exam00.c `pkg-config --li ...

  10. AtCoder Beginner Contest 139F Engines

    链接 problem 给出\(n\)个二元组\((x,y)\).最初位于原点\((0,0)\),每次可以从这\(n\)个二元组中挑出一个,然后将当前的坐标\((X,Y)\)变为\((X+x,Y+y)\ ...