读音: v-u-eview
vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧 官网:http://cn.vuejs.org/ 手册： http://cn.vuejs.org/api/ vue和angular区别? vue——简单、易学 指令以 v-xxx 一片html代码配合上json，在new出来vue实例 个人维护项目
适合: 移动端项目,小巧 vue的发展势头很猛，github上start数量已经超越angular angular——上手难 指令以 ng-xxx 所有属性和方法都挂到$scope身上 angular由google维护 合适: pc端项目 共同点: 不兼容低版本IE遍历数据
<script src="./vue-1.0.28.js"></script> </head> <body> <div id="box"> <ul> <li v-for="val in arr"> {{val}}---{{$index}} </li> </ul> <ul> <li v-for="val in json"> {{val}}---{{$index}}---{{$key}} </li> </ul> <ul> <li v-for="(k,v) in json"> {{k}}----{{v}}---{{$index}}---{{$key}} </li> </ul> </div> <script> new Vue({ el:"#box", data:{ arr:[2,3,5,6,4], json:{ n:5, a:3, b:7 //json } } }) </script>事件
<script src="./vue-1.0.28.js"></script> </head> <body> <div id="box"> <ul v-on:click='msgc'> <li v-for="val in arr" > {{val}}---{{$index}} </li> </ul> </div> <script> new Vue({ el:"#box", data:{ msg:2, arr:[2,3,5,6,4], json:{ n:5, a:3, b:7 //json } }, methods:{ msgc:function(){ this.msg=this.msg==false?true:false; } } }) </script>事件对象: @click=”show($event)” 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐 默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐
<script src="./vue-1.0.28.js"></script> </head> <body> <div id="box" @click="a($event)"> <button @click="show($event)">12</button> <button @contextmenu.prevent="show()">取消默认行为</button> </div> <script> new Vue({ el:"#box", data:{ }, methods:{ a:function(a){ console.log(a) }, show:function(e){ alert(1) e.cancelBubble=true; // e.preventDefault() } } }) </script>键盘事件: @keydown $event 键码：ev.keyCode @keyup
常用键: 回车 a). @keyup.13 b). @keyup.enter 上、下、左、右 @keyup/keydown.left @keyup/keydown.right @keyup/keydown.up @keyup/keydown.down <script src="./vue-1.0.28.js"></script> </head> <body> <div id="box" @click="a($event)"> <button @click="show($event)">12</button> <button @contextmenu.prevent="show()">取消默认行为</button> <input type="text" @keyup="keyevent($event)"> </div> <script> new Vue({ el:"#box", data:{ }, methods:{ a:function(a){ console.log(a) }, show:function(e){ alert(1) e.cancelBubble=true; // e.preventDefault() }, keyevent:function(e){ console.log(e.keyCode) } } }) </script>属性： v-bind:src=”” width/height/title….
简写: :src="" 推荐 <img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误 <img v-bind:src="url" alt=""> 效果可以出来，不会发404请求class和style: :class=”” v-bind:class=”” :style=”” v-bind:style=”” :class=”[red]” red是数据 :class=”[red,b,c,d]” :class=”{red:a, blue:false}” :class=”json”
data:{ json:{red:a, blue:false} }如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。 ————————– style: :style=”[c]” :style=”[c,d]” 注意: 复合样式，采用驼峰命名法 :style=”json”
<script src="./vue-1.0.28.js"></script> <style> .red{ color:red; } .center{ text-align: center; } </style> </head> <body> <div id="box" @click="a($event)"> <img src="{{url}}" alt=""> <hr> <img :src="url" alt=""> <hr> <div :class="red">sdfsdfsdfsdf</div> <hr> <p :class="[center,red]">sdfsdf</p> </div> <script> new Vue({ el:"#box", data:{ center:"center", red:"red", url:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1099243532,2855297799&fm=58" }, methods:{} }) </script>数据只绑定一次
<div id="box"> <input type="text" v-model="msg"> {{msg}} //数据原样输出 <br>{{*msg}} //数据只绑定一次 <br>{{{msg}}} //能解析html </div>过滤器: -> 过滤模板数据 系统提供一些过滤器:
{{msg| filterA}} {{msg| filterA | filterB}} uppercase //转换成大写 eg: {{'welcome'| uppercase}} lowercase //转换成小写 capitalize //首字母大写 currency 钱 {{msg| filterA 参数}} {{msg | filterA | filterB}} 与事件相关的过滤器 @keyup="add | debounce 2000" 延时执行limitBy的使用方法
v-for = “val in arr | limitBy 2” 只显示2条数据 limitBy 2 1 //只显示2条，从索引为1的位置开始取 limitBy 2 arr.length-1
filterBy 过滤 v-for=”val in arr | filterBy ‘o’” //只显示含有字母o的数据
orderBy 排序显示
v-for = “val in arr | orderBy parseInt(num)” orderBy 1 正序 orderBy 0 正常显示（不排序） orderBy -1 倒序
<div id="box"> <br>{{{center|uppercase}}} <hr>{{'SDFSF'|lowercase}} <hr>{{12|currency "RMB"}} </div> <script> new Vue({ el:"#box", data:{ center:"center", red:"red" }, methods:{} }) </script>交互: $http （ajax） 如果vue想做交互 引入: vue-resouce
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); }); <script src="./vue-1.0.28.js"></script> <script src="./js/vue-resource.min.js"></script> </head> <body> <div id="box"> <button @click="show()">sdfsdf</button> <button @click="load">sdfsdf</button> </div> <script> new Vue({ el:"#box", data:{ center:"center", }, methods:{ show:function(){ this.$http.jsonp("https://sug.so.360.cn/suggest", { params:{ word:'a' } },{ jsonp:'callback' }).then(function(res){ console.log(res) },function(res){console.log(res)}); }, load:function(){ this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", { params:{ wd:'a' }, jsonp:'cb' }).then(function(res){ console.log(res) },function(res){console.log(res)}); } } }) </script> this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", {//请求参数 params: { wd:this.v1 }, jsonp:'cb' }).then(function(res){ https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow https://smart.sug.so.com/suggest?word=a&callback=__jso https://sug.so.360.cn/suggest?word=a