02-01 vue事件深入-传参、冒泡、默认事件
<div id="box"> <div @click="show2()"> <input type="button" value="按钮" @contextmenu.prevent="show($event)"> </div> </div> <script> window.onload= function(){ //事件:@contextmenu右键点击触发、@click左键点击触发 //事件简写:v-on:click等价于@click //事件传参:fn($event,XX) //$event表示触发的事件对象 //阻止事件冒泡：@click.stop="fn()" //等价于js方法ev.cancelBubble=true; //默认事件：@contextmenu.prevent="fn()" //等价于js方法：ev.preventDefault(); new Vue({ el:"#box",//选择器 data:{ 'msg':'welcome vue' }, methods:{ show:function(ev){ //alert(ev.clientX); alert(1); //ev.cancelBubble=true;//js方法：阻止冒泡；vue中的简写@click.stop="show($event)" //ev.preventDefault();//js方法：阻止默认事件；vue中简写@contextmenu.prevent="fn()" }, show2:function(){ alert(2); } } }); } </script>
02-02 vue事件深入-键盘事件及按键编码事件
<div id="box"> <input type="text" @keyup.enter="show($event)"> </div> <script> //事件：@keydown="fn()"、@keydown="fn()" //按键编码：@keyup.13="fn()"或 @keyup.enter/up/right/bottom/left等 ; 等价于js中：ev.keyCode window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ }, methods:{ show:function(ev){ //alert(ev.keyCode);//获取按键的编码 //if(ev.keyCode==13){//应用-识别按键回车;等价于@keyup.13="show()" alert("您按了回车键") //} } } }); } </script>
02-03 vue中操作基础属性与特殊属性class
<style> .color_red{color:red;} .bg_blue{background-color:blue;} .font12{font-size:12px;} </style> <div id="box"> <img :src="url" :width="w" :title="altText" alt="this is a pic"><br> <strong :class="[red,b]" class="font12">彩色文字(数据变量控制)</strong><br><br> <strong :class="{color_red:boole_t,bg_blue:true}">彩色文字（类控制）</strong><br><br> <strong :class="json">彩色文字（json数据控制）</strong> </div> <script> //属性操作： //结构：v-bind:属性=“属性值变量”;v-bind可以省略，如： :src="url" ；width="w" //特殊属性：class和style //:class="[red,b] red是数据 //:class="{color_red:boole_t,bg_blue:true}" color_red是类,boole_t可以是布尔值或数据 //:class="json" json是以个json数据 window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ 'url':'https://b-ssl.duitang.com/uploads/blog/201406/30/20140630102145_xSBWt.jpeg', 'w':'200px', "altText":'这是一个图片', 'red':'color_red',//值表示的是类 'b':"bg_blue",//值表示的是类 'boole_t':'true',//布尔值变量 'boole_f':'false', 'json':{color_red:true,bg_blue:true}, }, methods:{ } }); } </script>
02-04 vue中操作特殊属性style
<div id="box"> <strong :style="[c,b]">彩色文字(数据变量控制)</strong><br><br> <strong :style="{color:varColor,backgroundColor:'blue'}">彩色文字(样式配合数据)</strong><br><br> <strong :style="json">彩色文字(json数据)</strong><br><br> </div> <script> //特殊属性：class和style //:style="[c,b]" c和b是数据 //:style="{color:varColor,backgroundColor:'blue'}" color是样式名,varColor可以是变量或值 //:style="json" json是以个json数据 //注意:复合样式一定要采用驼峰命名法 如:backgroundColor window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ 'varColor':'red', 'c':{color:'red'}, 'b':{backgroundColor:'blue'}, 'json':{color:'red',backgroundColor:'blue'} }, methods:{ } }); } </script>
02-05 vue的模板{{msg}}、{{*msg}}、{{{msg}}} 的区别
<div id="box"> <input type="text" v-model="msg" /><br> 直接表示变量：{{msg}} == <span v-text="msg"></span><br> 只能控制一次：{{*msg}}<br> 直接表示变量，可以识别代码:{{{msg}}} == <span v-html="msg"></span> </div> <script> //特殊属性: //{{msg}} 直接表示变量，不会识别代码 等价于属性：v-text = "msg" //{{*msg}} 只能控制一次，后来的不会同步 //{{{msg}}} 会识别代码 等价于属性：v-html = "msg" window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ 'msg':'abc<strong>标签内</strong>', }, methods:{ } }); } </script>
02-06 vue的过滤器，如：uppercase、lowercase、capitalize、curreoy
<div id="box"> 小写转大写：{{msg|uppercase}} <br><br> 小写转大写:{{'welcome'|uppercase}} <br><br> 大写转小写：{{'WELCOME'|lowercase}} <br><br> 大写转小写再首字母大写：{{'WELCOME'|lowercase | capitalize}} <br><br> 美元：{{12 | currency}} <br><br> 元：{{12 | currency '￥'}} <br><br> </div> <script> //过滤器：过滤模板的数据 //语法：{{msg | filterA | filterB }} // uppercase 转大写 eg: {{msg|uppercase}} // lowercase 转小写 eg: {{'WELCOME'|lowercase}} // capitalize 首字母转大写 eg: {{msg|capitalize}} // currecy 钱 eg: 美元：{{12 | currency}} 元：{{12 | currency '￥'}} window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ 'msg':'abc', a:'english', }, methods:{ } }); } </script>
02-07 vue的交互GET获取一个普通文本数据及给服务器发送数据
<script> //交互：$http // get: // 获取一个普通文本数据 // this.$http.get('data/aa.txt').then(function(res){ // alert(res.data); // },function(res){ // alert(res.status); // }) // // 给服务发送数据 // get: function () { // this.$http.get('data/get.php', { // a: 1, // b: 2 // }).then(function (res) { // //成功后执行 // alert(res.data); // }, function (res) { // //失败时执行 // alert(res.status); // }); //} window.onload = function () { new Vue({ el: 'body', data: { }, methods: { get: function () { this.$http.get('data/get.php', { a: 1, b: 2 }).then(function (res) { //成功后执行 alert(res.data); }, function (res) { //失败时执行 alert(res.status); }); } } }); }; </script>
02-08 vue的交互POST向服务器发送数据并返回
<script> //交互：$http // post // 给服务发送数据 // this.$http.post('data/post.php',{ // a:1, // b:2 // },{ // emulateJSON:true // }).then(function(res){ // alert(res.data); // },function(res){ // alert(res.status); // }) window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ }, methods: { // post 给服务器发送数据 get:function(){ this.$http.post('data/post.php',{ a:1, b:20 },{ emulateJSON:true//不能少，post必须有这个标志，模拟json数据 }).then(function(res){ alert(res.data); },function(res){ alert(res.status); }) } } }); } </script>
02-09 vue中交互jsonp的跨域请求
<h1>vue交互必须引入vue-resouce</h1> <div id="box"> <button type="button" @click="get()">按钮</button> </div> <script> //交互：$http // jsonp 跨域请求 window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ }, methods: { // jsonp 跨域请求 get:function(){ this.$http.jsonp('https://sug.so.360.cn/suggest', { word : 'a' }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); }) } } }); } // jsonp 跨域请求 ，有时需要声明修改callback的名称 //window.onload= function(){ // new Vue({ // el:"#box",//选择器 // data:{ // }, // methods: { // // jsonp 跨域请求 // get:function(){ // this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', { // wd : 'b' // }, { // jsonp: 'cb' //callback的名字，默认名字就是callback // }).then(function (res) { // alert(res.data.s); // },function(res){ // alert(res.status); // }) // } // } // }); //} </script>
02-12 vue交互实例：百度搜索下拉
<style> .gray{background-color:gray;} </style> <h1>百度搜索下拉案例</h1> <div id="box"> <input v-model="t1" @keyup="get($event)" @keydown.down.prevent="changeDown()" @keydown.up.prevent="changeUp()" type="text" style="600px;height:35px;line-height:45px;font-size:16px;"/> <ul> <li v-for="value in myData" :class="{gray:$index==now}"> {{value}} </li> </ul> <p v-show="myData.length==0">暂无数据</p> </div> <script> //交互：$http // jsonp 跨域请求 window.onload= function(){ new Vue({ el:"#box",//选择器 data:{ myData: [], t1: '', now :'-1' }, methods: { // jsonp 跨域请求 get: function (ev) { if (ev.keyCode == 38 || ev.keyCode == 40) { return }; //判断按上下键时不请求数据 if (ev.keyCode == 13) { //判断当按下回车键，进行搜索数据并打开新网页 window.open('https://www.baidu.com/s?wd=' + this.t1); this.t1 = ''; //清空输入框 } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', { wd:this.t1 //数据参数 }, { jsonp:'cb' }).then(function (res) { this.myData = res.data.s }, function () { alert('error') }) }, changeDown: function () { //按下键向下选择 this.now++; if (this.now == this.myData.length) { this.now = -1 }; this.t1 = this.myData[this.now]; //输入框数据同步 }, changeUp() { //按上键向上选择 this.now--; if (this.now == -1) { this.now = this.myData.length }; this.t1 = this.myData[this.now]; } } }); } </script>