听说程序猿都知道在网站上看电影，然后按F12，就可以看了是吗

程序员没有会员想看会员电影，按f12在下面代码里找到像网址的那个视频链接,复制后,找一个下载器下载就可以看了。

1.用火狐浏览器打开要调试的网页，然后按F12键，出现下图样子，出现这个表明已成功打开了调试工具。调试工具有3种显示位置：下部、右部、和单独窗口，现在显示的是下部，点击红色框里的图标，可变为右部。点击上黑下白的按钮变为单独窗口（不一般不使用）。

2.接下来就是查看现有网页的内容了，火狐开发者工具有以下几个部分：查看器：查看网页的html代码结构；控制台：查看css、js等；调试器：可以断点调试js；样式编辑器：可编辑css文件；性能：性能分析；网络：查看所要链接的所有文件及地址。

3.一般常用的是【查看器】和【控制台】，先看【查看器】。点击红框里的图标，然后移动鼠标放到网页的任意部位，这时网页上鼠标所在位置加了阴影，查看器里可以查看该部位的html代码。

4.最重要的是【控制台】。点击【控制台】，有7个选项，点击相应的选项，可以看到一些提示信息。如果你的js有问题就可以在这里看出来，真是太方便了，解决了我们程序员的很大问题。

5.还有一个常用的是【网络】，点击【网络】，就可以看到这个页面依次加载的文件，如果出现404就表明此文件不存在，这对我们调试功能太有帮助了。

程序猿

vue中如何实现数据的双向绑定

  vue中如何实现数据的双向绑定

  vue中的指令

      v-cloak：

      v-model（表单元素设置了之后会忽略掉value，checked，selected）

      v-text：代替 {{}} 渲染成文本（不会识别html标签）可以防止网速卡慢时{{}}出现在页面上

      v-html：把html字符渲染成html

      v-once：只绑定一次(不能写成v-once=”msg”)

      v-bind：动态地绑定一个或多个特性

      v-for：遍历数组、对象、字符串、数字

      条件渲染：v-if v-else-if v-else与v-show

      v-show

      v-on：监听 DOM 事件(v-on:click可缩写为@click)

      自定义指令

  vue中的修饰符

    表单修饰符

    事件修饰符

  表单元素双向数据绑定（双向同步）

    单选框

    复选框

    下拉框

  Vue中的Class样式与style样式动态绑定（动态的优先级高于原来的）

  根据hash实现单页面开发

vue中如何实现数据的双向绑定

实现视图变化数据跟着变：分两步，上面get中的为第二步（即再次读取的时候会调用get方法得到之前设置的值，以此来实现动态改变）

由于直接写obj.name = this.value会导致循环调用set方法，所以要借助中间对象的形式把值赋给中间对象，获取obj.name的时候我们获取中间对象的最新值即可

复制代码

let obj = {name:'zhufeng',age:9}//数据

let temp = {name:"lily"}//借助中间对象

let input1 = document.getElementById("box2")//视图

//对某一个对象使用了Object.defineProperty方法之后就要写对应的get和set方法了，不然无法像 *** 作普通对象一样访问或者设置它的属性

//此方法不兼容IE8及以下

Object.defineProperty(obj,"name",{

configurable:true,//属性是否可删除

writable:false,//属性是否可修改

enumerable:false,//属性是否可枚举

get(){//获取obj的属性名对应的属性值时会调用该方法

/*2*/ return temp['name']

},

set(val){//设置obj的属性名对应的属性值时会调用此方法

//实现视图变化数据跟着变：分两步，上面get中的为第二步（即再次读取的时候会调用get方法得到之前设置的值，以此来实现动态改变）

//由于直接写obj.name = this.value会导致循环调用set方法，所以要借助中间对象的形式把值赋给中间对象，获取obj.name的时候我们获取中间对象的最新值即可

/*1、*/ temp.name=val

//实现数据变化视图改变

input1.value=val

}

})

//为了初始化的时候让视图中（文本框中）有值：出现obj.name说明要访问这个属性就会用到defineProperty中的get方法

input1.value=obj.name

//实现视图改变数据跟着改变

input1.addEventListener("input",function(){

obj.name = this.value//当值变化时会调用set方法

},false)

复制代码

vue中的指令

dom元素的行间属性，vue提供了内置的指令，必须以v-开头，后面的值均为变量

v-cloak：

消除页面刚加载时会看到{{}}闪一下的效果，可加给最外层的根元素；

//需要添加对应的css样式

[v-cloak]{

display: none

}

v-model（表单元素设置了之后会忽略掉value，checked，selected）

让表单元素和数据实现双向绑定（映射关系）

