Vue的学习笔记(中篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:Vue的学习笔记(上篇)。这篇文章我们继续捋一捋~

二、Vue中使用样式class

第一种使用方式,传递一个数组,这里的class需要使用v-bind的数据绑定;

<h1 :class="['thin', 'italic']">hello world1!</h1>

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

<h1 :class="['thin', 'italic', flag?'active':'']">hello world2!</h1>

第三种使用方式,在数组中使用对象来代替三元表达式,来提高代码的可读性;

<h1 :class="['thin', 'italic', {'active':flag} ]">hello world3!</h1>

在为class使用v-bind绑定对象时候,对象的属性是一个类名,由于对象的属性可以带引号,也可以不带,属性的值是一个标识符;

<h1 :class="classObj">hello world!</h1>

在css的样式代码如下图:

在js的代码如下图

效果图如下图:

三、Vue中样式style:vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种使用方式是将键值对的对象写在data中,直接的动态绑定;

<h1 :style="styleObj1">The first H!!</h1>

第二种使用方式是多个键值对对象,使用数组方式,依次写入;

<h1 :style="[ styleObj1, styleObj2 ]">The first H1!!</h1>

在js的代码如下图:

效果图如下图:

四、v-if和v-show的使用

v-if的特点:每次都会重新删除或创建元素,有较高的切换性能消耗。

v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式,有较高的初始渲染消耗。

v-if和v-show的使用:

如果元素涉及到频繁的切换,最好不要使用 v-if, 而是使用 v-show,如果元素可能永远也不会被显示出来被用户看到,则使用v-if。

1.在html代码中,如以下的代码:

<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

2.在data中定义一个flag,如以下的代码;

data(){
      return{
        flag: false,
  }
}

3.效果图如下图:

五、总结

1.在vue中使用样式class,有三种方式传递一个数组、数组中的三元表达式、使用对象来代替三元表达式,在为class使用v-bind绑定对象,对象属性是一个类名,属性的值是一个标识符。

2.在vue中使用样式style,vue中样式动态绑定style,对象是不需要键值对的集合,有两种方式将键值对的对象写在data中直接的动态绑定、多个键值对对象,使用数组方式,依次写入。

3.vue-show本质是标签display设置为none,控制隐藏,vue-if是动态的向DOM树内添加或者删除DOM元素。

4.代码比较简单,希望对你有帮助!

手把手教你使用CSS3为文本和元素实现添加阴影效果

使用CSS3,你可以为文本和元素添加阴影。

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性

Chrome

Firefox

Safari

Opera

IE

text-shadow

4.0

10.0

3.5

4.0

9.5

box-shadow

10.0 4.0 -webkit-

9.0

4.0 3.5 -moz-

5.1 3.1 -webkit-

10.5

二、CSS3 阴影的文字特效

CSS代码:

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>
  <h1>文本阴影效果!</h1>


  <p><b>注意:</b> IE9和更早的版本, 不支持text-shadow属性.</p>
</body>
</CSS>

CSS3 文本阴影

CSS3 text-shadow 属性应用阴影到文本上.

在简单的用法, 你可以在水平方向设置阴影(2px)和垂直方向设置阴影(2px):

h1 {
    text-shadow: 2px 2px;
}

添加一个颜色到阴影:

h1 {
    text-shadow: 2px 2px red;
}

显示一个带有黑色阴影的白色文本:

 h1 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

下面的例子显示了红色霓虹灯的阴影:

  h1 {
        text-shadow: 0 0 3px #FF0000;
    }


多重阴影

要在文本中添加多个阴影,可以添加逗号分隔的阴影列表。

下面的实例显示了一个红色和蓝色的霓虹灯阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000;
}

下面实例显示了一个白色文本带有黑色,蓝色和深蓝色阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}


三、box-shadow 属性

CSS3 box-shadow 属性应用阴影到元素上.

在最简单的用法中,只指定水平阴影和垂直阴影:

一个黄色的 <div> 元素使用一个黑色box-shadow

   div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px;
    }

下一步,添加一个颜色到阴影,对阴影添加模糊效果:

一个黄色的 <div>元素带模糊红/灰 box-shadow。

 div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }

案例

添加阴影到 ::before 和 ::after 伪类中, 来创建一个有趣的效果。

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #boxshadow {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 10px;
      background: white;
  }


  /* Make the image fit the box */
  #boxshadow img {
      width: 100%;
      border: 1px solid #8a4419;
      border-style: inset;
  }


  #boxshadow::after {
      content: '';
      position: absolute;
      z-index: -1; /* hide shadow behind image */
      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      width: 70%;
      left: 15%; /* one half of the remaining 30% */
      height: 100px;
      bottom: 0;CSS
  }
</style>
</head>
<body>
  <div id="boxshadow">
    <img src="img/fy_indexBg.jpg" alt="Norway" width="600" height="400">
  </div>
</body>
</CSS>             

四、总结

本文基于CSS基础,使用CSS语言。介绍了有关CSS阴影效果的应用,从基础的文本阴影入手, 对CSS常见的阴影表示效果都做了一一的讲解。通过一个个实例的演示,实例运行的效果图。希望能够帮助你更好的学习CSS。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

一篇文章教会你使用HTML5加载音频和视频

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

【二、嵌入视频】

下面是在 Web 页面中嵌入视频文件最简单的形式:

 <video src="img/sounds/mu04.mp3"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

  1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
  2. mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/3.mp4" type="video/ogg" />
       <source src="img/sounds/3.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

【四、嵌入音频】

HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

<audio src="img/sounds/mu04.mp3" controls autoplay>
    Your browser does not support the <audio> element.   
</audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/mu04.mp3" type="video/ogg" />
       <source src="img/sounds/mu04.mp3" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章教会你使用html+css3制作炫酷效果

