vue.js

vue.js

------------------

mvvm

m model 数据

v view  视图

vm  viewModel

------------------

1、vue声明方式

new Vue({

el:'选择器'//vue的范围

data:  //在这个范围内的所有参数

methods //在这个范围内的所有方法

})

注:1、选择器,哪怕选出来的是一组,也默认第一个有效果

2、el、data、methods固定的单词不能变,里面随便

3、this始终是vue

4、当前触发事件的对象

ev.target

2、vue的生命周期--从诞生到消亡

new对象----创建实例

钩子---钩子函数---生命周期钩子

在对象声明的过程中,会有不同的阶段,每个阶段都有一个标志,这个标志就是钩子,钩子函数就是在每个对应阶段执行的函数

1、实例已经创建 created

2、编译之前    beforeCompile

3、编译之后    compiled

4、模板替换    ready

5、消亡之前    beforeDestroy

6、消亡之后    destroyed

created:function(){

alert('实例已经创建')

},

beforeCompile:function(){

alert('编译之前')

},

compiled:function(){

alert('编译之后')

},

ready:function(){

alert('插入到文档中')

},

beforeDestroy:function(){

alert('销毁之前')

},

destroyed:function(){

alert('销毁之后')

}

3、实例的属性:

vm.$watch  监控数据发生改变

vm.$destroy 销毁对象

vm.$el    就是容器对象

vm.$data  就是数据data89

vm.$mount 手动挂在vue对象

vm.$log    当前vue对象的状态

eg:

vm.$watch  监控你的数据是否发生变化

vm.$watch('你要监控的数据',function(str){  //浅度监控

如果发生变化你要干什么

})

str是变化后的东西

注:数组和字符串发生改变都可以,但是json不行

vm.$watch('你要监控的数据',function(){  //深度监控

如果发生变化你要干什么

},{deep:true})

4、指令  扩充了html语法

v-model="表单元素产生的数据"

radio on off

checkbox true false

v-for

v-for="v in arr"

v---value

$index---下标

v-for="name in json"

name---json里的值

$key---json里的建

v-for="(i,v) in arr"

i---下标

v---value

注:如果有重复的:+

{{v}}

v-on:

v-on:click/mouseover/keyup...

简写@click

$event

事件的简写

组织冒泡:@click.stop

组织默认事件:@click.prevent

键盘

@keyup.键码

@keyup.enter/left/esc/space

注:传参不能乱

自定义键码:

Vue.directive('on').keyCodes.ctrl=17;

v-bind:

属性里面放表达式可以,但是最好用绑定的形式

v-bind:src/title/link

简写:src

:class

1、直接写数据

data:{

      msg:'red'

}

:class="msg"

2、写数组

:class="[a,b,c]"

//a b c 都是数据

3、写json

data:{

    json:{red:true,border:false}

}

:class="json"

:style

1、直接写

:style="a"

data:{

    a:{

          width:100px

    }

}

2、数组

:style="[a,b]"

data:{

    a:{

        width:100px

    },

    b:{

        width:100px

    }

}

3、json

:style="{width:a,border:b}"

data:{

    a:'100px',

    b:'5px solid blue'

}

自定义指令:

Vue.directive('red',function(){

    this.el.style.background='red';

    //this.el 一个原生的对象

});

注:指令必须以v打头

自定义元素指令

Vue.elementDirective('zns-red', {

    bind: function () {

        this.el.style.background='red';

    }

});

5、页面渲染(模板,表达式)

非转译输出

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

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

转译输出

{{{}}} 把html代码转化成页面能看懂的

过滤器

|过滤器名称 参数

currency 钱

uppercase 转大写

lowercase 转小写

capitalize 首字母大写

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

limitBy 数据处理

{{arr | limitBy 1}} 从头开始截取几个

{{arr | limitBy 1 2}}  截取几个 从哪开始

filterBy 过滤数据

orderBy

{{v}}

1 是字符串的排列方式的正序 默认是1

-1 倒叙

注:|过滤器名称 |过滤器名称.....

自定义过滤器

Vue.filter('过滤器名称',function(input){

    return

    //input 就是要过滤的内容

})

防止页面刷新出现花括号

v-cloak  把要渲染的数据先遮蔽注

注:一般用在模块上,大段

在要渲染的模块上加v-cloak

然后在样式里面加

[v-cloak]{

    display:none

}

单个标签

v-text="数据"

v-html="数据"  转译输出

6、属性的计算:

computed:{**

    要展示的属性名:function(){

        return 返回什么就展示什么

    }

}

注:一定要写return

---------------

computed:{

    要展示的属性名:{

        get:function(){},//一定要写return

        set:function(){}//不写return

    }

}

7、交互:

1、下载vue-resource.js

npm cnpm bower

2、引入

3、使用

this.$http.get/post/jsonp('url',{params:{}}).then(succFn,errFn)

------------------------------

补充angularJS

渲染数据:

{{}}

如果angular挂了,或者网速慢,出来{{}}

ng-bind

会把这个标签内的所有东西覆盖掉

自定义过滤器

app.filter('过滤器名称',function(){

return function(inp){

inp:要过滤的内容

}

})

自定义指令

app.directive('指令名称',function(){

return function(scope,element,attr){

}

})

你可能感兴趣的