分类 编程语言 下的文章

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

注意： 体会 文本 标签 语言 几个词语

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

总结： HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

用文字来描述网页标签

Html的骨架

<HTML>
    <head>             
        <title></title>    
    </head>    
    <body>    
    </body>
</HTML>

HTML标签的分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 <body>我是文字  </body>

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

比如  <br />

HTML标签关系

标签的相互关系就分为两种：

  1. 嵌套关系

     <head>  <title> </title>  </head>

  2. 并列关系

    <head></head>
<body></body>

    倡议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

## 文档类型<!DOCTYPE>

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

<meta charset="UTF-8" />
  • utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
  • gb2312 简单中文 包括6763个汉字
  • BIG5 繁体中文 港澳台等用
  • GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
  • UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话： 所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

白话，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签 (熟记)

单词缩写： head 头部. 标题 title 文档标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义： 作为标题使用，并且依据重要性递减,一个页面最好只出现一个<h1>有助于SEO优化。 h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

其基本语法格式如下：

<hn>   标题文本   </hn>

段落标签( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br/>

这时如果还像在word中直接敲回车键换行就不起作用了。

文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

标签显示效果
<b></b>和<strong></strong>加粗（推荐使用strong）
<i></i>和<em></em> 斜体（推荐使用em）
<s></s>和<del></del>删除线（推荐使用del）
<u></u>和<ins></ins> 下划线（推荐使用ins）

b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈.

标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取 键值对 的格式 key="value" 的格式

比如:

<hr width="400" />

属性 是 宽度

值 是 400

提倡： 尽量不使用 样式属性。

图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：
该语法中s r c属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />
属性属性值描述
srcURL图像的路径
alt文本图像不能现实的时候的替换的文字
title文本鼠标悬停的时候显示的内容
width像素（XHTML不支持%页面的百分比）设置图像的宽度
height像素（XHTML不支持%页面的百分比）设置图像的高度
border数字设置图像的宽度

链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə(r)] 。基本解释 锚, 铁锚 的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位 （难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
  <a href="#two">   

2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3>

base 标签 基本的

base 可以设置整体链接的打开状态

base 写到 之间

把所有的连接 都默认添加 target="_blank"

<base target="blank" />

特殊字符标签 （理解）

注释标签

在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

<!-- 注释语句 -->

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

路径(重点、难点)

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

根目录 当前目录

路径可以分为： 相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

  1. 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
  2. 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
  3. 图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

列表标签

无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

但是实际工作中， 较少用 ol

自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

表格 table(会使用)

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

注意：

中只能嵌套

标签，他就像一个容器，可以容纳所有的元素

表格属性

属性名含义常见的属性值
border设置表格的边框像素值
cellspacing设置单元格与单元格边框之间的空白距离像素值（默认是2像素）
cellspadding设置单元格内容与单元格边框之间的空白间距像素值（默认是1像素）
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式left、center、right

表头标签

表头一般位于表格的第日发出一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签&lt;td&gt;</td&gt;即可。

表格结构（了解）

 在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：：用于定义表格的头部。必须位于

标签中，一般包含网页的logo和导航等头部信息。：用于定义表格的主体。位于
标签中，一般包含网页中除头部和底部之外的其他内容。

表格标题

表格的标题： caption

定义和用法

caption 元素定义表格标题。

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格(难点)

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

 将多个内容合并的时候，就会有多余的东西，把它删除。    例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

 公式：  删除的个数  =  合并的个数  - 1

合并的顺序 先上 先左

总结表格

  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素，列的个数取决于行的单元格个数。

  4. 表格不要纠结于外观，那是CSS 的作用。

    ​

    表格的学习要求： 能手写表格结构，并且能合并单元格。

表单标签(掌握)

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：

   包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

    一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

  他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

属性属性值描述
typetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图形形式的提交按钮
file文件域
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked定义选择控件被选中的项
maxlength正整数控件允许输入的最多字符数

