标签: Vue

21 篇文章

十一.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…
十.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(…
thumbnail
九.Vue实例的生命周期
什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已; 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类: 创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 metho…
八.自定义命令
使用自定义命令 <label >搜索名字关键字:<input type="text" v-model="keyWord" v-focus v-color="'green'"></label> 定义全局自定义命令 Vue.directive('focus', { //钩子函数 bind: function (el)…
七.键盘修饰符
1. 使用默认的(enter,tab,ctrl...) <div id="app" @keyup.enter="create"> 注意焦点一定要在使用键盘修饰符的地方才能生效 2.自定义键盘修饰符 官方文档 1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名: Vue.config.keyCode…
六.过滤器
过滤器 <div id="app"> <!-- 不加参数 --> <h3>{{msg | myFilter}}</h3> <!-- 加一个参数 --> <h3>{{msg | myFilter1("23")}}</h3> <!-- 使用多个过滤器 -->…
thumbnail
五.品牌管理案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
thumbnail
四.双向数据绑定
v-model双向数据绑定 只适用于表单元素(input,select,checkbox,textarea) <input type="text" v-model="msg" style="width: 80%;"> <!DOCTYPE html> <html lang="en"> <head> &l…
thumbnail
三.跑马灯效果练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
thumbnail
二.Vue基础使用
基本语法 <p>{{value}}</p>插值表达式 <!-- MVVM中的V --> <div id="app"> <p>{{value}}</p> </div> <script> // MVVM中VM的调度者 var vm=new Vue({ el:…