常用的 记事本

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))