label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

  1. <select></select>中至少应包含一对<option></option>。
  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

  1. Action
    在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method
    用于设置表单数据的提交方式，其取值为get或post。
  3. name
    用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。

微信小程序的生命周期就是一个小程序从创建到销毁的整个过程。
在app.js的文件中，定义了一些生命周期的方法，是针对全局来使用的。

 App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。
onShow 生命周期函数--监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow。
onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台，会触发 onHide。
onError 错误监听函数--当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

在pages的页面的js文件中，仅对当前页面有效：

Page({
 
  onLoad: function () {
    console.log('onLoad')
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  }
})

onLoad 生命周期函数--监听页面加载。
onReady 生命周期函数--监听页面初次渲染完成。
onShow 生命周期函数--监听页面显示。
onHide 生命周期函数--监听页面隐藏。
onUnload 生命周期函数--监听页面卸载。

打开小程序后会依次执行onLoad，onReady和onShow方法，
前后台切换会分别执行onHide和onShow方法，
当小程序页面销毁时会执行 onUnload方法。

小编也是刚接触微信小程序，对于一些常见的视图建议大家参考手册就好啦，小编在这里整理了一下常见的细节。
大家都知道wxml文件都是现实内容的，对于传值过来的数据微信小程序采用的是双大括号来进行数据的绑定的，绑定的数据来源于js文件中的data数据。
wxml

<text>{{ test }}</text>

js

 data:{
    text : "这里是内容",
    btnText : "这是按钮的内容",
    show : false,
    news : ['aaa','bbb','ccc','ddd']
    
 }

按钮的点击事件
xml

 <button type="primary" bindtap="btnClick"> {{btnText}} </button>
  btnClick : function (){

     console.log("按钮被点击了")

     var isShow = this.data.show;
     console.log("isShow:"+isShow)


     var newsdata = this.data.news;
     newsdata.shift()

     this.setData({text:"这是一个新的内容...",show:!isShow,news:newsdata})

 }

渲染标签
if....else....

 <view  wx:if="{{show}}" >{{text}} 1 </view>
 <view  wx:else >{{text}} 2 </view>

for

<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="ix">

{{ix}} - {{itemx}}

</view>

模板导入
include

 <include src="../templates/header" />

import

 <import src="../templates/footer" />
 <template is="footer2" data="{{text:'导入设置的内容...'}}" />
<template name="footer1">
这是底部内容1  - {{text}}
</template>
<template name="footer2">
这是底部内容2  - {{text}}
</template>

include在导入的时候直接把内容加入到了文件中，import在导入的时候需要使用is来进行选择，而且可以传递数据。

watch

使用这个 属性，可以监视 data 中指定数据的变化以及路由等的变化，然后触发这个 watch 中对应的 function 处理函数。而且可以获取改变后和改变之前的值

watch: { 
        'firstname': function (newVal, oldVal) {
        
          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
          this.fullname = this.firstname + '-' + newVal
        }
      }

computed

在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

注意：

  • 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
  • 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

  • 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值。

    computed: { 
      'fullname': function () {
        console.log('ok')
        return this.firstname + '-' + this.middlename + '-' + this.lastname
      }
    }

watch、computed和methods之间的对比

  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

路由概念

  1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
  2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由。

vue 中使用 vue-router

  1. 导入 vue-router 组件类库：
    <script src="./lib/vue-router-2.7.0.js"></script>

  2. 使用 router-link 组件来导航
    router-link 默认渲染为一个a 标签,可以通tag属性来指定渲染的标签。

    <router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
  3. 使用 router-view 组件来显示匹配到的组件
    vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去.我们可以把 router-view 认为是一个占位符 .
    <router-view></router-view>

  4. 创建使用Vue.extend创建组件

     // 4.1 使用 Vue.extend 来创建登录组件
var login = Vue.extend({
  template: '<h1>登录组件</h1>'
});

