vue学习指南:第四篇(详细) - vue的 :class 和 :style
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的更多相关文章
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- vue学习指南:第九篇(详细) - Vue的 Slot-插槽
Slot v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...
- vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...
- vue学习指南:第一篇 - vue的介绍
三大主流框架: 1. Vue.js 是目前最火的一个前端框架,react是最流行的前端框架 (react除了开发网站,还可以开发手机app,Vue语法也是可以用于手机App开发的,需要借助于wexx) ...
- Vue学习【第四篇】:Vue 之webpack打包工具的使用
什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...
- SQL学习指南第四篇
SQL必知必会(第4版)学习笔记 插入数据 插入有几种方式: 插入完整的行 插入行的一部分 插入某些查询的结果(INSERT SELECT) 注意:省略列 如果表的定义允许,则可以在 INSERT 操 ...
- Java工程师学习指南(中级篇)
Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...
- RabbitMQ学习总结 第四篇:发布/订阅 Publish/Subscribe
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
随机推荐
- 重启电脑 wamp图标是橙色(未变绿)
记录一个错误: 修复系统漏洞后,重启电脑,wamp没有开机自启动,手动启动后发现,图标是大红色变成了橙色,也就是服务未完全启动(1/2)状态. ??? 但是我其实也不知道是哪个服务(Apache/My ...
- python if语法
1.查看数据类型 print(type(1)) 2.同类型:数字相加 ,字符串拼接 a=input("输:") print(int(a)+5) 3.单if条件语句 if if 3& ...
- python3基础学习(1)
python基础内容讲解主要内容: 1.使用编辑器(IDE) 2.第一个“hello world” 3.何所谓“变量” 4.python与其他主流语言输出对比 5.数据类型 6.python用作“计算 ...
- 通过GL函数处理图片以及其它相关功能
我们知道在屏幕后处理里面通过 Graphics.Blit 函数可以通过材质处理屏幕图片, 当我们想要处理一般图片的时候, 直接调用GL函数就行了, 按照习惯自己封装一个 Blit 方法 : ) { i ...
- Struts的增删改查
1.导入相关的pom依赖(struts.自定义标签库的依赖) pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...
- 初学JavaScript正则表达式(九)
分组:可以用 ( ) 来进行分组 一.Byron重复三次 Byron{3} --------- Byronnn 只是将紧挨着量词的字符重复 (Byron) ...
- Vue生命周期钩子---3
vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...
- Html学习之四(页面布局)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JWT签名算法中HS256和RS256有什么区别 转载
JWT签名算法中,一般有两个选择,一个采用HS256,另外一个就是采用RS256. 签名实际上是一个加密的过程,生成一段标识(也是JWT的一部分)作为接收方验证信息是否被篡改的依据. RS256 (采 ...
- 开源规则引擎 drools
java语言开发的开源业务规则引擎 DROOLS(JBOSS RULES )具有一个易于访问企业策略.易于调整以及易于管理的开源业务规则引擎,符合业内标准,速度快.效率高.业务分析师或审核人员可以利用 ...