【一、项目背景】

在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些。比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容。这种效果该怎么做呢?

今天教大家用简单的html+css3结合制作艺龙的页面效果。

 

【二、项目准备】

1、图片:新建img文件,准备自己喜欢的五张图,保存在文件夹。

2、软件:Dreamweaver

 

【三、项目目标】

运行时:图片显示缩略图。文字显示在上面。

点击时:把对应的图片显示并放大,点击文字有详细的介绍。

 

【四、项目实现】

1、创建div 存放图片和文件,添加class属性。

<body>
<div  class="show">
<div class="wap">
  <div class="box" >
    <img src="images/img1.jpg">
    <span class='ba'>
  </div>
  <div class="box">
    <img src="images/img2.jpg">
    <span class='ba'></span>
    
  </div>
  <div class="box">
    <img src="images/img3.jpg">
    <span class='ba'></span>
  </div>
  <div class="box">
    <img src="images/img4.jpg">
    <span class='ba'></span>
  </div>
  <div class="box">
    <img src="images/img5.jpg">
    <span class='ba'></span>
  </div>
  </div>
</div>
</body>

2、添加文字。

<span class='ba'>功夫熊猫</span>
<span class='ba'>飞屋环游记</span>
<span class='ba'>汽车总动员</span>
<span class='ba'>玩具总动员</span>
<span class='ba'>机器人</span>

3、添加CSS样式

1)设置body的背景颜色为灰色。

body
  {
    background: #ccc;
  }

2)设置box的宽,边框,边框阴影,加载动画过渡效果。

.box{
    float: left;
    width: 160px;
    transition: all 0.5s;
    border: 1px solid #fff; #边框
    box-shadow: -5px 0px 10px 0px #000; #阴影
    position: relative;
  }

3)添加外层div 样式。添加overflow属性,防止内容溢出。

.wap{
    width: 999999999px;
    overflow: hidden;
  }
  .show{
    width: 800px;
    height: 320px;
    overflow: hidden;
    margin: 200px auto;
    box-shadow: 5px 5px 10px 4px #000;
  }

4、文字样式。

设置高,宽,行高设置跟高一样, 文字才能居中显示。设置文字背景颜色,大小。

.ba{
       width: 640px;
       height: 50px;
       line-height: 50px;
    color: #fff;
    background: rgba(0,0,0,0.5);
        bottom: 0;
        left: 0;
    position: absolute;
    text-indent: 2em;    
  }

5、添加鼠标移上去的效果样式。

 .ba:hover{    
       height: 320px;
       transition: all 0.5s;
  }
  .show:hover .box{
    width: 40px;

  }
    
  .show .box:hover{
    width: 640px;

  }

6、添加详细介绍文字。(text文件自取)。

 

【五、效果展示】

1、点击F12运行到浏览器。

2、点击图片放大。

3、点击文字,详细介绍。

 

【六、总结】

1、本项目,就鼠标点击事件遇到的一些难点进行了分析及提供解决方案。

2、html+css也可以做出网站页面的效果,在上面显示图片标题的地方不能用绝对定位,于是用的relative定位,这个地方是布局的核心部分,否则无法将文字放在图片之上。

3、按照操作步骤,自己尝试去做。自己实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

4、需要本文源码的小伙伴,后台回复“炫酷效果”四个字,即可获取。

****看完本文有收获?请转发分享给更多的人****

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

/1 前言/

selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,是爬复杂动态网页的必备工具。支持的浏览器包括IE,Mozilla Firefox,Safari,Google Chrome,Opera等。

这里分两个场景,给大家介绍Selenium爬动态网页小技巧。

/2 场景一:替换日期控件值/

以12306网站为例,如下图所示,按照正常的方法,我们首先要定位到时间元素,然后调用selenium的click()方法进行点击。

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

这种操作也是可行的。但是,过了一段时间,我们再次运行自动化代码的时候,就会发现功能运行不正常。因为日期更改后,日历控件布局发生了变化,而且操作起来很麻烦。

我们先看一下日期框的元素,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

重点看一下value=‘text’,这种属性值可以通过JavaScript来改变,三行代码就能解决这个问题,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

第一行是要输入的日期,第二行是JavaScript代码,“documen.getElementById”是通过HTML的“id”定位元素,通过改变该元素的“value”实现值的变化。

/3 场景二:动态网页自动下拉/

一些复杂的动态网页需要下拉才能把元素显示完全,例如腾讯视频主页,如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

如果需要自动爬取这类动态网页,我们同样可以执行JavasScript的方法来实现,用5行代码就可以连续滑动网页,将动态网页元素全部展示出来,代码如下图所示:

一篇文章带你学会两个场景下Selenium爬取动态网页小技巧

小编这里采取的分步下拉的方法,每次滚动1/10,“window.scrollTo”为向下滑动的命令,“document.body.clientHeight”为整个窗口的高度,“h=(i/10)”为每次滑动的高度。

效果演示如下:

/4 结语/

将JavaScript应用到selenium中可以帮我们解决很多问题,这里举两个小例子只是抛砖引玉,希望大家以后遇到selenium不好解决的问题时可以考虑在JavaScript身上寻找突破。

欢迎大家积极尝试,消耗在家的无聊时间。本文涉及的代码都上传到了github地址上,后台回复“selenium”这个单词即可获取代码。

——————— End ———————

往期精彩文章推荐:

看完本文有收获?请转发分享给更多的人

Python爬虫与数据挖掘

入群请在微信后台回复【入群】

在公众号后台回复下列关键词可以免费获取相应的学习资料:

Python、网络爬虫 、书籍、数据分析、机器学习、数据结构、

大数据、服务器、Spark、Redis、C++、C、php、

mysql、java、Android、面试题、课堂、其他