- 博客(20)
- 收藏
- 关注
RSS订阅原创 笔记：Vue特殊attribute--ref
ref：被用来给元素或子组件注册引用信息。即给标签添加ref属性。<script> <button ref="ref属性名"></button></script>在组件中的mounted钩子函数中可以用console.log获取到加了的ref属性的标签的集合。<script> <!--一个对象中的$refs持有注册过ref属性的所有DOM元素和组件实例--> conslole.log(this.
2021-12-19 11:19:45
320
原创 笔记：Vue组件的生命周期（钩子函数）
1.beforeCreate函数：<script> beforeCreate:function(){ <!--组件创建之前调用该函数--> }</script>2.created函数：<script> <!--组件的数据挂载发生在这里--> created:function(){ <!--组件创建之后，使用该组件就会调用该函数
2021-12-17 12:57:04
467
原创 笔记：Vue插槽
插槽：内置组件，<slot>元素是承载分发内容的出口。匿名插槽：子组件：（定义一个全局组件Vbtn 在当前例子中，该组件Vbtn为子组件，在这里用props选项设置属性值type，运用组件中的通信 子组件-->父组件传值）<style> /*default和样式1和样式2都是完全不一样的样式*/ .default{ ...... } .样式1{ ...... } .样式2..
2021-12-16 12:25:03
1099
原创 笔记：Vue组件之间的通信
父组件-->子组件通信：1.先给父组件中绑定自定义的属性。2.在子组件中使用props接受父组件传递的数据。3.这时候父组件传递的数据可以在子组件中任意使用。子组件：<script> Vue.component('Child',{ template:' <div> <p>我是一个孩子组件</p> .
2021-12-16 11:17:54
821
原创 笔记：CSS z-index属性
z-index属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。（默认值为auto）ps：元素可以拥有负的z-index属性值，且z-index尽可以在定位元素上奏效，即position:属性值。该元素设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴，如果为正数，则用户更近，为负数则表示离用户更远。auto：默认值。堆叠顺序与父元素相等。number：设置元素的堆叠顺序。inherit：规定应该从父元素继承z-index属性的值。h
2021-12-14 12:00:05
76
原创 笔记：CSS position属性
position属性规定元素的定位类型。(默认为static)。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。1.absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素位置通过left，top，right以及bottom属性进行规定。<html><head><style type="text
2021-12-14 11:45:49
594
原创 笔记：CSS动画animation属性
animation 属性是一个简写属性，语法如下：animation: name duration timing-function delay iteration-count direction;默认值为：none 0 ease 0 1 normalanimation有如下的六个属性：1.animation-name(默认值为none)：规定需要绑定到选择器的keyframe名称。2.animation-duration(默认值为0，此时无动画效果)：规定完成动画所...
2021-12-14 11:19:18
713
原创 笔记：CSS过渡transition属性
1.transition-property(默认值为all)：规定设置过渡效果的css属性名称。none：没有属性获得过渡效果。all：所有属性都将获得过渡效果。当值为指定的css属性应用过渡效果，多个属性用逗号隔开。2.transition-duration(默认值为0 此时不会产生过渡效果)：规定完成过渡效果需要多少时间。时间的单位为秒或者毫秒。3.transition-timing-function(默认值为ease)：指定过渡函数，规定速度效果的速度曲线。...
2021-12-14 10:49:25
1019
原创 笔记：CSS弹性布局
基本概念：容器：需要添加弹性布局的父元素。项目：弹性布局容器中的每一个子元素，称为项目。基本方向：主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴。交叉轴：与主轴垂直的方向，称为交叉轴。给父容器添加以下属性即可使容器内使用弹性布局：display:flex 容器添加弹性布局后，显示为块级元素。display:inline-flex 容器添加弹性布局后，显示为行级元素。ps：容器设置为flex布局后，子元素的float，clear和vert...
2021-12-13 14:40:04
66
原创 笔记：CSS伪类选择器hover link visited active
:hover选择器 ：用于选择鼠标指针悬浮在上面的元素。（可用于所有元素，不单单只限于链接）:link选择器 ：用于设置指向未被访问页面的链接的样式。:visited选择器 ：用于设置指向已被访问的页面的链接的样式。:active选择器 ：用于设置活动链接的样式。 （即鼠标点击的时候）ps： :hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。...
2021-12-13 13:57:21
598
原创 笔记：Vue前端路由
在开发中，路由分为后端路由和前端路由。后端路由，根据不同的用户URL请求，返回不同的内容，后端路由的本质就是URL请求地址与服务器资源之间的对应关系。后端路由根据不同的URL地址分发不同的资源。前端路由，根据不同的用户事件，显示不同的页面内容。本质就是用户事件与事件处理函数之间的对应关系。前端路由负责事件监听，触发事件之后，通过事件函数渲染不同内容。ajax前端渲染，前端渲染提供性能，但是不支持浏览器的前进后退操作SPA——单页面应用，不仅页面交互无刷新，甚至页面跳转也可以无刷新，前端路
2021-12-10 15:32:01
362
原创 笔记: Vue选项---封装复用（filters，自定义指令，components，mixin）
1.过滤器（filters选项）：用于定义在当前组件或实例作用域中可用的过滤器。可在双括号插值中添加在JavaScript表达式的尾部，以管道符号“|”与表达式隔开，表达式的值将作为参数传入filters中。<h1>{{ title }}</h1><h1>{{ titile | supplyTitle1 }}</h1><!--存在多个filter时，将从左向右执行，并将上一次过滤的结果作为下一次过滤的输入值--><h
2021-12-09 15:09:49
824
原创 笔记：Vue中使用axios
1.axios介绍：axios是一个基于Promise用于浏览器和node.js的HTTP客户端。向axios传递相关配置来创建请求：axios({ methods:'...', //若没有指定，默认为GET方法 url:'...', //请求的服务器url data{ ......, //请求主体被发送的数据 ......, } baseURL:'...', //自动加到url前面
2021-12-07 12:10:44
336
原创 笔记：Vue选项---DOM渲染（el,template,render）
1.el选项：指定被挂载元素，属性值仅限于CSS选择器或者DOM节点对象。这里推荐使用以下语法：el:"选择器" //挂载点2.template选项：语法：template:"<标签>......</标签>" //模板节点创建新的DOM节点并将替换原有的DOM节点可以放在实例中，也可以放在组件中。3.渲染函数render选项：使用在组件中，语法如下：render:function(createElement){
2021-12-07 11:28:14
1474
原创 笔记：Vue选项---数据和方法(data,props,methods,computed,watch)
1.数据选项：data:{ 数据名:数据 ......}, //对象类型data(){ return{ 数据名:数据, ...... }}, //函数类型(在组件(Vue.component)中，数据选项必须使用函数类型)2.属性选项（在组件中使用）：props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许..
2021-12-07 11:03:56
639
原创 笔记：Vue语法------vue指令（v-html,v-bind,v-on,v-model,v-if,v-show,v-for）
1.插值绑定文本插值-----{{ ... }}用双大括号将要绑定的变量，值，表达式括住就可以实现，vue将会获取计算后的值，并以文本的形式将其展示出来。HTML插值----- v-htmlvar vm=new Vue({ el:'#app'， data(){ blog:kobe, }})<script><div id="app"> <div v-html="blog"></div>
2021-12-05 12:12:42
742
原创 将下载的bootstrap放入项目中进行引用
根据你要使用的bootstrap版本进行下载，我这里下载的是Bootstrap v4.1.3。下载地址点击这里：https://getbootstrap.com/docs/4.1/getting-started/download/按照下图位置点击《download》进行下载。初学者建议按照以上进行下载，直接进行引用。下载下来后是一个压缩包，解压出来之后有两个文件css和js，将这两个文件复制到你的项目跟目录下。如下图所示。这样子就可以进行使用了。若你的项目也...
2021-11-29 14:30:21
1164
原创 在Vscode前端项目中引入jQuery
在jQuery官网下载jQuery文档进行引入。 jQuery官网：jQuery点击下图位置进行下载即可。然后在你所下载的东西中找到以下文档，大概位置在：node_modules-->jquery-->dist中，如下图所示。将以上两个文件拖拽到项目中即可。然后进行引用：<script src="./js/jquery.js"><script>然后在index.html中写入如下代码看是否引用成功：<script...
2021-11-28 15:49:14
10910
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人