![](https://img-blog.csdnimg.cn/d318f3b9f4814c54aa2b7179506e9b1f.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue基础学习
学习笔记
ATWLee
不厉害的前端开发人员
展开
-
6.7.7旅游网站小项目练习之城市列表页右侧字母表区组件代码
<template> <ul class="list"> <li class="item">A</li> <li class="item">B</li> <li class="item">C</li> <li class="item"...原创 2020-03-24 17:19:08 · 132 阅读 · 0 评论 -
6.7.6旅游网站小项目练习之城市列表页搜索区组件代码
<template> <div class="search-wrapper"> <input type="text" class="search-input" placeholder="输入城市名或拼音"> </div></template><script>export defau...原创 2020-03-24 17:21:04 · 149 阅读 · 0 评论 -
6.7.5旅游网站小项目练习之城市列表页header区组件代码
<template> <div class="header"> <router-link to="/"> <div class="iconfont header-back"></div> </router-link> 城市选...原创 2020-03-24 17:21:10 · 132 阅读 · 0 评论 -
6.7.4旅游网站小项目练习之首页推荐区组件代码
<template> <div> <div class="title">热销推荐</div> <ul> <li class="item border-bottom" v-for="item of RecommendList" :key="item.id"> ...原创 2020-03-24 17:21:19 · 275 阅读 · 0 评论 -
6.7.3旅游网站小项目练习之首页图标区页面布局组件代码
<template> <div class="icons"> <swiper :options="swiperOption"> <swiper-slide v-for="(page,index) of pages" :key="index"> <div class...原创 2020-03-24 17:21:58 · 253 阅读 · 0 评论 -
6.7.2旅游网站小项目练习之首页图片轮播区组件代码
<template> <div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide v-for="item in swiperList" :key="item.id"> <img class="swiper...原创 2020-03-24 17:22:03 · 226 阅读 · 0 评论 -
6.7.1旅游网站小项目练习之首页header区组件代码
<template> <div class="header"> <div class="header-left"> <div class="iconfont back-icon"></div> </div> <div class="header-input"><s...原创 2020-03-24 17:21:32 · 125 阅读 · 0 评论 -
6.7旅游网站小项目练习
环境安装:1.下载Node.js 通过cmd指令node -v npm -v查看是否完成安装2.注册码云,新建项目。通过Git对本地和线上项目做关联3.下载Git 通过cmd指令git --version查看是否完成安装4.在Git Bash上通过Linux命令ssh-keygen -t rsa -C "邮箱" 获取公钥,cat ~/.ssh/id_rsa.pub 查看公钥。在码云上添加公...原创 2020-03-24 17:18:59 · 549 阅读 · 0 评论 -
6.6Vue中的动画特效
1.Vue中的CSS动画以及CSS动画原理(过渡)上图是由隐藏变为显示:enter的原理过程:例如:一开始,enter为0(需要在css样式自己写这个类,并赋值opacity(透明度)为0)(opacity为0,隐藏),下一帧,enter销毁变为enter-to(opacity为1,显示),enter-active贯穿整个过程,监测是否变化。显示变为隐藏:leave不同的是,一开始lea...原创 2020-03-24 17:21:37 · 450 阅读 · 0 评论 -
6.5.7Vue组件深入理解--动态组件与v-once指令
动态组件实现点击按钮,两个组件交替显示1.可以用v-if指令实现:<body> <div id="app"> <child-one v-if="type==='child-one'"></child-one> <child-two v-if="type==='child-two'"></child-two> ...原创 2020-03-24 17:15:33 · 148 阅读 · 0 评论 -
6.5.6Vue组件深入理解--使用插槽以及作用域插槽
<body> <div id="app"> <child> <!--插槽--> <p slot="header">header</p> <p slot="footer">footer</p> </child> </div> <script&...原创 2020-03-24 17:14:49 · 147 阅读 · 0 评论 -
6.5.5Vue组件深入理解--非父子组件间的传值
//Vue非父子组件间的传值<body> <div id="app"> <child content="L"></child> <child content="Y"></child> </div> <script> Vue.prototype.bus = new Vue(); ...原创 2020-03-24 17:22:44 · 117 阅读 · 0 评论 -
6.5.4Vue组件深入理解--组件绑定原生事件
原生事件:在子组件的模板template属性中,写的事件称作原生事件。而在子组件标签中写的@事件名=“”是自定义事件。这个自定义事件想要触发,要使用$emit。比如之前的子组件向父组件传值,需要子组件向父组件emit一个事件,父组件接收到这个事件之后在执行一系列操作。优化(即直接在子组件标签中绑定原生事件,不用再写在template属性中了):@事件名.native=“”<div ...原创 2020-03-24 17:15:18 · 118 阅读 · 0 评论 -
6.5.3Vue组件深入理解--组件参数校验与非props特性
组件参数校验://子组件接受到的数据content必须是字符串的类型props: { content: String }//子组件接受到的数据content必须是字符串类型或Number类型props: { content: [String,Number] }//子组件接受到的数据content还可以是一个对象props: { content: { ...原创 2020-03-24 17:21:43 · 180 阅读 · 0 评论 -
6.5.2Vue组件深入理解--父子组件间的数据传递
父组件向子组件传值,都是通过属性的方式传递::content="value"在子组件中要props接受这个content,这样子组件就能够使用value值了注意:单向数据流,建议父组件传递过来的值,在子组件中赋给一个新值,这样修改的话,直接是i修改子组件中的新值,就不用对父组件传递过来的值进行操作。子组件向父组件传值,通过emit方法的方式传递:this.$emit(“fn”,value...原创 2020-03-24 17:22:14 · 113 阅读 · 0 评论 -
6.5.1Vue组件深入理解--组件使用的细节点
1.is<body> <div id="app"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> </di...原创 2020-03-24 17:22:19 · 155 阅读 · 0 评论 -
6.5Vue组件深入理解
1.组件使用的细节点(is/子组件data属性/ref)2.父子组件间的数据传递3.组件参数校验与非props特性4.组件绑定原生事件5.非父子组件间的传值6.Vue中使用插槽以及作用域插槽7.动态组件与v-once指令...原创 2020-03-24 17:14:40 · 92 阅读 · 0 评论 -
6.4Vue条件渲染、列表渲染
v-ifv-showv-ifv-else-ifv-elsekey=“”:元素标签独立性原创 2020-03-24 17:23:42 · 97 阅读 · 0 评论 -
6.3Vue样式绑定
1.class的对象绑定<style> .css{ color: red; }</style> <div id="app" :class="{css:iscss}">//对象,css(样式名),iscss(true还是false) <span>Hello World</span><br><...原创 2020-03-24 17:23:56 · 87 阅读 · 0 评论 -
6.2Vue计算属性,方法和侦听器
1.计算属性特点:内置缓存,意思是,如果里面的内容不改变的话,这个计算属性不会再执行一遍,会调用上次的结果。<div id="app">{{fullName}}</div><script> var vm=new Vue({ el: '#app', data: { firstName: 'L', lastName: 'Y' },...原创 2020-03-24 17:24:01 · 134 阅读 · 0 评论 -
6.1Vue实例生命周期
1.生命周期函数生命周期函数就是vue实例在某一个时间点会自动执行的函数8个beforeCreatecreatedbeforeMountmountedbeforeDestroydestroyedbeforeUpdateupdated原创 2020-03-24 17:24:10 · 97 阅读 · 0 评论 -
6.Vue小基础
vue小练习//页面输出Hello World,两秒后改为Bye World<body> <div id="app">{{content}}</div> <script> var app = new Vue({ el: '#app', data: { content: 'Hello World' } })...原创 2020-03-24 17:14:03 · 151 阅读 · 0 评论 -
5_3.BOM--event对象
event对象event属于DOM事件:是浏览器自动触发或用户手动触发的与页面进行的交互行为事件处理函数:指事件发生时,自动调用的函数为事件绑定处理函数,通常是为了使页面的内容或状态发生改变每一个元素对象都可以触发各种事件每一个事件均对应一个或多个事件处理函数常用事件:click:鼠标单击时dblclick:鼠标双击时mousedown:鼠标按键被按下mouseup:鼠标按键...原创 2020-03-24 17:22:52 · 210 阅读 · 0 评论 -
5_2.BOM--图片轮播
<div id="ad"> <!--图片--> <ul> <li class="show"><a href="#"><img src="images/a.jpg"></a></li> <li><a href="#"><img src="images/b....原创 2020-03-24 17:22:24 · 246 阅读 · 0 评论 -
5_1.BOM--定时器
定时器指程序可以在设定的时间间隔后,在执行,而不是立刻执行JS中有两种定时器:一次性定时器:程序等待一定的时间间隔后,自动执行,只执行一次周期性定时器:程序每隔一段时间间隔,就自动反复执行一次性定时器:var timer=setTimeout(task,ms)参数task:要执行的程序参数ms:要等待的毫秒数定时器启动时,会获得一个定时器序号,如果一个定时器需要被停止。则必须使用...原创 2020-03-24 17:23:21 · 236 阅读 · 0 评论 -
5.BOM
BOM概述Browser Object Model,浏览器对象模型用来访问和操作浏览器窗口,使JS有能力与浏览器交互通过BOM的API,可以操作浏览器的窗口,比如:大小、位置、打开、关闭;还可以访问浏览器软件的配置信息等BOM没有相关标准,不同的浏览器可能会呈现不同的效果主要包括对象window:表示浏览器中打开的窗口navigator:包含有关浏览器的信息screen:包含有关客...原创 2020-03-24 17:22:57 · 117 阅读 · 0 评论 -
JavaScript生成验证码
<script> var code=""; //生成验证码保存在全局变量code中 function creatCode(){ var Length=4;//四位验证码 var arr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","...原创 2020-03-24 17:16:58 · 220 阅读 · 0 评论 -
通过正则表达式判断格式是否正确
<script>//判断密码格式 var reg=/^(\d|[A-z]|_){6,12}$/g; do{ var password=prompt("请输入密码:6-12位,可包含数字字母下划线"); if(reg.test(password)){ alert("密码设置成功"); break; }else{ alert("密码格式错误,请重新输入"...原创 2020-03-24 17:24:52 · 1110 阅读 · 0 评论 -
首字母转化成大写
<script> var allname="tom , jack ,jerry,mary"; //正则表达式分割name,存放到数组arr中. var arr1=allname.split(/\s*[,,]\s*/g); //创建空数组,用于存放改变首字母后的name var arr3=[]; //遍历数组arr1 for(var i=0;i<arr1.len...原创 2020-03-24 17:25:05 · 454 阅读 · 0 评论 -
4_14.DOM--Form表单验证
//js//1.构建DOMTree//2.查找触发事件的元素:inputvar input=document.querySelectorAll("#form input");//3.绑定事件for(var i=0;i<input.length;i++){ //功能1:获取焦点事件 input[i].onfocus=function(){ //查找相对应的提示信息并显示 ...原创 2020-03-24 17:22:30 · 190 阅读 · 0 评论 -
4_13.DOM--常用HTML DOM对象:Image\Table\Select\Form
之前介绍的创建新元素以及添加到DOM树等操作,都是使用核心DOM的API进行操作的。HTML DOM对一些常用的,复杂的元素对象进行了部分简化Image对象,Table对象,Select对象,Form对象Image对象image对象,代表< img>元素< img>标签每出现一次,一个image对象就会被创建HTML DOM提供了更加方便的创建image对象的A...原创 2020-03-24 17:22:08 · 195 阅读 · 0 评论 -
4_12.DOM--实现省市二级列表
.hide{display: none;}<select id="selProvs"> <option value="请选择">--请选择--</option> <option value="北京">北京</option> <option value="山东">山东</option> <opti...原创 2020-03-24 17:23:03 · 129 阅读 · 0 评论 -
4_11.DOM--创建文档片段
文档片段文档片段就是一个虚拟的父元素,可以先将其他新创建的子元素添加到此文档片段中,一次性的添加到页面,可以减少对DOM树的操作,优化页面var frat=document.creatDocumentFragment()比如:要在select下添加许多option。通过循环添加,每次都要操作DOM树,所以可以先创建一个虚拟的父元素,即文档片段,把option子元素先添加到文档片段中,再添加到...原创 2020-03-24 17:23:07 · 1153 阅读 · 1 评论 -
4_10.DOM--动态创建表格
<div id="data"></div>table{ width: 600px; text-align: center; border-collapse: collapse;}th,td{ border: 1px solid #999;}var json=[ {"name":"A","score":"100","age":18}, {"na...原创 2020-03-24 17:15:07 · 114 阅读 · 0 评论 -
4_9.DOM--添加删除替换元素
创建元素使用JS可以为一个已有的元素添加一个新的子元素1.创建空元素var elem=document.creatElement(“标签名”)元素创建后,可以像使用DOM树种的任意元素一样,为此元素添加属性或内容elem.id=“xxx”elem.innerHTML=“xxx”注意:元素创建完成后,知识在内存中保存,并没有添加到DOM树2.将新创建的元素添加到DOM树的指定父元素...原创 2020-03-24 17:23:26 · 270 阅读 · 0 评论 -
4_8.DOM--实现标签页切换
html/js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./s.css"></head><bod...原创 2020-03-24 17:23:12 · 297 阅读 · 0 评论 -
4_7.DOM--实现全选、反选功能
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #table{ width: 30%; border-collapse: collapse;...原创 2020-03-24 17:23:37 · 272 阅读 · 0 评论 -
4_6.DOM--实现客户端购物车计算
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> table{ width: 30%; border-collapse: collapse; tex...原创 2020-03-24 17:24:22 · 197 阅读 · 0 评论 -
4_5.DOM--实现伸缩二级菜单效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> li{list-style: none;} /*初始样式*/ li span{ background:...原创 2020-03-24 17:24:15 · 318 阅读 · 0 评论 -
4_4.DOM--实现推拉门效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .list{ width: 50%; } #d1,#d2,#d3{ height: 300px;...原创 2020-03-24 17:24:39 · 316 阅读 · 0 评论