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的 ...
随机推荐
- Mac关机时处于黑屏状态
PS:不知道大家有没有遇到过mac电脑关机就黑屏,只有一个箭头,还可以滑动箭头,但就是黑屏状态,等个好长时间还是关不了机,因此我查了好多资料,原因是在关机时,mac要先关掉其他软件或者保存进程以备下次 ...
- node.js爬虫
这是一个简单的node.js爬虫项目,麻雀虽小五脏俱全. 本项目主要包含一下技术: 发送http抓取页面(http).分析页面(cheerio).中文乱码处理(bufferhelper).异步并发流程 ...
- WeChat 隐私政策
隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...
- Struts框架的国际化
本文将通过一个详细的实例来展示Struts框架的国际化,使用的版本号是struts1.1. 案例:在一个页面上有一个下拉框,下拉框中有3个国家的语言选项,各自是"中文简体".&qu ...
- Go语言核心之美-必读
Go语言核心之美开篇了!.不管你是新手还是一代高人,在这个系列文章中.总能找到你想要的! 博主是计算机领域资深专家并且是英语专8水平,翻译标准仅仅有三个:精确.专业.不晦涩,为此每篇文章可能都要耗费数 ...
- leetcode第一刷_Populating Next Right Pointers in Each Node II
很自然的推广,假设去掉全然二叉树的条件呢?由于这个条件不是关键,因此不会影响整体的思路.做法依旧是每次找到一层的起点,然后一层一层的走. 假设是全然二叉树的话,每层的起点就是上一层起点的左孩子,兄弟之 ...
- （四）—性能测试工具curl-loader(linux)
curl-loader介绍 curl-loader(也被称为"omes-NIK"和"davilka")是一个开源的C语言编写的工具,模拟应用负载和成千上万的几十 ...
- Java的单例模式
单例模式:单例模式确保其一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式又分为:懒汉式,饿汉式等; 特点: a.单例只有一个实例. b.必须自己创建自己唯一的实例 c.单例类必须 ...
- ssm学习（五）--加入分页插件
之前我们的查询列表是将所有的数据查询出来,并没有做分页,当数据很少的时候,是不需要分页,但是如果数据很多的时候,所有数据显示在一个页面显然是不合适的. 之前用hibernate的时候,可以直接通过查询 ...
- CNN中的卷积操作的参数数计算
之前一直以为卷积是二维的操作,而到今天才发现卷积其实是在volume上的卷积.比如输入的数据是channels*height*width(3*10*10),我们定义一个核函数大小为3*3,则输出是8* ...