十一.Vue过渡动画
1. 使用过渡类 <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateX(200px) } .v-enter-active,.v-leave-active{ transition: all 0.8s ease } </style> <transit…
516
|
|
|
|
192 字
|
7 分钟
十.vue-resource实现get, post, jsonp请求
vue-resource 实现 get, post, jsonp请求 methods:{ getInfo(){ // 当发起get请求之后, 通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo') .then(result=>{ console.log(…
419
|
|
|
|
148 字
|
3 分钟
九.Vue实例的生命周期
什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已; 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类: 创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 metho…
426
|
|
|
|
469 字
|
2 分钟
八.自定义命令
使用自定义命令 <label >搜索名字关键字:<input type="text" v-model="keyWord" v-focus v-color="'green'"></label> 定义全局自定义命令 Vue.directive('focus', { //钩子函数 bind: function (el)…
504
|
|
|
|
83 字
|
3 分钟
七.键盘修饰符
1. 使用默认的(enter,tab,ctrl...) <div id="app" @keyup.enter="create"> 注意焦点一定要在使用键盘修饰符的地方才能生效 2.自定义键盘修饰符 官方文档 1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名: Vue.config.keyCode…
581
|
|
|
|
82 字
|
1 分钟内
六.过滤器
过滤器 <div id="app"> <!-- 不加参数 --> <h3>{{msg | myFilter}}</h3> <!-- 加一个参数 --> <h3>{{msg | myFilter1("23")}}</h3> <!-- 使用多个过滤器 -->…
571
|
|
|
|
99 字
|
3 分钟
五.品牌管理案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
447
|
|
|
|
84 字
|
5 分钟
四.双向数据绑定
v-model双向数据绑定 只适用于表单元素(input,select,checkbox,textarea) <input type="text" v-model="msg" style="width: 80%;"> <!DOCTYPE html> <html lang="en"> <head> &l…
481
|
|
|
|
78 字
|
3 分钟
三.跑马灯效果练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
472
|
|
|
|
46 字
|
3 分钟
二.Vue基础使用
基本语法 <p>{{value}}</p>插值表达式 <!-- MVVM中的V --> <div id="app"> <p>{{value}}</p> </div> <script> // MVVM中VM的调度者 var vm=new Vue({ el:…
610
|
|
|
|
773 字
|
6 分钟