// 4.2 使用 Vue.extend 来创建注册组件
var register = Vue.extend({
  template: '<h1>注册组件</h1>'
});

  5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter,在 new 路由对象的时候，可以为 构造函数，传递一个配置对象,route属性就是配置路由规则的地方，每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：属性1 是 path， 表示监听 哪个路由链接地址；属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件， component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；可以通过redirect指定默认路由

     var router = new VueRouter({
 routes: [
   { path: '/', redirect: '/login' },
   { path: '/login', component: login },
   { path: '/register', component: register }
 ]
 });

  6. 使用 router 属性来使用路由规则'

    var vm = new Vue({
  el: '#app',
  router: router // 使用 router 属性来使用路由规则
});

路由的传参

方式一：

 <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属 性 -->
   <router-link to="/login?id=10&name=zs">登录</router-link>
   <router-link to="/register">注册</router-link> 
var login = {
     template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
     data(){
       return {
         msg: '123'
       }
     },
     created(){ // 组件的生命周期钩子函数
       // console.log(this.$route)
       // console.log(this.$route.query.id)
     }
   }

方式2：

 <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
  <router-link to="/login/12/ls">登录</router-link>
  <router-link to="/register">注册</router-link>
 var login = {
     template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
     data(){
       return {
         msg: '123'
       }
     },
     created(){ // 组件的生命周期钩子函数
       console.log(this.$route.params.id)
     }
   }

路由的嵌套

使用 children 属性实现路由嵌套

 <div id="app">
  <router-link to="/account">Account</router-link>

  <router-view></router-view>
</div>

<script>
  // 父路由中的组件
  const account = Vue.extend({
    template: `<div>
      这是account组件
      <router-link to="/account/login">login</router-link> | 
      <router-link to="/account/register">register</router-link>
      <router-view></router-view>
    </div>`
  });

  // 子路由中的 login 组件
  const login = Vue.extend({
    template: '<div>登录组件</div>'
  });

  // 子路由中的 register 组件
  const register = Vue.extend({
    template: '<div>注册组件</div>'
  });

  // 路由实例
  var router = new VueRouter({
    routes: [
      { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
      {
        path: '/account',
        component: account,
        children: [ // 通过 children 数组属性，来实现路由的嵌套
          { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
          { path: 'register', component: register }
        ]
      }
    ]
  });

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
      account
    },
    router: router
  });
</script>

注意： 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址。

命名视图实现经典布局

标签代码结构：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>

js代码：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>

样式：

 <style>
    .header {
      border: 1px solid red;
    }

    .content{
      display: flex;
    }
    .sidebar {
      flex: 2;
      border: 1px solid green;
      height: 500px;
    }
    .mainbox{
      flex: 8;
      border: 1px solid blue;
      height: 500px;
    }
  </style>

ref和$.refs可以很方便的调用元素，以及组件里面里面的方法是属性

<div id="app">
    <input type="button" value="获取元素" @click="getElement" ref = "mybtn">

    <h3 id = "myh3" ref = "myh3">我是h3</h3>

    <hr>

    <login ref = "mylogin"></login>

</div>

<script>
    var login = {
        template:'<h1>登录组件</h1>',
        data(){
            return {
                msg:'登录组件的数据'
            }
        },
        methods:{
            show(){
                console.log('login里面的方法')
            }
        }
    }

    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            getElement() {
                //console.log(document.getElementById('myh3').innerText)
                //console.log(this.$refs.myh3.innerText)
                this.$refs.mylogin.show()

            }
        },
        components:{
            login
    }

    })

</script>

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：

  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

    全局组件定义的三种方式

  1. 使用 Vue.extend 配合 Vue.component 方法：

    var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

  2. 直接使用 Vue.component 方法：

    Vue.component('register', {
      template: '<h1>注册</h1>'
    });
    注意：如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接.
    Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的,第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容.

  3. 将模板字符串，定义到script标签种：

    <script id="tmpl" type="x-template">
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
 </script>

  4. 同时，需要使用 Vue.component 来定义组件：

    Vue.component('account', {
      template: '#tmpl'
    });
    注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素.也可以在页面中使用<template id="tmpl"></template>包裹模板内容，使用id进行调用。

