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请求 methods:{ getInfo(){ // 当发起get请求之后， 通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo') .then(result=>{ console.log(…
什么是生命周期：从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> <!-- 使用多个过滤器 -->…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
v-model双向数据绑定 只适用于表单元素（input,select,checkbox,textarea） <input type="text" v-model="msg" style="width: 80%;"> <!DOCTYPE html> <html lang="en"> <head> &l…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…
基本语法 <p>{{value}}</p>插值表达式 <!-- MVVM中的V --> <div id="app"> <p>{{value}}</p> </div> <script> // MVVM中VM的调度者 var vm=new Vue({ el:…