CSS写Vue静态页面的动效:

想法就是 ,通过在Vue中植入事件 , 事件获取css的节点元素 ,通过鼠标的移入, 移除的触发, 实现触动的事件; 

１－创建Vue框架系统：　

以Ｖｕｅ作为基础框架，发版简单，

２－使用Ｖｕｅ页面，　填充Ｃｓｓ

使用ｃｓｓ作为页面的元素，　填充内容，　作为静态的资源　；　

３－页面特效

３－１鼠标移入　移出：

//两个事件同时存在, 移入 和 移除  
​
 // 移入  $event 携带的参数是当前的元素节点
@mouseenter="enter($event)"
 // 移除
@mouseleave="leave($event)"
​
// 方法区 
enter(e){
    // e表示获取倒了当前css属性class ; 
    e.target.style.backgroundColor =  "#efefef"
}
leave(e){
    e.target.style.backgroundColor =  "#fff"
}
​
// ========================
// 第一种方式, 直接修改属性
e.target.style.background  = "#FFDA81"
// 第二种方式, 直接修改class引用 , 这种方式提前写好多个class的样式
e.currentTarget.className="seven7";
​
​
//通过log打印出来获取当前节点的元素 ; 选定元素 ; 最后使用 .style.color = "" 属性
获取子元素
children
​

如果是其他类型的表单,  可以用插件的, 用插件也行; 上述笔记提供给需要用CSS需求的 ; 

也可以适当的增加v-if的手段控制隐藏和展示;  

:Class=  进行class效果的双向绑定;