对vue的初步学习(二)

案例:vue制作weibo
交互

vue-> 1.0
vue-resource ajax php
服务器环境(node)

this.$http.get()/post()/jsonp()

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

vue事件:
@click=""
数据:

添加一条留言：

获取某一页数据:
getPageData(1);

详细见案例
----------------------------------
vue生命周期:
钩子函数:

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

beforeDestroy -> 销毁之前
destroyed -> 销毁之后
----------------------------------
用户会看到花括号标记:

v-cloak 防止闪烁, 比较大段落
----------------------------------
<span>{{msg}}</span> -> v-text
{{{msg}}} -> v-html
----------------------------------
ng: $scope.$watch

 1  <div id="box">
 2         {{msg}}
 3     </div>
 4     <script>
 5         var vm=new Vue({
 6             el:'#box',
 7             data:{
 8                 msg:'well'
 9             },
10             created:function(){
11                 alert('实例已经创建');
12             },
13             beforeCompile:function(){
14                 alert('编译之前');
15             },
16             compiled:function(){
17                 alert('编译之后');
18             },
19             ready:function(){
20                 alert('插入到文档中');
21             },
22             beforeDestroy:function(){
23                 alert('销毁之前');
24             },
25             destroyed:function(){
26                 alert('销毁之后');
27             }
28         });
29 
30         /*点击页面销毁vue对象*/
31         document.onclick=function(){
32             vm.$destroy();
33         };
34     </script>

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

 1 <div id="box">
 2         a => {{a}}
 3         <br>
 4         b => {{b}}
 5     </div>
 6     <script>
 7         var vm=new Vue({
 8             el:'#box',
 9             data:{
10                 a:1
11             },
12             computed:{
13                 b:{
14                     get:function(){
15                         return this.a+2;
16                     },
17                     set:function(val){
18                         this.a=val;
19                     }
20                 }
21             }
22         });
23 
24         document.onclick=function(){
25             vm.b=10;
26         };
27     </script>

* computed里面可以放置一些业务逻辑代码，一定记得return
---------------------------------
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

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

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

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

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

track-by='$index/uid'

 1  <div id="box">
 2         <input type="button" value="添加" @click="add">
 3         <ul>
 4             <li v-for="val in arr" track-by="$index">
 5                 {{val}}
 6             </li>
 7         </ul>
 8     </div>
 9     <script>
10 
11         var vm=new Vue({
12             data:{
13                 arr:['apple','pear','orange']
14             },
15             methods:{
16                 add:function(){
17                     this.arr.push('tomato');
18                 }
19             }
20         }).$mount('#box');
21 
22     </script>

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

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

filterBy 过滤数据
filterBy ‘谁’

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

 1 <div id="box">
 2    <ul>
 3        <!--limitBy 参数(取几个)
 4         limitBy 取几个  从哪开始-->
 5        <li v-for=" val in arr | limitBy 2 1">{{val}}</li>
 6    </ul>
 7     <script>
 8         var vm=new Vue({
 9             data:{
10                 arr:[1,2,3,4,5]
11 
12             },
13             methods:{
14 
15             }
16         }).$mount('#box')
17     </script>
18 
19 </div

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

});

时间转化器

 1 <div id="box">
 2     {{a | date}}
 3 </div>
 4 <script>
 5     Vue.filter('date',function(input){
 6         var oDate=new Date(input);
 7         return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
 8     });
 9 
10     var vm=new Vue({
11         data:{
12             a:Date.now()
13         },
14         methods:{
15 
16         }
17     }).$mount('#box');
18 
19 </script>

过滤html标记

双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});

 1 <script>
 2         //<h2>welcome</h2>
 3         Vue.filter('filterHtml',{
 4             read:function(input){ //model-view
 5                 alert(1);
 6                 return input.replace(/<[^<]+>/g,'');
 7             },
 8             write:function(val){ //view -> model
 9                 console.log(val);
10                 return val;
11             }
12         });
13         window.onload=function(){
14             var vm=new Vue({
15                 data:{
16                     msg:'<strong>welcome</strong>'
17                 }
18             }).$mount('#box');
19         };
20 
21     </script>
22 </head>
23 <body>
24     <div id="box">
25         <input type="text" v-model="msg | filterHtml">
26         <br>
27         {{{msg}}}
28     </div>

数据 -> 视图
model -> view

view -> model
---------------------------------
v-text
v-for
v-html
指令: 扩展html语法

自定义指令:
属性:

Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});

指令名称: v-red -> red

* 注意: 必须以 v-开头

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

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

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

 1 <script>
 2         //ctrl 获取键码->17
 3         /*document.onkeydown=function(ev){
 4             console.log(ev.keyCode);
 5         };*/
 6         Vue.directive('on').keyCodes.ctrl=17;  //
 7         Vue.directive('on').keyCodes.myenter=13;
 8 
 9         window.onload=function(){
10             var vm=new Vue({
11                 el:'#box',
12                 data:{
13                     a:'blue'
14                 },
15                 methods:{
16                     show:function(){
17                         alert(1);
18                     }
19                 }
20             });
21         };
22 
23     </script>
24 </head>
25 <body>
26     <div id="box">
27         <input type="text" @keydown.myenter="show | debounce 2000">  
28     </div>

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

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

 1  <script>
 2 
 3         window.onload=function(){
 4             var vm=new Vue({
 5                 el:'#box',
 6                 data:{
 7                     json:{name:'strive',age:16},
 8                     b:2
 9                 }
10             });
11 
12             vm.$watch('json',function(){
13                 alert('发生变化了');
14             },{deep:true});
15 
16             document.onclick=function(){
17                 vm.json.name='aaa';
18             };
19         };
20 
21     </script>
22 </head>
23 <body>
24     <div id="box">
25         {{json | json}}
26         <br>
27         {{b}}
28     </div>

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

下期:

vue组件:
组件间各种通信
slot
vue-loader webpack .vue
vue-router