vue学习笔记

1、vue于angular的区别

vue:一片html代码配合上JSON,在new一个vue实例。 适合移动端项目，小巧；发展势头很猛； angular：所有属性方法都挂在$scope上； 适合PC端项目

共同点：不兼容IE低版本

2、vue 基本雏形

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app',//选择器 data: { //存储数据 message: 'hellow world!' } })

3、常用指令（扩展HTML标签功能，属性）

1、v-model 一般表单元素（input） 双向数据绑定 2、循环 v-for="value in arr" {{value}} {{$index}} v-for="value in json" {{value}} {{$index}} {{$key}} <li v-for="(k,v) in json">{{$index}}-{{v}}--{{k}}</li>

4.事件 v-on 简写->@

1. v-on:click/mouseout/mouseover/mousedowm/dbclock....=函数（）； methods:{ add:function () { this.arr.push('shab'); } } 2、显示影藏 v-show=true/false

事件对象 @click = "show($event)"

事件冒泡

阻止冒泡 ： 1 ev.cancalBubble=true; 2 @click.stop 阻止默认行为： 1 ev.preventDefault(); 2 @contextmenu.prevent (右键点击)

键盘事件

@keydown/keyup='show($event)' show:function(e){alert(e.keyCode)} 简写：@keyup.13='show()'==@keyup.enter='show()' //回车 @keyup.down/up/left/right='show()'

5.属性 v-bind

<img v-bind:src='url'>---简写<img :src='url' ：width='w'>

class和style

:class='[red]' 数据

：class='[red,blue,...]' :cladd="{red:true,blue:true}"

:class:'json' data:{red:true,blue:false}

:style="[c,d]" 

data:{ a:{color:'red'}, b:{backgroundColor:'teal'} //复合样式采用驼峰 }

:style:"json" 

data:{red:true,blue:false} 

6.模板

{{msg}} 双向绑定{{*msg}} 数据只绑定一次（第一个）{{{}}} html转义

7.过滤器

{{msg|filterA}} 

{{msg|capitalize}} 首字母大写

{{msg|lowercase|capitalize}} 转小写再首字母大写

{{msg|currency}} $

{{msg|currency '参数'}} 参数+msg

debounce 配合事件使用,延迟执行

@keyup='show() | debounce 1000'

数据配合使用过滤器

limitBy 限制个数limitBy 参1（取几个）limitBy 参1（取几个）参2（从哪开始）  {{v}} filterBy 过滤数据 {{v}}

//搜索 

{{v}} orderBy 排序 (1 正序 -1 倒序)

自定义过滤器

//自定义过滤器 Vue.filter('toDou',function (input) { return input<10? '0'+input:input; }) <div id="app"> <input type="text" v-model='a'> {{a | toDou}} </div>

时间转换

+<div id="app"> <input type="text" v-model='a'> {{a | date}} </div> <script> //时间转换器 Vue.filter('date',function (input) { var oDate=new Date(input); return oDate.getFullYear()+'-'+oDate.getMonth()+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); })

过滤html标签

+ two-way （双向过滤器） <div id="box"> <input type="text" v-model="msg | filterHtml"> <br> {{{msg}}} </div> Vue.filter('filterHtml',{ read:function(input){ //model-view // alert(1); return input.replace(/<[^<]+>/g,''); //过滤HTML标签 }, write:function(val){ //view -> model alert(123); console.log(val); return val; } });

8.交互 $http (ajax)

vue 交互引入：vue-resouce 服务器环境php

get

<input type="button" value='按钮' @click='get()' get:function () { this.$http.get('text1.txt').then(function (data) { alert(data.data); },function (res) { alert(res.status) }) }

post

<input type="button" value='按钮' @click='post()' post:function () { this.$http.post('post.php',{ a:3, b:9 },{ emulateJSON:true }).then(function (data) { alert(data.data); },function (res) { alert(res.status) }) }

jsonp

<input type="button" value='按钮' @click='jsonp()' jsonp:function () { this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:'a' },{ jsonp:'cb' //callback名字 默认为callback }).then(function (data) { console.log(data); alert(data.data.s); },function (res) { alert(res.status) }) }

合写

this.$http({ url:地址， data:{ method:'get/post/jsonp' jsonp:"cb//cbName" } })  eg:this.$http({ url:URL, data:{ act:'get', page:n } }).then(function (res) {}

9.vue生存周期

钩子函数 ：

created:function(){} //实例创建

beforeCompile:fun(){} //编译之前

compile:fun(){} //编译之后

ready: //插入到文档中

beforeDestroy //销毁之前

destroy //销毁之后

10.防止闪烁

v-cloak  style---- [v-cloak]{display：none} v-test v-html {{{msg}}} eg: {{msg}}  {{{msg}}}

11.计算属性的使用（watch）

computed 里面可以放置一些业务逻辑 data不能 记得return  computed：{ //默认调用get b:fun(){ return 值} } var vm= new Vue({ el: '#app', data: { a:2 }, computed:{ b:{ get:function () { return this.a*2; }, set:function (val) { this.a=val; } } } }) document.οnclick=function () { vm.b=6; }

12.vue实例的一些方法

vm.$el //就是元素vm.$data //就是datavm.$mount //手动挂载

var vm= new Vue({

data: { a:'lalal' }

}).$mount('#app'); // vm.$mount('#app'); console.log(vm.$el); vm.$el.style.background='red';

console.log(vm.$data.a);

vm.$options.属性 //获取自定义属性 vm.$destroy //销毁属性vm.$log() //查看现在数据的状态

13.循环重复数据

v-for='v in data' 有重复数据不能添加还会报错 使用track-by='$index' 提高循环性能

14.自定义指令 **必须以V-开头

Vue.directive(指令名称不要v-,fun(){ }))

eg: Vue.directive('red',function () { //this.el 原生DOM this.el.style.background='red'; })

拖拽

Vue.directive("drag",function(){ var div = this.el; div.onmousedown = function(e){ var disX = e.clientX- div.offsetLeft; var disY = e.clientY - div.offsetTop; document.onmousemove = function(e){ var l =e.clientX -disX; var t =e.clientY- disY; div.style.left = l + "px"; div.style.top = t+ "px"; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } } }) window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); };

自定义元素指令：（了解） Vue.elementDirective('ma-red',{ bind:fun(){ this.el.style.color="red'; }

})

自定义键盘信息 --@keydown.up @keydown.down 自定义键盘ctrl Vue.directive("on").keyCodes.ctrl=17;

15.监听数据变化

vm.$watch(name,fun(){})) //浅度 var vm=new Vue({ el:'#box', data:{ msg:'welcome', info:'hello' }

}); vm.$watch('msg',function () { alert('变化了'); this.info='haha' }); document.onclick=function () { vm.msg='sb' }

vm.$watch(name,fun(){deep:true})) //深度监视

var vm=new Vue({ el:'#box', data:{ msg:{name:'zs',age:18}, info:'hello' } }); vm.$watch('msg',function () { alert('变化了'); this.info='haha' },{deep:true}); document.onclick=function () { vm.msg.name='sb' } <div>{{msg | json}}</div //json过滤器 相当于JSON.stringify --js转换为字符串