前端学习笔记1[目前进度为笔记2]
0 一些零碎
0. 1遇见的问题
1、 经常忘记css中scoped存在与否所造成的影响，若想要实现重新渲染，css一定要定义为全局，否则无法重新渲染：
现象：在同一个url下，刷新页面，模板消失，因为没有找到对应全局的class
2、 疑问：如何让元素在动画加载完100%之后再消失呢？
3、 我真的！要！遭不住了！ 每次sass都会安装错版本
npm install node-sass@4.14.1
npm install sass-loader@7.3.1 --save-dev
0.2 Vscode+gitee
git init //初始化git仓库
git add . //添加所有文件到git暂存区
git add README.md(如果项目中没有这个文件，会在后面几个操作中报错，解决方法是通过命令合并：git pull --rebase origin master)
git commit -m "first commit" //提交文件到本地仓库
git remote add origin https://www.yourgiturlxxxx.git //绑定远程仓库（你自己的仓库http地址）
git push -u origin master //提交代码到远程仓库
push的时候如果出问题可以把-u改成-f
0.21 Vscode+gitlab
新建文件夹 然后git init //初始化git仓库
然后Vscode里头crtl+shift+p添加远程库，.git 然后输入账号密码
然后选择分支 就可以正常使用了
0.3 缩放适配
链接
这是个人觉得使用lib-flexible来适配的文章里讲的比较直白的
1. svg-icon的配置和使用
项目本地没有build文件夹，也没有vue.config.js文件
1.1 根目录新建vue.config.js文件，并在main.js中import，然后vue.use()它。
1.2 src文件夹下新建icons文件夹、icons文件夹下新建svg文件夹、index.js、svgo.yml文件。
1.3 index.js文件配置代码如下：
import Vue from 'vue'
import SvgIcon from '../components/SvgIcon'// 引入svg组件
Vue.component('svg-icon', SvgIcon) // 全局声明，svg-icon是组件的名字，可以自己改
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
1.4 svgo.yml文件配置代码如下：
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
# param1: 1
# param2: 2
- removeAttrs:
attrs:
- 'fill'
- 'fill-rule'
1.5 vue.config.js的配置代码
//这里注意路径问题,跟后面创建的文件位置有关
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config=>{
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},
}
1.6 图片的使用，阿里提供了一个图标库
前往图标库(点我)
下载自己喜欢的svg图片，下载后放入icons/svg下
1.7 使用
<svg-icon icon-class="图片名称"></svg-icon>
1.8 svg图片位置和大小的调整
.svg-container { /** 用于调整Svg图片的位置 */
padding: 0px 0px 0px 14px; /** 上右下左 */
vertical-align: middle;
width: 30px;
display: inline-block;
}
并
<svg-icon icon-class="图片名称" class=“svg-container”></svg-icon>
即可，记得配置完要重新加载项目，不然不显示。
npm install svg-sprite-loader --save-dev
2. this.$nextTick()的原理与使用场景
3. Route、Routes、Router —— 路由
3.1 概念
Route就是路由数组，route是单个路由，router是路由处理器。
3.2 路由配置
配置路由表router.js、配置路由器，在main.js中vue的实例化中添加router。
然后在vue组件中要添加
<router-view> </router-view>
即要渲染的区域。
3.3 静态路由
静态路由就是跳转到固定的url，即一个完整既定的url对应一个页面。
{
path:"/home",
component:home,
name:"Home"
},
重定向：因为打开网页时url都是…/, path为/，因此要将它定向到/home。
{
path:"/",
redirect:'/home',
},
3.4 动态路由
动态路由就是跳转到有参数的url，即跳转组件的url是带参数的，可变的。
如下代码段path:“/home/:id”，即/home/+任意值，都会跳转到同一个component。
{
path:"/home/:id",
component:home,
name:"Home"
},
可以在js文件中搭配this.$router.push()来构造url，比如后缀加上用户名等操作。
3.5 完整的router.js代码段
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../home/home.vue'
import hwd from '../components/HelloWorld.vue'
Vue.use(VueRouter)
const routes = [
/** 静态路由 */
{
path:"/hwd",
component:hwd,
name:"First"
},
{
path:"/home",
component:home,
name:"H"
},
/*动态路由 */
{
path:"/home/:id",
component:home,
name:"DH"
},
/** 重定向 */
{
path:"/",
redirect:'/home',
name:"DFirst"
}
]
var router = new VueRouter({
routes
})
export default router
3.6 嵌套路由
这个东西感觉很有趣…
是在练习NavBar的时候发现的内容，根据Vue官方文档，下图给出很好的解释，通俗易懂。
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
3.7 全局路由守卫
每当路由触发时都会触发的回调函数称为全局路由守卫，代码如下
router.beforeEach((to, from, next) => {
// 全局路由守卫
// 根据store中存储的login信息确认是否放行
console.log(to.name, from.name)
// 登录情况
if ( from.name === 'login' ) {
if (store.state.loginState === true) {
next()
} else {
console.log("???")
}
}
// 直接更改url打开页面的情况
if (from.name === null) {
if (store.state.loginState === true) {
// 用户现在是登录了的
if (to.name != 'login') {
// 是登录状态，但是用户直接更改url来跳转页面，因为是登录状态，所以去哪都可以
next()
} else {
// 先跳转回登录界面再跳到首页，因为用户没有登出过
next()
next({ name: 'home' })
}
} else {
if (to.name != 'login') {
// 是登出状态，用户直接更改url来跳转到非登录页面，因为是登出状态，所以强制跳转到登录页面
next({ name: 'login' })
} else {
// 是登出状态，用户直接更改url来跳转到登录页面，因为是登出状态，所以放行
next()
}
}
}
// 从其它页面打算回到登录页面的情况
if ( to.name === 'login' && from.name != null) {
// 只有通过右上角登出按钮，状态才会变成false，否则不变
if (store.state.loginState === false) {
next()
} else {
// 停留在原来的页面
next({ name: from.name })
}
}
// 其它正常情况
if (to.name !== 'login' && from.name !== 'login' && to.name !== null && from.name !== null) {
next()
}
})
4. 夜空流星背景的实现
4.1 css绘制
<template>
<div class="home-container" id="solar">
</div>
</template>
<script src="../home/home.js">
</script>
<!-- 此处须将scope去掉，设置为全局css，新增的元素才能套用样式 -->
<style lang="scss">
.home-container {
min-height: 100%;
width: 100%;
background: url('../assets/pageBg.png');
overflow: hidden;
position: fixed;
z-index: -1;
.star {
display: block;
height: 5px;
width: 5px;
position: relative;
border-radius:10px;
background-image:-webkit-linear-gradient(left,rgb(42, 4, 131),rgb(255, 255, 255),rgb(0, 255, 200),rgb(0, 134, 243));
opacity: 0.3;
/** 浏览器适应 */
animation: star-fall 3s linear infinite;
-webkit-animation: star-fall 3s linear infinite;
-moz-animation: star-fall 3s linear infinite;
}
/** after选择器 */
.star:after {
content: '';
display: block;
border: 0px solid rgba(247, 1, 165, 0.795);
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .5);
box-shadow: 0 0 1px 0 rgba(253, 3, 3, 0.534);
/*变形*/
transform: rotate(-45deg) translate3d(1px, 3px, 0);
-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
transform-origin: 0% 100%;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
}
@keyframes star-fall {
0% {
opacity: 0;
transform: scale(0.5) translate3d(0, 0, 0);
-webkit-transform: scale(0.5) translate3d(0, 0, 0);
-moz-transform: scale(0.5) translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(-100px, 100px, 0);
-webkit-transform: translate3d(-100px, 100px, 0);
-moz-transform: translate3d(-100px, 100px, 0);
}
100% {
opacity: 0;
transform: scale(1.2) translate3d(-200px, 200px, 0);
-webkit-transform: scale(1.2) translate3d(-200px, 200px, 0);
-moz-transform: scale(1.2) translate3d(-200px, 200px, 0);
}
}
}
</style>
4.2 流星动态增加
import $ from 'jquery'
export default {
mounted () {
var that = this
this.timer = setInterval(function () {
that.creatStar()
}, 500)
},
data() {
return {
starNum:20,
starMode:0,
reCount:0
}
},
beforeRouteLeave (to, from, next) {
if (from.path.substring(1,5) === 'home') {
// clearInterval(this.timer)
console.log(from.path)
}
console.log(from.path)
next()
},
created () {
},
methods : {
/* Todo: 生成流星 */
creatStar() {
var that = this
if (that.starNum > 0 && that.starMode === 0) {
$('<div class="star">').css({
left: Math.floor(Math.random() * 100) + '%',
top: Math.floor(Math.random() * 500) + 'px'
}).appendTo($('#solar')).attr('id','star' + that.starNum)
that.starNum = that.starNum - 1
if (that.starNum === 0) {
that.starMode = 1
clearInterval(this.timer)
}
}
}
}
}
使用定时器时，务必记得在跳转路由前将定时器销毁
4.3 效果图
5 sessionStorage / Vuex 存储用户信息
5.1 使用sessionStorage
存储用户信息的方式有好多种，详细参考大佬的博客
下面是代码：
created () {
this.setInfo()
this.showInfo()
},
methods : {
/** Todo: 存储用户名和登陆状态等 */
setInfo() {
var storge = window.sessionStorage
if (this.$route.params.user !== undefined) {
if (this.$route.params.user === '') {
this.loginUserName = "未知错误"
} else {
storge.setItem('name', this.$route.params.user)
}
}
},
showInfo() {
var storge = window.sessionStorage
this.loginUserName = storge.getItem('name')
}
}
5.2 使用Vuex
我真是服了, 网上一堆Vuex的教程都讲的好不详细，这里推一个讲的特别详细，手把手教的QAQ。 链接
5.2.1 安装配置
npm install --save vuex [ Vuex插件的安装 ]
npm install --save vuex-persistedstate [ Vuex持久化插件 ]
首先先在src目录下新建文件夹，在文件夹中新建store.js文件。
然后store.js文件和注释如下代码段所示：
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
/** state就是store的仓库，用来放变量的地方 */
state: {
username: 'Error'
},
/** 监听state变化 */
getters: {
getUsername(state) {
return state.username
}
},
/** 用来更改值的地方，也只有通过这里的函数才能更改 */
mutations: {
getUser(state, user) {
state.username = user
}
},
actions: {
/** 和mutations功能差不多 */
},
/** 持久化 */
plugins: [
createPersistedState()
]
})
6. vue-video-player视频播放器插件的使用
6.1 配置和基本使用
参考链接
如上链接，很全。
6.2 更改部分样式
更改样式就是重写css，覆盖就可以，打开你的F12，找找具体哪个组件对应哪个css，修改覆盖就可以了。
<template>
<el-container class="video-container" id="it">
<el-header class="header">Advertise</el-header>
<el-container>
<el-aside width="17%">放影片简介 图片 播放集数 🐶等</el-aside>
<el-main>
<video
id="example_video_1"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
data-setup='{ techOrder: ["flash","html5"]}'>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4' />
</video></el-main>
</el-container>
</el-container>
</template>
<script src="../video/video.js">
</script>
<style lang="scss">
.video-container {
height: 100%;
width: 100%;
background: url('../assets/pageBg.png');
overflow: auto;
position: fixed;
.side {
background: #5df5f6;
width:100%;
}
.header {
background: rgba(0,0,0,0) !important;
width:100%;
padding: 20px 0px 20px 110px;
}
.main {
background: #229231;
width: 80%;
}
}
.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
background-color: rgba(0,0,0,0) !important;
}
.video-js {
width:100%;
height:90%;
}
/*播放按钮设置成宽高一致，圆形，居中*/
.video-js .vjs-big-play-button {
background-image: url('../assets/light.png');
background-color: rgba(0,0,0,0) !important; // 让播放器按钮背后的矩形透明度为0，这样显示的就是导入的矢量图了
background-position: 40% 55%;
background-size: 100%;
font-size: 3.5em;
height: 3em !important;
top: 42%;
width: 2em;
line-height: 2em !important;
margin-top: -1em !important;
margin-left: -1em !important;
outline: none;
border: none;
}
.video-js .vjs-slider{
border-radius: 5em;
opacity: 0.8;
}
.video-js .vjs-control-bar{
/*底端Bar的播放按钮*/
.vjs-paused{
background-image: url('../assets/play.png') !important;
width: 2.3em;
height: 2.3em;
margin: 4px 0px 0px 5px;
color: rgba(0,0,0,0) !important;
background-size: 100%;
outline: none; // 消除边框
}
/*底端Bar的停止按钮*/
.vjs-playing{
background-image: url('../assets/stop.png') !important;
width: 2.3em;
height: 2.3em;
margin: 4px 0px 0px 5px;
color: rgba(0,0,0,0) !important;
background-size: 100%;
outline: none; // 消除边框
}
}
</style>
中间的大图标被我搞成了个灯笼，左下角播放暂停按钮也被我修改了，其它的类推，比较耗费时间就先搁置了，先搞其它的东西。具体样式如下所示：
参考链接1
参考链接2
至于之后用axios向服务器请求资源什么的，就放到后面的模块去说啦~
7 this指针重定向
再回调函数function体内指针发生变化并且无法在回调函数体function内设置_this = this时可以考虑：
function();
this.function.call(null);
调用完call之后，this指针指向window，此时就可以指向data中的数据进行访问了。
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