组件中展示数据和响应事件

  1. 在组件中，data需要被定义为一个方法，例如：

    Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('点击了登录按钮');
        }
      }
    });
  2. 在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

组件的切换

  1. 使用flag标识符结合v-if和v-else切换组件

    页面结构：

    <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag"></my-com1>
    <my-com2 v-else="flag"></my-com2>
  </div>

    Vue实例定义：

    <script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

  2. 使用:is属性来切换不同的子组件,并添加切换动画
    Vue提供了 component ,来展示对应名称的组件,component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称.
    组件实例定义方式：

     // 登录组件
const login = Vue.extend({
  template: `<div>
    <h3>登录组件</h3>
  </div>`
});
Vue.component('login', login);

// 注册组件
const register = Vue.extend({
  template: `<div>
    <h3>注册组件</h3>
  </div>`
});
Vue.component('register', register);

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: { comName: 'login' },
  methods: {}
});

    使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

     <div id="app">
   <a href="#" @click.prevent="comName='login'">登录</a>
   <a href="#" @click.prevent="comName='register'">注册</a>
   <hr>
   <transition mode="out-in">
     <component :is="comName"></component>
   </transition>
 </div>

    附：添加切换动画样式：

     <style>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.v-enter-active,
.v-leave-active {
  position: absolute;
  transition: all 0.3s ease;
}

h3{
  margin: 0;
}
 </style>

父组件向子组件传值

父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用,子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的, 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的props 中的数据，都是只读的，无法重新赋值.而子组件自己的数据 data 上的数据，都是可读可写的。
组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

<script>
   // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
     el: '#app',
     data: {
       msg: '这是父组件中的消息'
     },
     components: {
       son: {
         template: '<h1>这是子组件 --- {{finfo}}</h1>',
         props: ['finfo']// 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
       }
     }
   });
  </script>

使用v-bind或简化指令，将数据传递到子组件中：

 <div id="app">
   <son :finfo="msg"></son>
 </div>

子组件向父组件传值

  1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
  2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称
    <son @func="getMsg"></son>

  3. 子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用.

    <div id="app">
<!-- 引用父组件 -->
<son @func="getMsg"></son>

<!-- 组件模板定义 -->
<script type="x-template" id="son">
 <div>
   <input type="button" value="向父组件传值" @click="sendMsg" />
 </div>
</script>
 </div>

 <script>
// 子组件的定义方式
Vue.component('son', {
 template: '#son', // 组件模板Id
 methods: {
   sendMsg() { // 按钮的点击事件
     this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
   }
 }
});

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
 el: '#app',
 data: {},
 methods: {
   getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
     alert(val);
   }
 }
});
 </script>

类名过渡

在进入/离开的过渡中，总共有6个累进行切换。

  1. v-enter：进入之前，元素的起始状态，此时还没有开始进入.这是一个时间点
  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。即：入场动画的时间段.
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。即：是动画离开之后，离开的终止状态，此时，元素动画已经结束了（这是一个时间点）
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。这是一个时间点.
  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

示例图：
transition.png

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。也可以<transition name="my">修改前缀名字。
.v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果

注意：

  • 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transition-group.
    如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性.
  • 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果.
  • 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签

  • 示例：

       <transition-group appear tag="ul">
     <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
       {{item.id}} --- {{item.name}}
     </li>
   </transition-group>

使用第三方CSS动画库

  1. 导入动画类库：

    <link rel="stylesheet" type="text/css" href="./lib/animate.css">

    2.定义 transition 及属性：

    <transition
  enter-active-class="fadeInRight"
  leave-active-class="fadeOutRight"
  :duration="{ enter: 500, leave: 800 }">
  <div class="animated" v-show="isshow">动画哦</div>
