yinzhuoei_seho 发布的文章

今天又是充满希望的一天,就跟着案例教程做了一个vue的小项目,但是虽然说很简单,但是在学习的过程中,对于没有多少js的基础的人来说
是比较困难的,项目的关键的地方就是用了vue的三个进行交互的方法,get,post,jsonp
--语法
引入vue交互模块,resource.js,然后直接在方法中this.$http.get(post(jsonp)) 第一个参数是url路径,第二个参数是数据,然后通过then.funcition,分别是成功返回的方法,和失败返回的方法
--需要特别提示一点的就是在post的提交的时候需要把emulateJSON:true,加入到第三个参数中并且用{}包裹起来
--在jsonp跨域中,callback的默认名字就是callback,但是在百度中,默认的名字为cb,所以在调用接口的时候,需要声明callback的名字为cb,所以要在第三个参数中声明jsonp:'cb',这样我们就可以正常调用了。

po一下代码,代码的功能就是简单的百度搜索功能,输入东西按回车也会直接跳到一个百度搜素结果页中,调用了windows.open配合百度的搜索接口,把
参数换成输入框中的数据即可。

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="bootstrap.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>

</head>
<style>

.grey{
    background: #ccc;
}

</style>
<body>

<div id="box">
    <input type="text" class="input-group" v-model="text" @keyup="get($event)" @keydown.down="down()" @keydown.up.prevent="up()" @keydown.enter="enter()">
    <ul>
        <li class="list-group" v-for="(li,$index) in mydata" :class="{grey:$index==now}">{{li}}</li>
    </ul>
    <p v-show="mydata.length==0">暂无数据。。。</p>
</div>

<script>

new Vue({
    el:'#box',
    data:function () {
        return{
            text:'',
            mydata:[],
            now:'-1'
        }
    },
    methods:{
        get:function (ev) {
            if(ev.keyCode==38 || ev.keyCode==40)return;
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                wd:this.text
            },{
               jsonp:'cb'
            }).then(function (code) {
                this.mydata=code.data.s;
            },function (code) {
                //失败的返回结果
                alert(code.data);
            })
        },
        down:function () {
            this.now++;
            if(this.now==this.mydata.length){
                this.now=-1
            };
            this.text=this.mydata[this.now]
        },
        up:function () {
            this.now--;
            if(this.now==-2){
                this.now=this.mydata.length-1;
            };
            this.text=this.mydata[this.now]
        },
        enter:function () {
            window.open('https://www.baidu.com/s?wd='+this.text);
            this.text=''
        }
    }
})

</script>
</body>
</html>

u=1436948145,4270509323&fm=200&gp=0.jpg

4afbfbedab64034f29596c8ba6c379310b551da2.jpg
众所周知,AngularJS框架是由Google维护的,但是创立者为个人,后被收购,昨天在学习Vue语法的时候,了解到键盘监控的事件,尤大大让我很震惊的
居然用如此的方式来简化代码,往常都是调用keyCode方法来监控键盘输入的键码,但是在vue中,作者封装了直接在键盘事件的后面.出来就好。

--比如说,@keyup.enter="",意思监控enter键,于此同时,还可以.出对应的键码,比如说enter是13,那么在代码中13就可以代替enter目前我简单的测试了一下,delete,还有方向键,end键等做出了封装,非常nice,简化了代码
代码的思路令人称奇,尤大大也是HTML5的Clear的打造人

--膜拜完毕,总结一下今天的知识,今天学习特别少,因为都在没有信号的狭小的旅途中,明天就可以回归正轨
事件:

v-on:click/mouseover......

简写的:
@click=""        推荐

事件对象:
    @click="show($event)"
事件冒泡:
    阻止冒泡:  
        a). ev.cancelBubble=true;
        b). @click.stop    推荐
默认行为(默认事件):
    阻止默认行为:
        a). ev.preventDefault();
        b). @contextmenu.prevent    推荐
键盘:
    @keydown    $event    ev.keyCode
    @keyup

    常用键:
        回车
            a). @keyup.13
            b). @keyup.enter
        上、下、左、右
            @keyup/keydown.left
            @keyup/keydown.right
            @keyup/keydown.up
            @keyup/keydown.down
        .....

hello,还是你们熟悉的老沈,今天下午看了智能社的一节课,受益匪浅啊,学习vue的过程中掌握了很多boot和js的语法,又请输入图片描述
跟着导师自己做了一个留言板的小案例。

--案例感受,vue的入门是真的很简单,学到了vue的自定义指令,能够很快的做一个非常实用的留言板,但是由于是前端页面,不能数据保存
,等到后期教师满意度的项目结束以后,会写一个购物网站,把vue+bootstrap+javabean能够完整的做一个项目。
--先po一下代码吧。
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-3.0.0.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>

