文档章节

Vue学习01

zhang_l
 zhang_l
发布于 11/19 15:09
字数 802
阅读 17
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我的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  注意:这里的class需要使用v-bind做数据绑定

第一种使用方式,直接传递一个数组

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

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

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

八、Vue中样式-style

第一种方式:直接在元素上通过 :style 的形式书写样式对象 <h1 :style="{ color:'red','font-weight':200 }">这是一个h1</h1>

//属性中如果有横线要将属性加单引号

第二种方式:1.将样式对象直接定义到data中,2.直接引用到 :style 中

1.

data:{
         styleObj1:{ color:'red','font-weight':200 }
         }

2.<h1 :style="styleObj1">这是一个h1</h1>

第三种方式:在 :style 中通过数组,引用多个data中的样式对象

<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>

data:{
                    styleObj1:{ color:'red','font-weight':200 },
                    styleObj2:{ 'font-style':'italic' }
         }

© 著作权归作者所有

上一篇: Java 集合框架图
下一篇: xml解析
zhang_l
粉丝 0
博文 5
码字总数 18995
作品 0
沈阳
私信 提问
【Vue 牛刀小试】:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

系列目录地址 一、基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的使用(posted at 2018-11-02) ...

墨墨墨墨小宇
07/03
0
0
【Ts重构Vue】00-Ts重构Vue概要

为什么重构 本科机械设计制造及其自动化,16年稀里糊涂的进了一家干变厂,17年自学了大半年,18年正式跨行来到前端。工作中主要写业务代码,很少涉及造轮子工作,一直希望能够提高编程能力。...

峡迩
08/27
0
0
vue项目如何刷新当前页面的方法_vue.js_脚本之家

vue项目如何刷新当前页面的方法 更新时间:2018年05月18日 16:41:06 作者:敲代码的小老头 我要评论 这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,...

这篇文章主要介绍了vue项目如何刷新当前页面的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2018/07/30
0
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
05/22
0
0
【Vue.js 牛刀小试】:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

系列目录地址 一、基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的使用(posted at 2018-11-02) ...

墨墨墨墨小宇
06/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql免安装

参考:http://blog.csdn.net/qq_28569585/article/details/79072805 [mysqld]#设置mysql密码为空#skip-grant-tables#设置3306端口 port = 3306# 设置mysql的安装目录 basedir=E...

秋默
2分钟前
1
0
立足于SpringCloud.H + Netflix-Ribbon + Hystrix断路器(9)

《SpringCloud.H心法总纲》 继续上一篇,接下来Springcloud配置Netflix-Ribbon集成Hystrix断路器的功能。 1、添加依赖 <!--使用hystrix,测试断路器--><dependency> <groupId>org.spr......

木九天
3分钟前
1
0
Dropbox怎么共享文件?Dropbox共享文件操作

Dropbox网盘是国外的一项云存储服务,这意味着即使您使用的是其他设备,您也可以将文件复制到云中并在以后访问它们,目前支持PC、Android和MAC三大平台,为用户带来最精准的资源传输工作。就...

坚果云
5分钟前
1
0
Vant Weapp 1.0 正式版发布

1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 ...

有赞coder
7分钟前
1
0
VCF文件格式详解

VCF文件全称为Variant Call Format,表示基因组的变异信息,通常为GATK和Samtools软件处理所得到。 VCF文件大致可以分为两个部分: 1、以##开头的头文件信息 ##fileformat=VCFv4.2##FILTER...

悲催的古灵武士
7分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部