- 博客(50)
- 收藏
- 关注
RSS订阅
1原创 封装navbar组件
1.创建NavBar.vue组件，组件必须有根，写好最外层的div，class命名为nav-bar，在里面用3个div包好3个具名插槽<div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div>
2021-05-01 18:33:10
268
原创 封装tabbar组件
1.做出最外层的tabbar大组件，这里要写一个id是tab-bar的div的根标签，里面写一个插槽slot（可以插入四个小组件），写好外层的样式；在App.vue上写大组件标签，import导入和注册组件，引用公共样式。2.做出里面item的小组件，这里要写一个小组件的div标签包着，命名为tab-bar-item，里面写两个具名插槽，slot的name为item-icon和item-text，分别装着小图标和文字，写好小组件的样式；在App.vue上写小组件标签，import导入和注册组件。3.在A
2021-04-26 22:42:09
90
原创 jQuery对象和DOM对象的相互转换
DOM对象：通过Js中的getElementsByTagName或者getElementsById来获取元素节点，这样的元素就是DOM对象。jQuery对象：通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。例如：$("#test").html() //获取ID为test的元素内的html代码。其中.html()是jQuery里的方法 这段代码等同于用：document.getElementById("test").innerHTML
2021-04-26 14:05:01
2385
原创 水平垂直居中
元素水平垂直居中的三种方法缺点：必须知道元素的宽高.box{ weight:200px; height:200px; position:absolute; left:50%; top:50%;/*设置元素的左外边距、上外边距为宽高的负1/2*/ margin-left:-100px; margin-top:-100px;}缺点：兼容性不好，只支持IE9+的浏览器.box{ weight:200px; height:200px; position:absolute;/*设置元素的定位位置.
2021-04-26 13:23:00
107
原创 判断浏览器是pc端还是手机端
<script type="text/javascript"> var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Tri
2021-04-26 10:26:05
599
原创 五、Webpack
认识webpackwebpack安装webpack起步webpack配置css-loader的使用less文件处理图片文件处理ES6语法处理webpack配置vueplugin的使用本地服务器配置文件的分离
2021-04-24 09:52:53
53
原创 ES6总结
let/vares6中不使用var，经常使用let(es6变量) 、const(es6常量)块级作用域 • es5：var没有块级作用域（if/for） • es6：let有块级作用域（if/for） 外面的i不会影响里面的i，es6不需要借助闭包 • 函数是一个作用域<script></script>const使用const修饰的标识符为常量，不可以再次赋值，当修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性；建议在ES6中，优先使用.
2021-04-23 13:52:47
75
原创 三、组件化开发
注册组件三个步骤①创建组件构造器Vue.extend()传入template②注册组件Vue.component()需要传递两个参数：1.注册组件的标签名 2.组件构造器③使用组件<my-cpn></my-cpn><div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn></div><
2021-04-23 13:49:00
58
原创 二、Vue基础语法
插值操作Mustache（双大括号）将data中的文本数据，插入到HTML中<h2>{{ name }}</h2><h2>{{ name }} {{ lastname }}</h2><h2>{{ num * 2}}</h2>v-once该指令后面不需要跟任何表达式（比如之前的v-for后面是有跟表达式的）该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变<h2 v-once&g
2021-04-23 13:23:40
114
原创 一、邂逅Vue.js
vue.js的安装直接CDN引入下载和引入NPM安装vue初体验代码做了什么事情我们来阅读JavaScript代码，会发现创建了一个Vue对象创建Vue对象的时候，传入了一些options：{}①{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上②{}中包含了data属性：该属性中通常会存储一些数据Tips：这些数据可以是我们直接定义出来的，比如像上面这样，也可能是来自网络，从服务器加载的数据列表HTML代码中，使
2021-04-23 10:53:18
108
原创 echarts
设置折线颜色和小圆点颜色series: [{ name: "seriesName", type: "line", symbol: 'emptyCircle', //设置为空心圆点 smooth:true, //这个是把线变成曲线 itemStyle: { normal: { color: "#2ec7c9", //设置小圆点颜色 lineStyle: { color:
2021-04-16 13:14:37
700
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人