1.vuejs简介    vue到底是什么?

一个mvvm框架(库)、和angular类似  比较容易上手、小巧官网:http://cn.vuejs.org/ 

手册： http://cn.vuejs.org/api/

2.vuejs与angular的区别。

vue：

简单、易学，指令以 v-xxx，一片html代码配合上json，在new出来vue实例，个人维护项目  ，适合: 移动端项目,小巧

vue的发展势头很猛，github上start数量已经超越angular，

angular: 指令以 ng-xxx,所有属性和方法都挂到$scope身上,angular由google维护 ,,合适: pc端项目

angular展示一条基本数据:
        var app=angular.module(‘app‘,[]);

        app.controller(‘xxx‘,function($scope){    //C
            $scope.msg=‘welcome‘
        })

        html:
        div ng-controller="xxx"
            {{msg}}

共同点: 不兼容低版本IE

3.简单的代码。

<div id="box">
	{{msg}}
</div>

var c=new Vue({
	el:‘#box‘,	//选择器  class tagName
	data:{
	      msg:‘welcome vue‘
	}
});

4.常用指令：

angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

5.vue常用指令

v-model 一般表单元素(input) 双向数据绑定

6.循环:
v-for="name in arr"
{{$index}}

v-for="name in json"
{{$index}} {{$key}}

v-for="(k,v) in json"

7.事件:
v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
  el:‘#box‘,
  data:{ //数据
      arr:[‘apple‘,‘banana‘,‘orange‘,‘pear‘],
      json:{a:‘apple‘,b:‘banana‘,c:‘orange‘}
  },
 methods:{
    show:function(){ //方法
    alert(1);
   }
  }
});

 8.

显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):

bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class，角色
依赖jquery

9.

事件:
v-on:click/mouseover......

简写的:
@click="" 推荐

事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup

常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....

10.

属性:
v-bind:src=""
width/height/title....

简写:
:src="" 推荐

<img src="http://www.mamicode.com/{{url}}" > 效果能出来，但是会报一个404错误
<img v-bind:src="http://www.mamicode.com/url" > 效果可以出来，不会发404请求

11.

class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[red]" red是数据
:class="[red,b,c,d]"

:class="{red:a, blue:false}"//data中只有a没有red之类的。

:class="json"

data:{
json:{red:a, blue:false}//推荐
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"

12.

模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次

{{{msg}}} HTML转意输出

13.

过滤器:-> 过滤模板数据
系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase eg: {{‘welcome‘| uppercase}}
lowercase
capitalize

currency 钱

{{msg| filterA 参数}}

14.

get:
        获取一个普通文本数据:
        this.$http.get(‘aa.txt‘).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
        给服务发送数据:√
        this.$http.get(‘get.php‘,{
            a:1,
            b:2
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    post:
        this.$http.post(‘post.php‘,{
            a:1,
            b:20
        },{
            emulateJSON:true
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    jsonp:
        https://sug.so.360.cn/suggest?callback=suggest_so&word=a

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

        this.$http.jsonp(‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,{
            wd:‘a‘
        },{
            jsonp:‘cb‘    //callback名字，默认名字就是"callback"
        }).then(function(res){
            alert(res.data.s);
        },function(res){
            alert(res.status);
        });

15.

this.$http({
url:地址
data:给后台提交数据,
method:‘get‘/post/jsonp
jsonp:‘cb‘ //cbName
});

16.

vue生命周期:
钩子函数:

created -> 实例已经创建 √
beforeCompile -> 编译之前
compiled -> 编译之后
ready -> 插入到文档中 √

beforeDestroy -> 销毁之前
destroyed -> 销毁之后

17.

用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落
看这篇博客：http://www.cnblogs.com/cjlll/p/6077430.html
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html

18.

计算属性的使用:
computed:{
b:function(){ //默认调用get
return 值
}
}
--------------------------
computed:{
b:{
get:
set:
}
}

* computed里面可以放置一些业务逻辑代码，一定记得return

19.

vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

vm.$options -> 获取自定义属性
vm.$destroy -> 销毁对象

vm.$log(); -> 查看现在数据的状态

20.

循环：
v-for="value in data"

会有重复数据？
track-by=‘索引‘ 提高循环性能

track-by=‘$index/uid‘

21.

过滤器:
vue提供过滤器:
capitalize    uppercase    currency....

debounce    配合事件，延迟执行
数据配合使用过滤器:
limitBy    限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

filterBy    过滤数据
filterBy ‘谁’

orderBy    排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){

});

22.

@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:
Vue.directive(‘on‘).keyCodes.ctrl=17;
Vue.directive(‘on‘).keyCodes.myenter=13;

23.

自定义元素指令:（用处不大）
Vue.elementDirective(‘zns-red‘,{
bind:function(){
this.el.style.background=‘red‘;
}
});

24.

监听数据变化:
vm.$el/$mount/$options/....

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

vuejs点滴