前端开发
关注
分享
扫一扫
seperinna
这个作者很懒，什么都没留下…
展开
-
Vue框架入门到实践(五)
组件组件基础一个组件的 data 选项必须是一个函数为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。// 定义一个名为 bu原创 2020-09-05 18:18:28 · 118 阅读 · 0 评论 -
Vue框架入门到实践(四)
绑定事件绑定(v-on)<div id="btn"><button v-on:click="counter += 1">点击计算{{counter}}</button><button v-on:click="greet('test', $event)">点击弹出</button></div><script type="text/javascript">var app = new Vue({ el :原创 2020-08-28 22:28:51 · 157 阅读 · 0 评论 -
Vue框架入门到实践(三)
渲染条件渲染<div v-if="true" > if判断为真，惰性渲染</div><div v-show="true" > 元素总是会被渲染</div>列表渲染<ul id="app"><li v-for="item,index in items" :key="index">{{index}} {{item.message}}</li> //遍历数组<li v-for="value,ke原创 2020-08-28 21:29:08 · 129 阅读 · 0 评论 -
Vue框架入门到实践(二)
class与style绑定<body> <div id="app" v-bind:class="{active:isActive, green:isGreen}" :style="{width:isWidth?'180px':'',height:height}"> <!-- v-bind:class="['border','font-size']" --> <!-- 静态绑定class --> <!-- v-bind:class原创 2020-08-27 22:47:32 · 133 阅读 · 0 评论 -
Vue框架入门到实践(一)
Vue安装在官网下vue.js文件 vue.js打开项目，在html文件中通过script标签引入vue.js<script type="text/javascript" src="vue.js" charset="UTF-8"></script>Vue应用创建及运行首先，通过Vue函数创建新的Vue实例<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2020-08-27 22:06:03 · 143 阅读 · 0 评论 -
CSS入门到实践（五）
CSS动画特效2D转换方法：translate(), rotate(), scale(),skew(),matrix()3D转换方法：rotateX(),rotateY()// 2D转换.div{ transform:translate(100px,100px); //移动 -webkit-transform:translate(100px,100px);//safari,chrome -ms-transform:translate(100px,100px) //IE -moz-tran原创 2020-08-22 22:26:43 · 92 阅读 · 0 评论 -
CSS入门到实践（四）
CSS常用操作对齐操作：使用margin属性进行水平对齐 margin:10px auto使用position属性进行左右对齐 postion:absolute;left:0px;使用float属性进行左右对齐 float:left分类：尺寸操作属性height/line-height/max-height/min-height/width/max-width/min-width分类操作属性clear/cursor:inherit;/display:inline;/float/p原创 2020-08-22 21:41:57 · 107 阅读 · 0 评论 -
CSS入门到实践（三）
CSS盒子模型内边距：padding:100px //所有内边距padding-top:100px //上边距padding-left:100px //左边距padding-bottom:100px //下边距padding-right:100px //右边距边框：border-style:none //边框样式border-top-style:dottedborder-left-style:dottedborder-right-style:dotted原创 2020-08-22 21:15:33 · 163 阅读 · 0 评论 -
CSS入门到实践（二）
CSS定位css定位：改变元素在页面上的位置css定位机制：普通流：元素按照其在HTML中的位置顺序决定排布的过程浮动float属性: left/right/inherit/nonecleart属性：去掉浮动属性 left/right/both/inherit绝对布局css定位属性：position:static/relative/absolute/fixed 把元素放在一个静态的，相对的，绝对的或固定的位置中top/left/right/bottom:100px 元素原创 2020-08-22 18:24:09 · 109 阅读 · 0 评论 -
CSS入门到实践（一）
CSS基础知识基础语法selector {property:value;}例：h1{color:red; font-size:14px;}高级语法选择器分组: h1,h2,a,p{color:red; font-size:14px;}继承样式选择器派生选择器 div p{color:red; font-size:14px;}id选择器 #div{color:red; font-size:14px;}类选择器 .divstyle{color:r原创 2020-08-22 17:54:47 · 193 阅读 · 0 评论 -
JQuery入门到实践（六）
JQuery扩展// myJQuery.js$.myjs = function(){ console.log("extend jquery");}; //不常见$.fn.myjs = function(){ $(this).text("extend jquery");}； //常见扩展方式// index.jsvar myjq = $.noConflict(); //避免$符号冲突，自定义myjq代替JQuerymyjq (document).ready(functio原创 2020-08-22 11:25:21 · 95 阅读 · 0 评论 -
JQuery入门到实践（五）
JQuery AJAX异步访问$(document).ready(function(){ $("#btn").on("click",function(){ $.get("server.php",{name:$("#ipt").val()},function(data){ $("#result").text(data); }).error(function(){ $("#result").text("通讯有问题"); }); //get请求 $.post("server原创 2020-08-22 11:04:27 · 92 阅读 · 0 评论 -
JQuery入门到实践（四）
JQuery遍历向下遍历$(document).ready(function(){ $("#div1").children("#div2").css({border:"3px solid #FF0000"}); //只适用于儿子类，向下遍历一级 $("#div1").find("#div2").css({border:"3px solid #FF0000"}); //适用于下层所有类，向下遍历任一级 });向上遍历$(document).ready(function(){原创 2020-08-20 22:26:24 · 95 阅读 · 0 评论 -
JQuery入门到实践（三）
JQuery CSS操作$("p").css("width","100px"); //设置单一css$("div").css({ "width":"100px", "height":"100px"}); //设置多种css$("div").addClass("style1"); //增加样式文件里的样式$("div").removeClass("style1"); //移除样式文件里的样式$("div").toggleClass("style1"); //切换样式文件里的样式原创 2020-08-20 21:58:26 · 111 阅读 · 0 评论 -
JQuery入门到实践（二）
JQuery HTML操作JQuery常用选择器$(#id) //id选择器$(tagname) //标签选择器$(.classname) //class选择器原创 2020-08-19 22:33:44 · 120 阅读 · 0 评论 -
JQuery入门到实践（一）
JQuery简介JQuery是一个JavaScript函数库，库包含的功能有：HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM遍历和修改，AJAX,Utilities（工具类）。JQuery引入下载JQuery库在HTML中通过 script标签引入JQuery库JQuery基础语法$(selector).action()...原创 2020-08-19 21:22:31 · 99 阅读 · 0 评论 -
JavaScript实战项目--瀑布流效果
代码结构Demo # 项目名img # 图片文件夹1.jpg2.jpg3.jpgindex.html # 页面布局css # css文件夹style.cssjs # js文件夹app.js// index.html<!DOCTYPE html><html> <head lang="en"> <meta charset="utf-8"> <title>瀑布流&l..原创 2020-08-17 22:59:04 · 119 阅读 · 0 评论 -
JavaScript入门到实践（九）
JavaScript面向对象面向对象实现方式一：（function(){ var n = 12; function People(name){ this._name = name; # 类对象属性 } # 函数构造类People Peole.prototype.say = function(){ alert("people"+ this._name + n); } # 类对象方法 window.People = People; # 封装}());（function(原创 2020-08-16 17:24:34 · 99 阅读 · 0 评论 -
JavaScript入门到实践（八）
JavaScript浏览器对象window对象window对象指当前的浏览器窗口所有JavaScript全局对象，函数以及变量均自动成为window对象的成员全局变量是window对象的属性，甚至document也是window对象的属性之一。全局函数是window对象的方法window尺寸:window.innerHeight 浏览器窗口的内部高度window.innerWidth 浏览器窗口的内部宽度window方法:window.open(url) 打开原创 2020-08-16 11:47:03 · 109 阅读 · 0 评论 -
JavaScript入门到实践（七）
JavaScript内置对象String字符串对象方法：str.indexOf(dest_str) 字符串中查找字符串str.match(dest_str) 匹配内容str.replace(rel_str,dest_str) 替换内容str.toUpperCase()/str.toLowerCase() 转换大小写str.split() 字符串转换为数组属性：str.length 字符串长度Date日期对象Array数组对象Math对象..原创 2020-08-13 22:27:04 · 125 阅读 · 0 评论 -
JavaScript入门到实践（六）
JavaScript DOM对象DOM简介HTML DOM:当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）DOM操作HTML改变HTML输出流（注意：绝对不要在文档加载完成之后使用document.write(),会覆盖该文档）寻找元素：通过id/标签名找到HTML元素改变HTML内容：使用属性innerHTML改变HTML属性：使用属性名<body> <p id="pid">hello</原创 2020-08-13 21:45:54 · 81 阅读 · 0 评论 -
JavaScript入门到实践（五）
JavaScript事件事件流页面中接受事件的顺序。事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。事件处理HTML事件处理：直接添加到HTML结构中DOM0级事件处理：把一个函数赋值给一个事件处理程序属性DOM2级事件处理addEventListener(“事件名”,事件处理函数名,布尔值)；true:事件捕获false:事件冒泡removeEventList原创 2020-08-06 22:29:43 · 103 阅读 · 0 评论 -
JavaScript入门到实践（四）
JavaScript异常异常处理try{ 发生异常的代码块；}catch(err){ 错误信息处理；}try{ 发生异常的代码块； throw "异常描述"；}catch(err){ 错误信息处理；}原创 2020-08-06 21:10:18 · 90 阅读 · 0 评论 -
JavaScript入门到实践（三）
JavaScript函数函数定义function 函数名(){ 函数体；}函数调用在<script>标签内调用在HTML文件内调用带参数函数function 函数名(形参1，形参2，形参...){ 函数体；}带返回值函数function 函数名(形参1，形参2，形参...){ return 函数体；}局部变量和全局变量函数体内的变量为局部变量，只能在函数体内使用全局变量可使用于任何地方...原创 2020-08-06 20:59:47 · 85 阅读 · 0 评论 -
JavaScript入门到实践（二）
JavaScript基础JavaScript是互联网上最流行的脚本语言，这门语言可用于web和HTML,更可广泛用于服务器、PC端、移动端。JavaScript用法HTML中的脚本必须位于<script></script>标签之间脚本可放置在HTML页面的<body>和<head>部分中JavaScript标签在HTML中插入JavaScript，使用<script>标签在<script></scrip原创 2020-08-05 22:21:11 · 128 阅读 · 0 评论 -
JavaScript入门到实践（一）
JavaScript语法运算符算数运算符赋值运算符字符串运算符比较运算符逻辑运算符条件运算符条件语句if…elseswitch循环语句whiledo…whilefor跳转语句continuebreak原创 2020-08-05 21:52:11 · 111 阅读 · 0 评论