vue中 keep-alive 会缓存页面的上一次状态
超出显示省略号 (单行
.oneline {
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: horizontal;
-webkit-line-clamp: 1;
line-clamp: 1;
display: -webkit-box;
}
超出显示省略号 (多行
.twoline {
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
}
解决 vue创建的时候 缺少 node-sass 依赖
npm install sass-loader@7.1.0 node-sass@4.9.0 --save-dev //安装对应的版本
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev //安装对应的版本
Vue transition标签添加动画
cnpm install animate.css --save
import animated from ‘animate.css’
Vue.use(animated)
<button class="btn" @click="isShow = !isShow">显示内容</button>
<transition enter-active-class="animate__animated animate__jello" leave-active-class="animate__animated animate__backInUp">
<h1 class="h1" v-if="isShow">Vue 内置动画 </h1>
</transition>
Vue3与Vue2 差异
import { reactive,toRefs,computed ,onMounted ,onUnmounted} from 'vue'
// 启动函数(在dom创建前就启动了
setup(props,context){
// 1. 数据 接收一个对象为参数 返回响应式的
const state = reactive({
id:1,
name:"文木",
// 计算属性
num:computed (()=> state.id + 5)
})
// 2. 事件
const methods = {
change (){
console.log(‘123.....’)
state.id = 3
}
}
// 3. 挂载 页面 dom 初始化完毕
onMounted(()=>{
})
// 销毁
onUnmounted(()=>{
})
// 返回出去的信息
return {
// es6 扩展运算符,结构会取消双向绑定数据的特性
// toRefs 会转换成响应式的数据
...toRefs(state),
...methods
}
}
浅拷贝
var clone = Object.create(Object.getPrototypeOf(obj),Object.getOwnPropertyDescriptors(obj))