VUE使用大全

vue

官网  https://cn.vuejs.org/

下载

1.X

2.X

优点

mvvm的框架

angular

上手比较麻烦

用在pc端多

google支持

ng-XXX

所有的属性方法放在$scope

vue

上手简单，易学

小巧，pc，移动都好

全球的使用量比angular高很多

华人个人开发

v-XXX

他的属性和方法都在json，他都是new出来的

共同点：都不兼容低版本

使用

var app=angular.module('模块名称',[]);

app.controller('控制器的名称',function($scope,$http){

$scope,$http    名称不能变，但是顺序能变

$scope挂属性和方法

})

var vue=new Vue({ //可以new多个，就想ng里面控制器一样

el:'.box',  //控制范围  选择器

data:{      //是挂属性的

msg:'abc'

}，

methods:{  //是挂方法的

add:function(){

}

}

});

注：el 和 data写死的必须这么写

选择器 只能选择一个

指令：

v-model 表单元素产生数据

radio on off

checkbox true false

v-for="v in arr/json" v-->value

v-for="(k,v) in arr/json" v-->value

数组:$index  json:$key

事件：

v-on:click="add()"

v-on:mouseover

简写：@click="add()"

事件对象 $event

组织默认行为 ev.preventDefault();

简写: @contextmenu.prevent

阻止冒泡：ev.cancelBubble=true;

event.stopPropagation()

简写：@click.stop

键盘事件：ev.keyCode

简写：@keyup.13

@keyup.enter

@keyup.left

传参：顺序不能乱

属性里面直接用参数会报错，但是能出来

v-bind

vue里面属性都是用v-bind来绑定的

v-bind:src="这里面写的数据不用模板"

简写  :src推荐

:class

1、data:{

msg:'red'

}

:class="msg"

2、data:{

a:'red',

b:'border',

c:'margin'

}

:class="[a,b,c]"  //a b c 都是数据

3、data:{

a:true,

b:false

}

:class="{red:a,border:b}"

4、data:{

json:{red:true,border:false}

}

:class="json"

:style

data:{

a:{

width:'100px'

},

b:{

height:'100px'

}

}

:style=[a,b]

data:{

a:100,

b:'red'

}

:style="{height:a+'px',background:b}"

页面渲染

非转译输出

{{}}  数据更新模板就变化

{{*}} 数据只绑定一次,初始化的时候是什么就是什么

{{{}}} HTML转译输出

过滤器

|过滤器名称 参数

{{msg|currency '￥'} 钱

{{data1|uppercase}}

{{data2|lowercase}}

{{data3|capitalize}}

|过滤器名称 |过滤器名称 |过滤器名称.....

交互

ng $http

vue

1、下载vue-resource.js

npm cnpm bower

2、引入

XHR

this.$http.post('a.txt').then(function(res){

this.msg=res.data;

},function(){

alert('网络链接失败')

})

JSONP:

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

this.$http.jsonp('url',{params:{wd:'a'},jsonp:'cb'}).then(function(res){

},function(){

})