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){
}
})
网友评论