默认样式 < 标签选择器 < 类选择器 <id 选择器 < 行内样式 <!important
0 1 10 100 1000 1000 以上
继承的权重为 0 (字体的 css 会继承自父类标签元素)
权重会叠加 (div.box 权重:1+10=11) (div #box 权重:1+100=101)
相同权重的选择器,后边的代码会覆盖前面的
a) 使用 CSS 方法:父盒子设置:display:table-cell;text-align:center;vertical-align:middle;
子盒子设置:display:inline-block;vertical-align:middle;
代码实现:=>
.father{
width:300px;
height:300px;
display:table-cell;
text-align:center;
vertical-align:center;
}
.son{
background:red;
display:inline-block;
vertical-align:middle;
}
b) 使用 CSS3 transform:
父盒子设置:position:relative;
子盒子设置:position:absolute;left:50%;top:50%;transform:transform(-50%,-50%);
代码实现:=>
.father{
width:300px;
height:300px;
position:relative;
}
.son{
background:red;
position:absolute;
top:50%;
left:50%;
transform:transform(-50%,-50%);
}
c) 弹性盒子:父盒子设置:display:flex;justify-content:center;align-item:center;
子盒子设置:空,不需要设置
代码实现:=>
.father{
width:300px;
height:300px;
display:flex;
justify-content:center;
align-item:center;
}
.son{background:red;}
[参考]([https://zhuanlan.zhihu.com/p/27186791][1])
代码实现:=>
#eg{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid blue;
}
代码实现:=>
let str = '2019-4-28';
let year = str.split('-')[0];
let month = str.split('-')[1];
let date = str.split('-')[2];
let str1 =year+"年"+month+"月"+date+"日";
console.log(str1);
代码实现:=>
var arr=['a','b','c'];
//var arr1=arr.sort();// 正序
var arr1=arr.reverse();// 反序
console.log(arr1);
answer:=>
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
[详细]([https://www.cnblogs.com/xkloveme/p/7435271.html][2])
answer:=>
是 Vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM。对应的钩子函数:activated
类型:func
触发时机:keep-alive 组件激活时使用;deactivated
类型:func
触发时机:keep-alive 组件停用时调用;
answer:=>
事件修饰符处理了许多 DOM 事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在 Vue 中事件修饰符主要有:.stop:等同于 JavaScript 中的 event.stopPropagation(),防止事件冒泡
.prevent:等同于 JavaScript 中的 event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播).capture:与事件冒泡的方向相反,事件捕获由外到内
.self:只会触发自己范围内的事件,不包含子元素
.once:只会触发一次
举个栗子:=>
.stop 防止事件冒泡
冒泡事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从内至外
子节点 - 父节点的点击事件
导航守卫即是在路由跳转的时候,根据 vue-router 提供的导航守卫主要用来通过跳转或取消参数
或查询的改变并不会出触发进入 / 离开的导航守卫
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。
1.router-link
2.this.$router.push() ( 函数里面调用)
3.this.$router.replace() ( 用法同上,push)
4.this.$router.go(n) ()
[详细介绍]([https://blog.csdn.net/jiandan1127/article/details/86170336][3])
answer:=>
vuex 是一个专为 vue.js 应用程序开发的状态管理模式。vuex 解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要
状态管理核心状态管理有 5 个核心,分别是 state、getter、mutation、action 以及 module。1.state
state 为单一状态树,在 state 中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在 vue.js 的组件中才能获取你定义的这个对象的状态。2. 简单的 store 模式
var store = {
debug: true,
state: {message: 'Hello!'},
setMessageAction (newValue) {if (this.debug)
console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {if (this.debug) console.log('clearMessageAction triggered') this.state.message = ''
}
}
所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。此外,每个实例 / 组件仍然可以拥有和管理自己的私有状态:var vmA = new Vue({
data: {privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {privateState: {},
sharedState: store.state
}
})
End!