vue基础学习（二）
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="width: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>
vue基础学习（二）的更多相关文章
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Python入门基础学习 二
Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Python基础学习二
Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置 ...
- Go基础学习(二)
数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- Django基础学习二
今天继续学习django的基础 学习用户提交url如何获得返回值 1.首先需要在工程的urls文件定义指定的urls要路由给哪个函数 在这个例子中,我们定义home的urls路由给views里的tes ...
- vue组件学习(二)
父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...
随机推荐
- Python测试开发之---string
string.letters 所有的大小写字母 >>> print string.lettersabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQ ...
- 初识分布式计算：从MapReduce到Yarn&Fuxi
这些年,云计算.大数据的发展如火如荼,从早期的以MapReduce为代表的基于文件系统的离线数据计算,到以Spark为代表的内存计算,以及以Storm为代表的实时计算,还有图计算等等.只要数据规模 ...
- php 将pdf转成图片且将图片拼接
说明: 1.pdf转图片通过安装php扩展imagick实现. 2.由于windows扩展安装的一系列问题,建议在linux环境开发,windows大伙可以尝试安装. 3.为Centos 安装Imag ...
- Windows下安装solr步骤详解
Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http Get操 ...
- while(true)应用 之 实现自己的消息队列
早些时候,一直有个疑问,就是比如你从前端发一个操作之后,后台为什么能够及时处理你的东西呢?当然了,我说的不是,服务器为什么能够立即接收到你的请求之类高大上的东西.而是,假设你用异步去做一个事情,而后台 ...
- 手动搭建express框架
创建相应的文件夹 在根路径下创建package.json文件并在命令面板里安装相应的模块包(如下) 2. 在根路径下创建app.js, 在根路径下创建routes文件夹,并在文件夹中创建index. ...
- Java---Ajax在Struts2框架的应用实例
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 很久没有动过ajax了,趁此机会复习一下,写一个简单的例子 一.项目结构: 二.需要的jar包 三.具体代码: 1.web.x ...
- 》》css3--动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Socket TCP Server一个端口可以有多少个长连接？受到什么影响？linux最大文件句柄数量总结
Socket TCP Server一个端口可以有多少个长连接? 网上答案很多,不知道那个才是正确的 理论上是无限的 16.Linux中,一个端口能够接受tcp链接数量的理论上限是? A.1024 B. ...
- 一句话搞定webmap（一）——轻地图组件
摘要: 遥想当年.在APP中增加LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而现在.要制作一张地图真是越来越easy了!居然仅仅须要一句话.就能够 ...