#
前端学习
html
1.
2. Web标准
2.1web标准构成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。
理想状态我们的源码： .html .css .js
直观上感受：
html基本标记
HTML 结构
1.1 HTML 文件基本结构
<html> <head> <title>第一个html程序</title> </head> <body> hello world! </body> </html>
html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性. body 标签中写的是页面上显示的内容 title 标签中写的是页面的标题 head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签) title 是 head 的子标签. head 是 title 的父标签. head 和 body 之间是兄弟关系.
（1.<meta>元素可以提供有关页面的原信息
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character encoding | 定义文档的字符编码 |
| content | some_text | 定义与http-equiv或name属性相关的原信息 |
| http-equiv | content-type expires refresh set-cookie | 把content属性关联到HTTP头部 |
| name | author description keywords generator revised other | 把content属性关联到一个名称 |
（2.页面描述
例：
<meta name = "description" constent = "免费的Web技术教程">
（3.页面定时跳转
<meta http-equiv = "refresh" content = ""秒;[url = 网址]/>
例：5秒刷新一次
<meta http-equiv = "refresh" content = "5"/>
网页的主体标记body
注意：标记不允许交替出现，否则会出现错误
<body>为主体标记，用于定义html文档所要的内容
页面注释标记<!-- -->
说明代码，浏览器不展示
HTML语法的变化
不区分大小写
允许属性值不加引号
允许部分属性值的属性忽略
特殊文本的添加
在HTML中，特殊符号以&为开头，后面跟相关的特殊字符
| 显示 | 说明 | HTML编码 |
|---|---|---|
| 半角大的空白 | &ensp | |
| 全角大的空白 | &emsp | |
| 不断行的空白格 |   | |
| < | 小于 | < |
| > | 大于 | > |
| & | &符号 | & |
| " | 双引号 | " |
| © | 版权 | © |
| ® | 已注册商标 | ® |
| ™ | 商标（美国） | &trade |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
尽量不要使用多个“ ”来表示多个空格，因为多数浏览器对空格的距离的实现是不一样的
使用HTML标记添加特殊文本
注：这些都是双标记
作用:
-
b: 加粗
-
u: 下划线
-
i: 倾斜
-
s: 删除线
建议不要使用, 因为这些标签没有语义
作用:
-
strong: 加粗
-
ins: 下划线
-
em: 倾斜
-
del: 删除线
文本排版
（单标记）换行：
（单标记）<hr/> 水平线标签
（双标记）<p>:段落标签
（双标记）<h1>~<h6>：标题标记
HTML 基础
2.1 注释标签
<!-- 注释 -->
2.2 标题标签
有六个,从 h1 ~ h6,数字越大,则字体越小
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
<h1> - <h6> 标签被用来定义 HTML 标题。 <h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。 在 HTML 4.01 中，<h1> - <h6> 的 "align" 属性已被废弃。在 HTML 5 中，<h1> - <h6> 元素的 "align" 属性不被支持。请使用 CSS 来排列元素 </h1>
2.3 段落标签
p标签表示一个段落
<p>第一段</p> <p>第二段</p> <p>第三段</p>
2.4 换行标签
br 是一个单标签,不需要结束标志.<br/>是规范写法.
2.5 格式化标签
| 描述 | 标记 |
|---|---|
| 加粗 | strong strong <p>strong</p> |
| 倾斜 | … … |
| 删除线 | … |
| 下划线 | … … |
<strong>加粗1</strong> <b>加粗2</b> <em>倾斜1</em> <i>倾斜2</i> <del>删除线1</del> <s>删除线2</s> <ins>下划线1</ins> <u>下划线2</u>
可以互相嵌套
####
2.6 图片标签
img 标签 必须带有 src 属性, 表示图片的路径 img 标签的其他属性
-
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
-
title: 提示文本. 鼠标放到图片上, 就会有提示.
-
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
-
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
<img src="地址xxx.xxx"alt="hello" title="gx" width="1000px" hight="1300px" border="5px">
网页中的图像<img>
在网页中插入图像 img 标签
属性 值 描述 alt text 定义有关图形的短描述 src URL 要显示的图像的URL height pixels% 定义图像的高度 ismap URL 把图像定义为服务器端的图像映射 usemap URL 定义作为客户端图像映射的一幅图像。可参阅<> vspace pixels 定义图像顶部和底部的空白。不支持。应使用CSS代替 width pixels% 设置图像的宽度 border:边框
vspace、hspace：上下左右边距
align：左右中对齐
插入图像
相对路径
1.同一文件夹src = “文件名”
2.低一个src = “文件夹名/文件名”
3.高一个 src = “../文件夹名/文件名”
绝对路径
全路径
设置图像的宽度和高度
height和width控制，百分比为相对尺寸，数值为绝对尺寸
设置图像的提示文字
title：当鼠标悬停在图片上时显示属性值
将图片设置为网页背景
GIF和JPG可以用作HTML背景
<body background = "images/background.jpg">
<!DOCTYPE html> <html lang="en"> <head lang="en"> <meta charset="UTF-8"> <title>1001</title> </head> <body background="06.png" > <p align="center"> <!--align 属性设置为居中（center） --> <del>这一段文字是我的</del> <!-- 添加删除线 --> e1<sup>文字在这</sup><!--上表文字 下标为<sub> --> <a href="06.png" > <img src="06.png" width="80" title="sb" border="2px" usemap="C:\Users\30337\Desktop"> </a> </p> </body> </html>
2.7 超链接标签 a
<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
-
未被访问的链接带有下划线而且是蓝色的
-
已被访问的链接带有下划线而且是紫色的
-
活动链接带有下划线而且是红色的
-
提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
提示：请使用 CSS 来改变链接的样式。
a 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持。规定目标 URL 的字符编码。 |
| coords | coordinates | HTML5 不支持。规定链接的坐标。 |
| downloadNew | filename | 指定下载链接 |
| href | URL | 规定链接的目标 URL。 |
| hreflang | language_code | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 |
| mediaNew | media_query | 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。 |
| name | section_name | HTML5 不支持。规定锚的名称。 |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 |
| rev | text | HTML5 不支持。规定目标 URL 与当前文档之间的关系。 |
| shape | default rect circle poly | HTML5 不支持。规定链接的形状。 |
| target | _blank _parent _self _top framename | 规定在何处打开目标 URL。仅在 href 属性存在时使用。blank：新窗口打开。parent：在父窗口中打开链接。self：默认，当前页面跳转。top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。 |
| typeNew | MIME_type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 注：MIME = Multipurpose Internet Mail Extensions。 |
- href: 必须具备, 表示点击后会跳转到哪个页面.
-
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
<a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com" target="_block">baidu</a> <a href="test3.html">test3</a> <a href="#">###</a>
新建标签页打开链接页面,只需在head里面添加这段代码,对于其它也如此
<base target="_blank"> _blank,_self......
设置 target 属性时， top 与 parent 的打开方式十分类似，需仔细区分。
比如网 A 中镶嵌了 iframe 网页 B，网页 B 又镶嵌了 iframe 网页C。
-
如果网页 C 中连接设置 target=_parent，则跳转将网页 B 去掉直接在 A 中嵌入网页 C 中链接页面。
-
如果网页 C 中 target=_top ，则直接跳出所有 iframe 框架，直接转向 C 中链接页面。
创建锚点
<a href="#目标id">锚跳转到目标id处</a>
实例
<body> <p> <p id="102">1011</p> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <p>sdsds</p><br/> <a href="#102">跳转到头</a> </body>
2.8 表格标签
| 标记 | 描述 |
|---|---|
| table 标签 | 表示整个表格 |
| tr | 表示表格的一行 |
| td | 表示一个单元格 |
| th | 表示表头单元格. 会居中加粗 |
| thead | 表格的头部区域(注意和 th 区分, 范围是比 th 要大的) |
| tbody | 表格得到主体区域. |
-
这些属性都要放到 table 标签中.
-
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
-
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
-
cellpadding: 内容距离边框的距离, 默认 1 像素
-
cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.
<table border="1" align="center" cellpadding='20' cellspacing='1' width='600' height='600'> <tr> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td>男</td> <td>98</td> </tr> <tr> <td>李四</td> <td>女</td> <td>97</td> </tr> </table>
合并单元格
-
跨行合并:
rowspan="n" -
跨列合并:
colspan="n" -
<table border="1" align="center" cellpadding='20' cellspacing='1' width='600' height='600'> <tr> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td colspan = '2'>男</td> </tr> <tr> <td>李四</td> <td rowspan="2">女</td> <td>97</td> </tr> <tr> <td>王五</td> <td>97</td> </tr> </table>
2.9 列表标签
| 描述 | 标记 |
|---|---|
| 无序列表[重要] | ul >li , . |
| 有序列表[用的不多] | ol >li |
| 自定义列表[重要] | dl (总标签) dt (小标题) dd (围绕标题来说明) |
<h3>无序列表</h3> <ul> <li>苹果</li> <li>西瓜</li> <li>香蕉</li> </ul> <h3>有序列表</h3> <ol> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <h3>自定义列表</h3> <dl> <dt>我的一天</dt> <dd>吃饭</dd> <dd>睡觉</dd> <dd>打豆豆</dd> </dl>
ol：
- 标签定义了一个有序列表. 列表排序以数字来显示。
使用<li> 标签来定义列表选项。
提示: 可以使用 CSS 来渲染，详细查看 CSS 列表。
提示:无序列表，可以使用 <ul>标签。
属性：
reversed" 属性是 HTML5 中的新属性。
在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。
| 属性 | 值 | 描述 |
|---|---|---|
| compact | compact | HTML5 中不支持，不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。 |
| reversedNew | reversed | 指定列表倒序(9,8,7...) |
| start | number | 一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。 |
| type | a 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号（默认） | 规定列表的类型。 |
ul:
ul> 标签定义无序列表。
将 <ul> 标签与<li>标签一起使用，创建无序列表。
同样的在无序列表内也可以嵌套有序列表
2.10 表单标签 from
分成两个部分:
-
表单域: 包含表单元素的区域. 重点是 form 标签.
-
表单控件: 输入框, 提交按钮等. 重点是 input 标签
form 标签
<form action="test.html"> ... [form 的内容] </form>
input 标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等. name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一. value: input 中的默认值. checked: 默认被选中. (用于单选按钮和多选按钮) maxlength: 设定最大长度.
| 属性 | 值 | 描述 |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | 规定通过文件上传来提交的文件的类型。 (只针对type="file") |
| align | left right top middle bottom | HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image") |
| alt | text | 定义图像输入的替代文本。 (只针对type="image") |
| autocompleteNew | on off | autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。 |
| autofocusNew | autofocus | 属性规定当页面加载时 <input> 元素应该自动获得焦点。 |
| checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
| disabled | disabled | disabled 属性规定应该禁用的 <input> 元素。 |
| formNew | form_id | form 属性规定 <input> 元素所属的一个或多个表单。 |
| formactionNew | URL | 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image") |
| formenctypeNew | application/x-www-form-urlencoded multipart/form-data text/plain | 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。 |
| formmethodNew | get post | 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image") |
| formnovalidateNew | formnovalidate | formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。 |
| formtargetNew | _blank _self _parent _top framename | 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image") |
| heightNew | pixels | 规定 <input>元素的高度。(只针对type="image") |
| listNew | datalist_id | 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。 |
| maxNew | number date | 属性规定 <input> 元素的最大值。 |
| maxlength | number | 属性规定 <input> 元素中允许的最大字符数。 |
| minNew | number date | 属性规定 <input>元素的最小值。 |
| multipleNew | multiple | 属性规定允许用户输入到 <input> 元素的多个值。 |
| name | text | name 属性规定 <input> 元素的名称。 |
| patternNew | regexp | pattern 属性规定用于验证 <input> 元素的值的正则表达式。 |
| placeholderNew | text | placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。 |
| readonly | readonly | readonly 属性规定输入字段是只读的。 |
| requiredNew | required | 属性规定必需在提交表单之前填写输入字段。 |
| size | number | size 属性规定以字符数计的 <input> 元素的可见宽度。 |
| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image") |
| stepNew | number | step 属性规定 <input> 元素的合法数字间隔。 |
| type | button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week | type 属性规定要显示的 <input> 元素的类型。 |
| value | text | 指定 <input> 元素 value 的值。 |
| widthNew | pixels | width 属性规定 <input> 元素的宽度。 (只针对type="image") |
常用
① 文本框
<form action="">
<input type="text">
</form>
② 密码框
<form action="">
<input type="password">
</form>
③ 单选框
注: 这里name属性相同,才能实现多选一
<form action="">
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
</form>
④ 复选框
<form action="">
<input type="checkbox"> 吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
</form>
⑤ 普通按钮
<form action="">
<input type="button" value="这是一个按钮" οnclick="alert('hello')">
</form>
⑥ 提交按钮
<form action="http://www.baidu.com">
<input type="submit" value="提交">
</form>
⑦ 清空按钮
<form action="http://www.baidu.com">
<input type="text">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
⑧ 选择文件
<form action="">
<input type="file">
</form>
2.11 label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
-
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
-
<label for="male">男</label> <input id="male" type="radio" name="sex">
2.12 select 标签
下拉菜单
-
option 中定义 selected="selected"表示默认选中
-
<select> <option>--请选择地址--</option> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>广西</option> <option>西藏</option> </select>
2.13 textarea 标签
文本框
<textarea rows="3" cols="50">
</textarea>
）表单字段集 语法：<fieldset></fieldset> 说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用； 2）字段级标题： 语法：<legend align="left/center/right/justify"></legend> 说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。 3)提示信息标签： 语法：<label for="绑定控件id名"></label> 说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
2.14 无语义标签: div & span
div 标签, division 的缩写, 含义是 分割 span 标签, 含义是跨度
就是两个盒子. 用于网页布局
-
div 是独占一行的, 是一个大盒子.
-
span 不独占一行, 是一个小盒子.
<div> <span>你好</span> <span>你好</span> <span>你好</span> </div> <div> <span>中国</span> <span>中国</span> <span>中国</span> </div>
2.15 HTML 中特殊字符
空格: 小于号: < 大于号: > 按位与: &
小于号: < 大于号:>按位与:&`
2.11details 控件
details> 标签规定了用户可见的或者隐藏的需求的补充细节。
<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
<details> 元素的内容对用户是不可见的，除非设置了 open 属性。 与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<details open> 主题内容 <summary> 标题 </summary> <details >
实例
##
css样式部分
2
JavaScript
浏览器内核的作用:负责页面内容的渲染。
内核主要由两部分组成：
1、内容排版引擎解析HTML和CSS
2、脚本解释引擎解析Javascript
什么是 JavaScript
JS组成(完整的JS是由三部分组成)
1、核心(ECMAScript)
2、文档对象模型(DOM,Document Object Model)
让JS有能力与网页进行对话
3、浏览器对象模型(BOM,Browser Object Model)
让JS有能力与浏览器进行对话
JavaScript基础
将JS脚本嵌入在HTML页面中执行的步骤
1、将JS代码嵌入在元素"事件"中
onclick : 当单击元素时所做的操作
<div id="" οnclick="JS代码">xxx</div>
<html> <body> <button οnclick=" console.log( 'Hello World' ); "> 打印消息 </button> </body> </html>
2、将JS代码嵌入在<script>标记中
1、<script></script>
允许出现网页的任意位置处
<html>
<body>
页头
<hr/>
<script>
document.write( '<b>欢迎</b>');
console.log( '脚本执行结束了...' );
</script>
<hr/>
页尾
</body>
</html>
3、将JS代码写在外部脚本文件中(**.js)
1、创建 js 文件，并编写JS代码
.js
2、在页面中 引入 js文件
<script src="js文件路径"></script>
<html>
<head>
<script src="myscript.js">
</script>
</head>
<body>
</body>
</html>
<script src=""></script>
该对标记中，是不允许出现任何内容的
<script src="a.js">
console.log();
</script>
以上代码是错误的
语法规范
1**、语句**
允许被JS引擎所解释的代码
使用 分号 来表示结束:
console.log();
document.write();
大小写敏感:
console.log(); 正确
Console.log(); 错误
英文标点符号
console.log(""); 正确
console.log（“”）；错误
由表达式、关键字、运算符 组成
2**、注释**
单行注释: //
多行注释: /* */
sublime text中 Ctrl+/
变量：
var
vue.js
准备Vue.js环境
开发中的最佳实践
『最佳实践』是实际开发中，针对特定问题提炼出来的最好的解决方案。把『最佳实践』抽取出来，封装到各自编程语言的程序包中，就是框架的基础。
-
Java语言的程序包：jar包
-
JavaScript语言的程序包：外部js文件
对于Java程序来说，框架=jar包+配置文件。对于Vue来说，导入Vue的外部js文件就能够使用Vue框架了
2.Vue框架的js文件获取
官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
3、本地创建vue.js文件
第一步：在HBuilderX中创建工程
第二步：在工程目录下创建script目录用来存放vue.js文件
第三步：创建空vue.js文件
第四步：将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中
使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script src="/pro03-vue/script/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </html>
第三节 Vue.js基本语法：声明式渲染
概念
声明式
声明式是相对于『编程式』而言的。
-
声明式：告诉框架做什么，具体操作由框架完成
-
编程式：自己编写代码完成具体操作
渲染
上图含义解释：
-
蓝色方框：HTML标签
-
红色圆形：动态、尚未确定的数据
-
蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
-
渲染：程序计算动态数据得到具体数据的过程
dome
html代码
vue代码
// 1.创建一个JSON对象，作为new Vue时要使用的参数
var argumentJson = {
// el用于指定Vue对象要关联的HTML元素。el就是element的缩写
// 通过id属性值指定HTML元素时，语法格式是：#id
"el":"#app",
// data属性设置了Vue对象中保存的数据
"data":{
"message":"Hello Vue!"
}
};
// 2.创建Vue对象，传入上面准备好的参数
var app = new Vue(argumentJson);
3、查看声明式渲染的响应式效果
app.message="new 10";
通过验证Vue对象的『响应式』效果，我们看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系，同时看到Vue在背后确实是做了大量的工作。
第四节 Vue.js基本语法：绑定元素属性
1、基本语法
v-bind:HTML标签的原始属性名
2、demo
html代码
<div id="app">
<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
<input type="text" v-bind:value="vueValue" />
<!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
<p>{{vueValue}}</p>
</div>
vue代码
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
"el":"#app",
"data":{
"vueValue":"太阳当空照"
}
});
完整代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
<!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
<input type="text" v-bind:value="vueValue" />
<!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
<!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
<p>{{vueValue}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = new Vue({
"el":"#app",
"data":{
"vueValue":"太阳当空照"
}
});
</script>
</body>
</html>
3、小结
本质上，v-bind:属性名="表达式"它们都是用Vue对象来渲染页面。只不过：
-
文本标签体：使用形式
-
属性：使用v-bind:属性名="表达式"形式
第五节 Vue.js基本语法：双向数据绑定
提出问题
而使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。
demo
①HTML代码
<div id="app">
<!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
<!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->
<input type="text" v-model:value="vueValue" />
<p>{{vueValue}}</p>
</div>
②Vue代码
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
"el":"#app",
"data":{
"vueValue":"太阳当空照"
}
});
完整代码：
<body>
<div id="app">
<!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
<!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->
<input type="text" v-model:value="vueValue" />
<p>{{vueValue}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 创建Vue对象，挂载#app这个div标签
var app = new Vue({
"el":"#app",
"data":{
"vueValue":"太阳当空照"
}
});
</script>
</body>
①:value可以省略
<input type="text" v-model="vueValue" />
②.trim修饰符
实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现。
<input type="text" v-model.trim="vueValue" />
Vue会帮助我们在文本框失去焦点时自动去除前后空格。
第六节 Vue.js基本语法：条件渲染
根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。
1、v-if
html代码示范
<div id="app"> <h3>if</h3> <img v-if="flag" src="/pro03-vue/./images/one.jpg" /> <img v-if="!flag" src="/pro03-vue/./images/two.jpg" /> </div>
vue代码
var app = new Vue({
"el":"#app",
"data":{
"flag":true
}
});
flag是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
可以用v-else指令为v-if添加一个“else块”。v-else元素必须立即跟在v-if元素的后面，否则它不能被识别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<h1>用户登录/注册</h1>
<div id="app"> <input type="checkbox" name="" v-model="isRegister">注册页
<!-- if...else..的使用 -->
<div class="box" v-if="isRegister">
<h1>用户注册</h1>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p>确认密码：<input type="password"></p>
<p> <input type="button" value="登录"> </p>
</div> <!-- 否则条件不成立，执行这里 -->
<div class="box" v-else>
<h1>用户登录</h1>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p> <input type="button" value="登录"> </p>
</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isRegister: true
}
});
</script>
</body>
</html>
2、v-show
与v-if不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
注意：v-show不支持<template>元素，也不支持v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if</title>
<script src="vue.js"></script>
</head>
<body>
<h1>用户登录/注册</h1>
<div id="app"> <input type="checkbox" name="" v-model="isRegister">注册页
<!-- if...else..的使用 -->
<div class="box" v-if="isRegister">
<h1>用户注册</h1>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p>确认密码：<input type="password"></p>
<p> <input type="button" value="登录"> </p>
</div> <!-- 否则条件不成立，执行这里 -->
<div class="box" v-else>
<h1>用户登录</h1>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p> <input type="button" value="登录"> </p>
</div>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isRegister: true
}
});
</script>
</body>
</html>
3、对比
(1）v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做。—直到条件第一次变为真时，才会开始渲染条件块。
（2）相比之下，v-show就简单得多了，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
（3）一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if
第七节 Vue.js基本语法：列表渲染
1、迭代一个简单的数组
1.
HTML代码
<div id="app01">
<ul>
<!-- 使用v-for语法遍历数组 -->
<!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
<!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 -->
<li v-for="fruit in fruitList">{{fruit}}</li>
</ul>
</div>
Vue代码
var app01 = new Vue({
"el":"#app01",
"data":{
"fruitList": [
"apple",
"banana",
"orange",
"grape",
"dragonfruit"
]
}
});
2.第二种写法
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01</title>
<script src="vue.js"></script>
</head>
<body>
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'foo' },
{message: 'Bar' }
]
}
})
</script>
</body>
v-for 块
v-for 块，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引
拥有对父作用域属性的完全访问权限：
<ul id="test">
<li v-for="(item, index) in items">
/ 这里就是v-for块的子作用域，这里我们能取到item和数组遍历的时候的索引值index,所以说我们拥有对父作用域属性的完全访问权限
{{ item.message }} + {{index}}
</li>
</ul>
var example2 = new Vue({
el: '#test',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
2、迭代一个对象数组
HTML代码
<div id="app">
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr v-for="employee in employeeList">
<td>{{employee.empId}}</td>
<td>{{employee.empName}}</td>
<td>{{employee.empAge}}</td>
<td>{{employee.empSubject}}</td>
</tr>
</table>
</div>
Vue代码
var app = new Vue({
"el":"#app",
"data":{
"employeeList":[
{
"empId":11,
"empName":"tom",
"empAge":111,
"empSubject":"java"
},
{
"empId":22,
"empName":"jerry",
"empAge":222,
"empSubject":"php"
},
{
"empId":33,
"empName":"bob",
"empAge":333,
"empSubject":"python"
}
]
}
});
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