<input type="text" v-model="msg">

v-text：代替 {{}} 渲染成文本（不会识别html标签）可以防止网速卡慢时{{}}出现在页面上

{{}} 中的值都会解析成文本内容；

{{msg}}等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>

v-html：把html字符渲染成html

<div v-html="msg"></div>

v-once：只绑定一次(不能写成v-once=”msg”)

<div v-once>{{msg}}</div>

v-bind：动态地绑定一个或多个特性

// 绑定一个属性

<img v-bind:src="imageSrc">

//可缩写为如下形式，此时:src后面的值就可以是变量、表达式、赋值运算、计算、三元运算符（尽量少写逻辑运算）

<img :src="imageSrc">//此时imageSrc就代表一个变量

v-for：遍历数组、对象、字符串、数字

解决了循环问题，更高效，会在原有的基础上进行修改，会复用原有的结构，不会修改所有DOM

复制代码

要循环创建哪一个标签就在那一个标签上加v-for，后面的循环最好用in，用of有时会报错循环数组或对象使用v-for指令

<div v-for="(val,index) in msg">

{{val,index}}//msg为数组时，val为数组中的每一项，index为索引

</div>

<div v-for="(value,key,index) in msg">

{{key}}={{value}}{{index}}//msg为对象时，key为对象中的每个属性名,value为属性值,index为索引

</div>

复制代码

条件渲染：v-if v-else-if v-else与v-show

v-if v-else-if v-else：条件满足才渲染v-if所在标签以及标签内的内容；（ *** 作的是DOM结构）

设置条件判断的DOM元素必须是连续的

*** 作的是DOM元素

key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值

支持 template 标签

频繁的显示和隐藏用v-if会很浪费性能( *** 作的是DOM结构)，此时要用v-show( *** 作的是CSS样式)

<div id="app">

<button @click="flag=!flag">请点击</button>

//template标签是vue提供给我们的没有任何实际意义，用来包裹元素用的（v-show不支持template标签）

<template v-if="flag">

<label>登录</label>

<input type="text" key="1">//key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值

</template>

<template v-else>

<label>注册</label>

<input type="text" key="2">

</template>

</div>

let vm=new Vue({

el:'#app',

data:{

flag:true

}

})

v-show

条件满足才让v-show所在标签以及标签内的内容显示（ *** 作的是元素的css样式），不支持 template 标签

<input type="text" v-show="flag">//flag为true时，input框才显示

v-on：监听 DOM 事件(v-on:click可缩写为@click)

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（在 methods 对象中定义的方法，而且methods中的方法名不能和data中的变量名一样）

<div v-on:click ="fn1('zhaosi,$event')">{{msg}}</div>

<div @click ="fn1('zhaosi,$event')">{{msg}}</div>//上面的简写

方法后面可加（）可不加。不加的话默认会传入事件对象e，

加（）代表要传参数，如果要用事件对象，则需要传$event

自定义指令

可通过在vue实例的directives：{}属性中赋予自定义指令意义

复制代码

<div id="app">

<button v-color="flag">变色</button>

</div>

let vm=new Vue({

el:'#app',

data:{

flag:true

},

directives:{//在这里赋予对应自定义指令意义

//可直接写对应的指令不用写v-

color(el,val){

//el和val都是默认给的：el指的是指令所绑定的DOM元素，val是一个对象，里面存储的是有关指令的信息，可用val.value获取到指令绑定的变量（或者表达式）所代表的值，这里就是flag所代表的值 'red'

el.style.background=val.value

}

}

})

复制代码

vue中的修饰符

表单修饰符

v-model.number：将用户的输入值转为数值类型

v-model.lazy：在表单触发change事件时更新数据，而非触发input事件时更新数据

v-model.trim：自动过滤用户输入的首尾空白字符

事件修饰符

@click.stop：阻止点击事件的传播（往上传播和往下传播都会被阻止）

@submit.prevent：阻止点击提交按钮时的默认行为（阻止事件的默认行为）

@click.capture：点击的时候让事件在捕获阶段执行；

@click.once：只在第一次点击的时候让绑定的事件执行；

@click.self：只有点击的事件源是自己的时候触发事件；（判断事件源）

表单元素双向数据绑定（双向同步）

使用v-model属性可让input中的内容和数据实现双向同步，但是使用了v-model属性之后，input的value、checked、select属性都会失效

复制代码

<div id="app">

<input type="text" v-model="msg">

</div>

<script src="vue.js"></script>

<script>