</head>
<body>
<div id="window">
<h1 class="text-center">简易留言板</h1>
<form>

<label for="user" class="text-center">用户名
    <input type="text" class="form-control" id="user" v-model="username">
</label>
<label for="age" class="text-center">年龄
    <input type="text" class="form-control" id="age" v-model="age">
</label>
<label for="button" class="text-center">
    <input type="button" class="btn btn-danger" id="button" value="提交" v-on:click="submit">
</label>

</form>

序号 用户名 年龄 操作
{{$index+1}} {{item.username}} {{item.age}} <button class="btn btn-primary btn-danger" @click="nowdelete($index)">删除</button>
<button class="btn btn-primary btn-danger" @click="nowdelete(-2)">删除全部</button>
<p>暂无数据。。。</p>

</div>
<script src="index.js"></script>
</body>
</html>

--js代码
new Vue({

el:'#window',
data:function () {
    return{
        message:[],
        username:'',
        age:'',
        Nowindex:'-99'
    }
},
methods:{
    submit:function () {
        this.message.push({
            name:this.username,
            age:this.age
        });
        this.age='';
        this.username='';
    },
    nowdelete:function (index) {
        if(index==-2){
            this.message=[]
        }else{
            this.message.splice(index,1);
        }
    }
}

})

--得引入jq和boot和vue
--案例功能,能够提交表单信息到下方的表格,以及删除
--用到的vue指令
v-model的表单双向数据绑定
v-for循环vue数组内容
--ps:在vue2.0的版本中,不能直接使用$index来表示序列了,要在for循环声明index的存在,比如v-for="(item,$index) in message
--ps:vue的点击事件v-on:click,如果后面跟的方法名如果有参数要表达的话,要写成@click="submit($index)",类似这种

明天继续,结束!

大家好,我是梦想成为全栈工程师老沈,最近java都不怎么写了,在研究前端,今天呀,看到了我从未见过的css写法,跟往常不一样
我几乎没有在任何开源的源码上见到。
--下面是图
QQ图片20180723190118.jpg
这种写法简直酷炫到没朋友!!!
2.如何快速的写一个梯形
请原谅我至今还没有搞懂这样写法的原理
<div id="leftnav">
</div>
--定义一个容器
css:
border-bottom:949px solid #F14248;
border-right: 248px solid transparent;
--这个是直角梯形,如果是三角梯形的话,就要加一个border-left
--解释一下,transparent的意思就是黑色透明,类似rgb(0,0,0,0);
--等于说它还是一个div块,但是他的边都是透明的,而且这个边很宽,所以就形成了一个梯形
3.介绍2个小小的插件
--最近在做一个横屏的pc站点,滑轮滑动之后整个视图就会往右走,无奈没有做过这种,只好有一个插件
<script src="js/jquery.mousewheel.js"></script>
--关于鼠标滑轮的插件,任何有关于鼠标滑轮的效果都能轻易的做出来。
--第二个插件就是关于一个浏览器拖动条的插件,拖动条很丑的话就可以用这个插件,一步就可以做!!
<script src="js/jquery.nicescroll.js"></script>
--我用的是一个有动态感知的一个滚动条,普通的滚动条样式还是去nicescroll官网上去看看吧!
--二个插件必须是基于jqury,先引入jq文件,才能有效,必须是在准备函数中写,要不然会出错!

拜拜,明天会有更多教程分享,每天有分享,证明我每天都有进步!

今晚就不更新前端知识了,就来更新一下一些电脑使用小技巧,今天在网上有人私信了我说自己的电脑网速比较慢怎么办,
这个就很尴尬啊,那就只能提升带宽获得更好的服务,但是有些情况明明带宽很快,但是网速很慢,不知道是什么原因,
今天老沈教给大家一个关闭windows保留的带宽的方法,让自己的网速飞快。
--教程开始(windows家庭版不适合)
第一步:使用快捷组合建Win+R调出运行窗口,输入:cmd,按确定
v2-0456660dab860b530db072760121845c_hd.jpg

第二步:按确定后打开了一个黑色的窗口,你先不用管它是什么,接住把下面这段代码复制进入:

复制这段代码:netsh int tcp set global autotuninglevel=disabled
v2-0456660dab860b530db072760121845c_hd.jpg

然后按Enter键确定,就可以设置好了。

我们来进行测试设置前后的网速,这是Qos设置前的测速报告:
v2-a09f9ee4e828cb3b9533e8b0c471123a_hd.jpg
这是Qos设置后的测速报告:
v2-bff9eb6db49217ea47f1449a3e0eaeea_hd.jpg

----内容来源于知乎,作者:李云景
原文链接:https://www.zhihu.com/question/285586045/answer/444484732?utm_source=qq&utm_medium=social&utm_oi=989164498652995584