最近在学习vue.js，和大家分享一下，共同进步：
| 1、vue基本模型： 一段html代码配合json，再new 处理vue实例。 html代码: <div id="box"> {{msg}} //json格式的数据 </div> vue.js: var vm = new Vue({ el:'#box', //选择器 data:{ msg:'welcome to vue' //数据 }, methods:{ //回掉函数 methodName:function() { } } })
2、常用指令： 2.1、v-model 绑定数据 <input type="text" v-model="msg"/> <div id="box"> {{msg}} </div> new Vue({ el:'#box', data:{ msg:'' //初始化msg } })
2.2、v-for 循环 语法： 2.2.1、v-for="value in array" {{value}} {{$index}} 2.2.2、v-for="value in json" {{value}} {{$key}} {{$index}} 2.2.3、v-for="(k,v) in json" {{k}} {{v}} {{$key}} {{$index}} 如果有重复的数据: track-by='索引' ====>> track-by='$index/uid'
2.3、v-on: 绑定事件 2.3.1、v-on:click="回掉函数" ====>>> 可以简写为: @click="" v-on:click/mouseout/mouseover/dbclick/mousedown...... vue.js代码： new Vue({ el:'', data:{ } methods:{ 回掉函数:function() { } } }) 2.3.2、事件对象： @click="show($event)" 2.3.3、事件冒泡:(事件行为依次向上传递) 阻止冒泡: ①.ev.cancelBubble = true; 2.3.4、默认行为（默认事件） 阻止默认行为: ①.ev.preventDefault(); 2.3.5、键盘事件: @keydown @keyup ...... 常用键: 回车: 上/下/左/右 @keyup/keydown.left @keyup/keydown.right @keyup/keydown.up @keyup/keydown.down
2.4、v-show 显示/隐藏 //后面跟的是boolean值 v-show="true" //显示该控件 v-show="false" //隐藏该控件
2.5、v-bind: 绑定属性 v-bind:src="" ====>>> 可以简写为: :src="" new Vue({ el:'', data:{ url:'https://www.baidu.com/img/bd_logo1.png' }, methods:{ } }) <img src="{{url}}" alt=""> //效果能出来，但是在浏览器的控制台中会报一个404错误 <img v-bind:src="url" alt=""> //效果可以出来，而且不会报错
2.6、v-cloak 防止闪烁，防止用户看到花括号标记
3、自定义指令 3.1、自定义属性指令 格式: Vue.directive(指令名称,function(参数){ this.el... } <div v-red="参数"></div> ★注意:指令名称:v-red 必须以"v-"开头,且在js里面的指令名称去掉"v-" 举例: <script> Vue.directive('red',function(color){ this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ a:'blue' } }); }; </script> <div id="box"> <span v-red="a"> asdfasd </span> </div> 3.2、自定义元素指令:(用处不大) 格式: Vue.elementDirective('指令名称',{ bind:function() { this.el.style.background='red'; } });
4、class和style :class="" <<======>> v-bind:class="" :style="" <<======>> v-bind:style=""
class: :class="[red]" //red是vue.js中data的数据 :class="[red,a,b,c]" :class="{red:a, blue:false}" //这里的red是html中的属性名，a是vue.js中data的数据 :class="json" //json的型式为: data:{ json:{red:a,blue:false} } style: style与class的用法类似 :style="[c]" :style="[c,d]" :style="json" 5、模板 msg: data:{ msg:'<strong>welcome to vue</strong>' } {{msg}} //数据更新，模板变化,等价于===><span v-text>{{msg}}</span> {{*msg}} //数据只绑定一次,即:数据更新,模板不会发生变化,等价于===><span v-once>{{msg}}</span> {{{msg}}} //html转义输出,即:html标签会以html格式进行处理,等价于===><span v-html>{{msg}}</span>
6、过滤器 格式：{{msg|filterA}} {{msg|filterA|filerB}} 举例: {{'welcome'|uppercase}}
vue提供过滤器: capitalize uppercase currency.... debounce 参数(毫秒) 配合事件，延迟执行
数据配合使用过滤器: limitBy 参数1 限制几个 limitBy 参数1 参数2 取几个,从哪儿开始 filterBy 参数 过滤数据 orderBy 1/-1 1:正序; -1:倒序
自定义过滤器格式: Vue.filter(name,function(input) {}); 举例: 时间转换器 <div id="box"> {{a | date}} </div> <script> Vue.filter('date',function(input){ var oDate=new Date(input); return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds(); }); var vm=new Vue({ data:{ a:Date.now() }, methods:{ } }).$mount('#box'); </script>
双向过滤器*
7、交互 $http (ajax) 如果vue想做交互，要引入:vue-resouce get方式: ①.获取一个普通文本数据: this.$http.get('a.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); });
8、vue的生命周期: 钩子函数: created:实例已经创建 beforeCompile:编译之前 compiled:编译之后 ready:插入到文档中 beforeDestroy:销毁之前 destroyed:销毁之后 举例: <div id="box"> {{msg}} </div> <script> var vm=new Vue({ el:'#box', data:{ msg:'well' }, created:function(){ alert('实例已经创建'); }, beforeCompile:function(){ alert('编译之前'); }, compiled:function(){ alert('编译之后'); }, ready:function(){ alert('插入到文档中'); }, beforeDestroy:function(){ alert('销毁之前'); }, destroyed:function(){ alert('销毁之后'); } }); /*点击页面销毁vue对象*/ document.onclick=function(){ vm.$destroy(); }; </script> |