let vm=new Vue({

el:'#app',//vue的属性和方法对哪个DOM根元素起作用（对它的后代元素也起作用）

//数据

如果data中属性的值是一个数组，如果想改变数组中内容，只能使用原生的会修改原数组的方法进行修改，普通的 数组[索引]=值 不行；

data:{//写在data中的属性都会挂载到当前实例上

msg:'zhufeng'

}

})

console.log(vm.msg)//'zhufeng'

</script>

复制代码

单选框

对于单选框和复选框来说，加了v-mdel属性后，初始设置的value属性不会失效；

复制代码

<div id="app">

<input type="radio" v-model="msg" value="男">男

<input type="radio" v-model="msg" value="女">女

{{msg}}

</div>

let app3=new Vue({

el:'#app',

data:{

msg:'男'//默认选中的项，值与value的值对应，点击女的时候msg就会动态改为女

}

})

复制代码

复选框

单个复选框：

复制代码

<div id="app">

//复选框中加了v-model后value依然可用

<input type="checkbox" v-model="msg">

</div>

let app3=new Vue({

el:'#app',

data:{

//如果是复选框且只有一个的时候，会把msg的值转化为布尔值，如果为true，代表选中

msg:false//为false时代表默认不选中

}

})

复制代码

多个复选框，需要绑定到同一个数组，而且要给input设置初始value值，为了在后面选中的时候获取到对应的选中框的值

复制代码

<div id="app">

//复选框中加了v-model后value依然可用

<input type="checkbox" v-model="msg" value="吃饭">吃饭

<input type="checkbox" v-model="msg" value="睡觉">睡觉

<input type="checkbox" v-model="msg" value="敲代码">敲代码

{{msg}}

</div>

new Vue({

el: '#app',

data: {

msg: [] //此处的msg需要是一个数组

}

})

复制代码

下拉框

复制代码

<div id="app">

//加了multiple后就变为多选框，用ctrl+左键点击多选，msg也要换为一个数组

<select v-model="msg" multiple>

//加了disabled时候用户就不能选中此项了

//option中的value是给写代码的人看的

<option value="0" disabled>请选择地区</option>

<option value="1">北京</option>

<option value="2">上海</option>

<option value="3">浙江</option>

</select>

{{msg}}//如果option的value属性不写，则取的是option中的内容

</div>

let app3=new Vue({

el:'#app',

data:{

msg:'0'//默认选中的某一项，值与每一个option的value值对应

}

})

复制代码

Vue中的Class样式与style样式动态绑定（动态的优先级高于原来的）

：class=”{}”或者：class=”[]：

通过：class=”{}”或者：class=”[]来动态的绑定class样式，与原来的class样式不冲突。

有两种方式：

1、对象的方式绑定

2、数组的方式绑定

复制代码

<div id="app">

<!--以对象的方式动态绑定class样式：当flag为true时，z样式生效。y样式不生效-->

<div class="x" :class="{z:flag,y:false}">我的世界</div>

<!--以数组的方式动态绑定class样式：y，z两个样式都会生效-->

<div class="x" :class="[y,z]">我的世界</div>

</div>

let vm=new Vue({

el:'#app',

data:{

flag:true

}

})

复制代码

：style=”{}”或者：style=”[]”：绑定行内的样式

通过上述的方式来动态绑定行内的样式

复制代码

<div id="app">

//第一种是对象的方式

<div :style="{backgroundColor:'red',color:'pink'}">我是谁</div>

//第二种是数组的方式

<div :style="[str1,str2]">我的世界</div>

</div>

let vm=new Vue({

el:'#app',

data:{

str1:{backgroundColor:'blue'},

str2:{color:'yellow'}

}

})

复制代码

根据hash实现单页面开发

通过hash记录跳转的路径（可以产生历史管理）

浏览器自带的历史管理方法history（history.pushState(),push到哪里就跳转到哪里），可能会导致404错误（因为用户可能会随意输入路径）

开发时使用hash的方式，上线的时候使用history的方式

[使用hash存储]

//存储：存储的时候要把存储的对象转换成字符串

localStorage.setItem('todo',JSON.stringify(obj))

//获取：获取的时候要把字符串转换成对象

JSON.parse(localStorage.getItem('todo'))

原文地址：https://www.cnblogs.com/Zz-maker/p/10711506.html

推荐文章

ASP.NET Core 使用 Hangfire 定时任务

在.NET Core 中实现健康检查

c# aspose *** 作word文档

图片字节流和字符串互转，读存图片。

Go项目开源规范

flex布局实例demo全解

mathcurve.com

unity模型切割

【基础】为何odd negative scaling会导致Unity动态合批失败？

MySQL 有关用户密码

【Redis】info 命令详解

frida hook so文件

python 常见算法面试题

助教工作总结

第十六周助教总结

1015 Reversible Primes (20 分)