</transition>

    使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长.
    :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长

    使用钩子函数

  2. 定义 transition 组件以及三个钩子函数
    动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象

    <div id="app">
 <input type="button" value="切换动画" @click="isshow = !isshow">
 <transition
 @before-enter="beforeEnter"
 @enter="enter"
 @after-enter="afterEnter">
   <div v-if="isshow" class="show">OK</div>
 </transition>
  </div>
    • beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式.
  3. enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态.
  4. 动画完成之后，会调用 afterEnter

  5. 定义三个 methods 钩子方法：

    methods: {
     beforeEnter(el) { // 动画进入之前的回调
       el.style.transform = 'translateX(500px)';
     },
     enter(el, done) { // 动画进入完成时候的回调
       // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
       // 可以认为 el.offsetWidth 会强制动画刷新
       el.offsetWidth;
       el.style.transform = 'translateX(0px)';
       //这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
       done();
     },
     afterEnter(el) { // 动画进入完成之后的回调
       this.isshow = !this.isshow;
     }
   }

  6. 定义动画过渡时长和样式

    .show{
   transition: all 0.4s ease;
 }

v-for的列表过渡

  1. 定义过渡样式

    <style>
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
</style>

  2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

     <div id="app">
<input type="text" v-model="txt" @keyup.enter="add">

<transition-group tag="ul" name="list">
  <li v-for="(item, i) in list" :key="i">{{item}}</li>
</transition-group>
 </div>

  3. 定义 VM中的结构

     var vm = new Vue({
  el: '#app',
  data: {
    txt: '',
    list: [1, 2, 3, 4]
  },
  methods: {
    add() {
      this.list.push(this.txt);
      this.txt = '';
    }
  }
});

1.引入vue-resource

  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-resource-1.3.4.js"></script>

注意：vue-resource依赖于 Vue，所以vue-resource一定要在Vue的后面。

方法列表：

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

选项：

参数类型描述
urlstring请求的目标URL
bodyObject, FormData, string作为请求体发送的数据
headersObject作为请求头部发送的头部对象
paramsObject作为URL参数的参数对象
methodstringHTTP方法 (例如GET，POST，...)
timeoutnumber请求超时（单位：毫秒） (0表示永不超时)
beforefunction(request)在请求发送之前修改请求的回调函数
progressfunction(event)用于处理上传进度的回调函数 ProgressEvent
credentialsboolean是否需要出示用于跨站点请求的凭据
emulateHTTPboolean是否需要通过设置X-HTTP-Method-Override头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSONboolean设置请求体的类型为application/x-www-form-urlencoded

响应：

通过如下属性和方法处理一个请求获取到的响应对象：

属性类型描述
urlstring响应的URL源
bodyObject, Blob, string响应体数据
headersHeader请求头部对象
okboolean当HTTP响应码为200到299之间的数值时该值为true
statusnumberHTTP响应吗
statusTextstringHTTP响应状态
方法类型描述
text()约定值以字符串方式返回响应体
json()约定值以格式化后的json对象方式返回响应体
blob()约定值以二进制Blob对象方式返回响应体

例子：
get请求：

this.$http.get('/get').then(function (result) {
            // 通过 result.body 拿到服务器返回的成功的数据
            // console.log(result.body)
          })

post请求：

this.$http.post('/post', {}, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })

注意：通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

JSON请求

this.$http.jsonp('/jsonp').then(result => {
            console.log(result.body)
          })

定义：
全局的自定义指令：

Vue.directive('focus', {
  inserted: function (el) {
 
  }
})

私有的自定义属性：
组件中接受一个 directives 的选项：

directives: {
  focus: {
    inserted: function (el) {
      
    }
  }
}

调用：v-指令名

钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

注意：自定义指令里面的样式样，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式。将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素。

这个 function 等同于 把 代码写到了 bind 和 update 中去

function (el, binding) {
         
}
  1. 1
  2. ...
  3. 10
  4. 11
  5. 12
  6. 13
  7. 14
  8. 15
  9. 16
  10. ...
  11. 36