![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
婉菡
自己有了光芒才配得上自己追逐的星光 萬事勝意
展开
-
vue实例的八个生命周期
原创 2021-08-12 09:51:18 · 176 阅读 · 0 评论 -
前端笔记
CSS的基本语法: 选择器{ 样式名称:样式的值; 样式名称:样式的值; 样式名称:样式的值; } 选择器:用来定位页面元素 基本选择器 标签选择器:直接以标签名称当做选择器,当前文档中所有该标签都拥有这套样式 ID选择器:#id的名称 可以唯一定位页面某个元素设定样式 类选择器:.类名称 可以给页面的部分元素设定同样的样式 复合选择器 后代选择器:外层元素选择器 里层元素选择器 中间是空格间隔 交集选择器:由两个选择器构成,第一个必须是标..原创 2021-02-22 17:52:23 · 99 阅读 · 0 评论 -
vue浏览器出现 Cannot read property ‘length‘ of undefined 的报错信息
报错原因:后台在返回数据时是需要时间的 不管多快 都是需要时间的 但是在初始化时,并没有给一个空的数组 注意 是数组形式 所以当调用 .length 方法时 这时后台数据还没有返回回来 此时它不是数组 就会报错解决方案:可以在整体加一个 v-if这样当数据还没有返回时 就不会渲染 只有数据返回回来时 才会进行渲染这样就可以解决报错的问题代码块例如:友情提示:当浏览器出现如下报错信息时 看到Error in render 的问题 都是浏览器渲染问题...原创 2021-02-21 11:31:28 · 281 阅读 · 0 评论 -
Web应用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- Web应用 前后端分离: 前端应用 服务器端应用 前后端的连接: 请求的发送 相应的处理 AJAX技术: 进行请求的发送 实现页面局部刷新,异步处理 请求发送的方原创 2021-02-13 09:29:09 · 150 阅读 · 4 评论 -
vue13--编程式路由的实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>编程式路由的实现</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/v原创 2021-02-13 09:26:46 · 222 阅读 · 0 评论 -
vue12--路由--菜单栏的开发
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>路由--菜单栏的开发</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/np原创 2021-02-13 09:25:17 · 130 阅读 · 0 评论 -
vue11--组件之间的通信--子组件往父组件传值(不可自动触发)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件之间的通信--子组件往父组件传值(不可自动触发)</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body>原创 2021-02-13 09:24:07 · 264 阅读 · 0 评论 -
vue10--组件之间的通信--父往子传值(可自动触发)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件之间的通信--父往子传值(可自动触发)</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> &l原创 2021-02-13 09:15:48 · 148 阅读 · 2 评论 -
vue09--组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">原创 2021-02-13 09:14:39 · 104 阅读 · 0 评论 -
vue08--全局组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全局组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">原创 2021-02-12 21:37:03 · 97 阅读 · 0 评论 -
vue07--计算属性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">原创 2021-02-12 21:35:28 · 182 阅读 · 0 评论 -
vue06--表单绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">原创 2021-02-12 21:32:08 · 81 阅读 · 0 评论 -
vue05--条件渲染指令与循环指令
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>条件渲染指令与循环指令</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="ap原创 2021-02-12 21:30:55 · 114 阅读 · 0 评论 -
vue04--事件处理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>事件处理</title> <style> .style1{ width: 100px; height: 100px; background-color: antiquewhite; } .style2{ width: 100px; he原创 2021-02-12 21:29:40 · 143 阅读 · 2 评论 -
vue03--属性与样式绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>属性与样式绑定</title> <style> .fontSize{ font-size: 30px; } .backColor{ background-color: aqua; } .redcolor{ color:red; }原创 2021-02-12 21:27:49 · 109 阅读 · 0 评论 -
vue02--文本渲染
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文本渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <!-- 文本渲染:原创 2021-02-12 21:26:31 · 1147 阅读 · 4 评论 -
vue01--引用vue.js在线文件,安装
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!--引用vue.js在线文件,安装--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <bod原创 2021-02-12 21:24:29 · 139 阅读 · 0 评论 -
es6-2 模块化开发
index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>es6模块化开发</title> <script src="js/module2.js" type="module"></script> </head> <body> </body></html>mo原创 2021-02-12 21:20:18 · 149 阅读 · 0 评论 -
es6-1 按钮
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/index.js" ></script> </head> <body> <button type="button" id=原创 2021-02-12 21:17:39 · 164 阅读 · 1 评论 -
页面跳转
first.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function goPage(){ location.href="second.html";//实现页面跳转 } </script> </head> <body>原创 2021-02-11 12:12:57 · 226 阅读 · 0 评论 -
表单校验
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单校验</title> <script src="js/demo09.js" type="text/javascript"></script> </head> <body> <div> 用户名:<input type="te原创 2021-02-11 12:08:58 · 91 阅读 · 0 评论 -
JS事件处理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS事件处理</title> <script src="js/demo08.js" type="text/javascript"></script><!--引入js文件--> <link href="css/demo08.css" rel="styles原创 2021-02-11 12:05:46 · 115 阅读 · 1 评论 -
DOM编程
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>DOM编程</title> <style> .sty{/*类选择器样式*/ width: 100px; height: 100px; border: 1px solid red; } .sty1{/*类选择器样式*/ /*width: 200p原创 2021-02-11 12:04:30 · 100 阅读 · 1 评论 -
BOM--document对象
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>BOM--document对象</title> <script> /* document对象: 常用对象集合: forms:代表页面中所有表单的集合 返回值是一个数组 常用对象方法: white():文档中打印信息 w原创 2021-02-11 12:03:13 · 205 阅读 · 0 评论 -
BOM-浏览器对象模型-- window
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>BOM-浏览器对象模型-- window</title> <script> /* BOM-浏览器对象模型:提供独立于内容而与浏览器窗口进行交互的对象(所有对象名称字母均小写) window:整个BOM的核心,是顶级对象原创 2021-02-11 12:02:02 · 121 阅读 · 0 评论 -
JS对象
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS对象</title> <script> //创建对象 /*var obj1 = new Object(); obj1.name='test'; obj1.sex='男'; var obj2 = { name:'', sex:''原创 2021-02-11 12:00:45 · 149 阅读 · 1 评论 -
数组对象正则表达式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>数组对象正则表达式</title> <!-- 数组:存储多个数据的集合 JS中数组的特点: 不要求数据类型一致 长度是不固定的 JS中的数组没有默认值 length属性获取数组长度 -->原创 2021-02-11 11:59:34 · 631 阅读 · 0 评论 -
流程控制语句
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 流程控制语句: 条件判断语句:if switch 循环语句:for while do-while for in 函数的声明: function 函数名(参数列表){原创 2021-02-11 11:58:04 · 70 阅读 · 0 评论 -
JS基础知识
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>JS基础知识</title> <!-- JavaScript:用于实现页面动态效果的脚本框架 JS基础知识 JS BOM浏览器对象模型 DOM编程 JS基础知识: HTML中书写js代原创 2021-02-11 11:56:09 · 89 阅读 · 2 评论 -
唯品会导航栏简单制作
weipinhui.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>唯品会</title> <link href="css/weipinhui.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="right"&g原创 2021-01-27 22:54:15 · 2053 阅读 · 0 评论 -
html5新增标签
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>html5新增标签</title> </head> <body> <!--<div id="header">aaaaaaa</div>--> <header>aaaaaaaaaaaa</header><!-.原创 2021-01-27 22:51:19 · 78 阅读 · 0 评论 -
表单
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单</title> <!-- form标签:表单 用于收集和用户交互的信息 method属性:设定表单提交的方式 get/post name属性:表单的名称 action属性:设定表单提交的路径原创 2021-01-27 11:40:08 · 88 阅读 · 0 评论 -
表格
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格</title> <style> table{ width: 250px; height: 150px; } table,th,td{ border:1px solid gray; border-collapse: collapse;/原创 2021-01-27 11:36:39 · 91 阅读 · 0 评论 -
弹性盒子布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹性盒子布局</title><!--将所有盒子弄到一行--例导航的应用--> <style> #con{ width: 420px; height: 40px; display:flex;/*弹性盒子*/ align-items: center原创 2021-01-27 11:35:24 · 113 阅读 · 0 评论 -
定位
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>定位</title> <!-- 标准文档流:页面元素按照从上到下,从左到右的标准顺序进行布局 position实现页面元素的定位 static:默认值 没有定位 relative:相对定位 t原创 2021-01-27 11:18:52 · 175 阅读 · 0 评论 -
元素分类
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>元素分类</title> <!-- 元素分类: 行级元素: a font strong b i ... 特性: 1.默认同行可以继续显示同类型标签原创 2021-01-27 11:17:10 · 143 阅读 · 0 评论 -
盒子模型
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <!-- div进行页面设计 一个盒子主要有5个属性: width height padding border margin 宽度width:内容的宽度 具体像素(px为单位) 或者 百分比(相对于父元素来说的)原创 2021-01-27 10:56:12 · 171 阅读 · 0 评论 -
css课后练习
demo03ex1.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图书封面</title> <style> p{ margin: 0; color: white; } #p1{ background-color: darkslategrey; text-align: center原创 2021-01-26 09:24:02 · 227 阅读 · 0 评论 -
css第三天
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css文本样式</title> <style> #p1 { /*font-family: "agency fb";/* /*设置字体类型*/ /*font-size: 20px;/* /*设置字体大小*/ /*font-style: italic;/* /*原创 2021-01-26 08:01:14 · 80 阅读 · 0 评论 -
css第一天练习题
demo02ex1.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #p1{ color: red; font-size: 18px; } #p2{ color: red; font-size: 12px; } #p3{ fon原创 2021-01-26 07:58:03 · 269 阅读 · 2 评论