1014 Waiting in Line (30 分)

GitLab: Author ‘xxx‘ is not a member of team

关于python的算法程序，如何做成分布式处理，并解决环境的冲突等问题的记录

鲲鹏arm架构编译mysql

用java的眼光看js的oop

SpringBoot YAML文件特殊类型配置

【框架】一种通知到多线程框架

【网络基础】数据包生命

【网络编程】TCPIP-小笔记集合

【网络编程】TCPIP-8-套接字的多种选项

【网络编程】TCPIP-7-域名与网络地址

【网络编程】TCPIP-6-TCP的半关闭

Web应用安全防护-WAF

漫画 | 这样的程序员男友，让我分分钟想剖腹自尽！

Copyright 2008-2020 ©晋ICP备16003840号-1

程序员，从字面看就是写程序的人员。

程序员(英文Programmer)是从事程序开发、程序维护的专业人员。一般将程序员分为程序设计人员和程序编码人员，但两者的界限并不非常清楚，特别是在中国。软件从业人员分为初级程序员、中级程序员、高级程序员（现为软件设计师）、系统分析员，系统架构师，测试工程师六大类。

初，中级程序员一般叫做码农。

高级程序员和架构师一般叫做攻城狮

系统分析员是指做需求分析同时懂代码的那群

测试攻城狮一般指黑盒测试，也就是点点点，所有功能按钮全点，看看有没有错误，常见错误404，500。

总结而言，一只优秀的程序猿通常有以下特点：（以下来自于百度百科，词条：程序猿）

【PMonkey】对技术充满JI情（因为能够得到香蕉）

将编程作为一种爱好（不一定，只有少数的程序猿有这一素质） 如果你允许会滔滔不绝地跟你谈论技术（程序猿使用特殊的语言，别的人或猴子很难听懂）

【PMonkey】有过个人的开发经历（独立的寻找过香蕉或追寻母猿）

坚持认为某种技术最好（程序猿都很固执）

如果让他用他认为不好的技术他会非常别扭（同上）

聪明、健谈、兴趣广泛（只限于NEET和有关宅话题）

在大学和工作前就开始接触程序（程序猿从小就是程序猿了）

总而言之，程序猿和它的一些同种族（如网管猿，技术猿）一样，都是人类用来帮助提高生产力的技术人员，由于许多程序猿的智力很高，所以经常自己去寻找香蕉或母猿而无心工作，但这只是个别现象，总体来说程序猿是一种对人类很有用的动物，它们工作时很勤劳，而且不像业务猿那样喜欢跳奇怪的舞蹈（也叫增猿舞）吵的人们想鬼畜它，程序猿一般到了30岁左右就会进化成别的猿类（一般是管理猿），不过据报道，也有一些少数一生都是没有母猿的悲剧程序猿。

程序猿是被诅咒的悲惨生物，它们受到的诅咒有：过度的劳作、永远不足的睡眠、低廉的收入等等……

程序猿并不擅长战斗，它们生活中最主要的活动是——在树叶上打洞，然后将打洞的树叶放进一个木盒子里念咒语，并声称那些是能够提高族群的食物供给或提供其他神奇功能的伟大产品。但是，因为每个程序猿打洞的方式各不相同，他们之间也会经常爆发冲突，每个程序猿都声称自己所用的打洞方式是最好最先进，打出的洞是最美最华丽的，并不惜因此用打洞的树叶互相投掷。根据一些冒险者收集到的程序猿族群的资料，所谓的打洞方式，有西珈岬式、爪哇式、希沙埔式等等。不过，令人惊异的是，虽然每个程序猿所用的打洞方式都不同，但它们能用几乎所有的方式来给树叶打洞，来表达“你好，世界”的意思……

因为长时间的不运动，程序猿的体力普遍低下，不擅长近战。不过，它们的高超智力弥补了这个缺陷。投掷打洞树叶是它们常用的攻击方式，而且，一如它们所宣称的一样，那些树叶有着一些神奇的功能——很多冒险者在受到树叶攻击后，虽然受伤并不严重，但都不同程度表现出反应迟缓、四肢不听指挥、眼前一片蓝色等症状，甚至于昏迷不醒。不过，好在这些症状都不致命，但是这足以保护程序猿远离冒险者的侵扰。

程序猿只为了保护栖息地才会战斗，因此，一般冒险者都会绕开它们的地界。而且，由于程序猿的智力达到了能和冒险者交流的程度，甚至有的冒险者和程序猿族群建立了良好的关系，并且得到了它们的打洞树叶作为向族群提供食物的交换——只是这些礼物在冒险者手上远不如在程序猿手上可靠……

---