前端工程

修改npm的下载地址为国内的淘宝地址

临时修改
npm --registry https://registry.npm.taobao.org install express
永久修改
npm config set registry https://registry.npm.taobao.org
npm config get registry //查看上面的语句是否修改成功
使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
     cd my-project
     npm install
     npm run dev
   Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,安装并运行:

$ cd my-project
$ npm install
$ npm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

目录结构

目录/文件说明
build项目构建(webpack)相关代码
config配置目录,包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。
static静态资源目录,如图片、字体等。
test初始测试目录,可删除
.xxxx文件这些是一些配置文件,包括语法配置,git配置等。
index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档,markdown 格式

命令

1.查看版本

npm -v
2.安装模块

a.全局安装

npm install <模块名> -g

b.本地安装

npm install <模块名>

c.在项目中安装保存到package.json中

npm install <模块名> --save-dev

3.查看安装信息

a.查看所有安装模块

        npm list -g

b.查看某个模块

        npm list <模块名>

4.卸载模块

npm uninstall <模块名>
5.更新模块

npm update <模块名>
6.搜索模块

npm search <模块名>
7.清空本地缓存

npm cache clear

Javascript

jQuery获取包括当前元素的HTML prop

<pre class="brush:js;toolbar:false">//jQuery获取包括当前元素的HTML
$("#current").prop("outerHTML");
//其它用法
$("input").prop("disabled", false);//只读
$("input").prop("checked", true);//全选</pre><p><br/></p>

顶部浮动代码

<pre class="brush:js;toolbar: true; auto-links: false;"><script type="text/javascript">
  var margintop = $("#header").offset().top

  //var marginleft = $("#header_cont").offset().left;
 //alert(margintop)
 //alert(marginleft)
 
   $(window).scroll(function() {
     var scrtop = $(document).scrollTop();
     if(scrtop<margintop){
      $('#header').css({
          position: 'absolute',
          top: margintop,
          left:'0'
        });

      return false;
    }
        $('#header').css({
          position: 'absolute',
          top: scrtop,
          left:'0'
        });
    });
</script></pre>
<p>
</p>

滚动到底部时加载下一页数据

<blockquote>
<p>// 滚动到底部时加载下一页数据

          $(document).scroll(function(){

            if( $(window).height() + $(document).scrollTop() >= $(document).height() ){

                getdata(uid,password,$('.main dt span.active').attr('data-page'),$('.main dt span.active').attr('data-type'))

            }

            

          });</p>
</blockquote>

键盘控制

<p>键盘控制应用范围非常广泛,比如快捷键控制页面的滚动;在填写表单时候,限制输入内容;或者是屏蔽复制、粘贴、退后等功能。</p><pre class="brush:js;toolbar:false">$(window).keydown(function(event){ 
 
 switch (event.which) { 
 
 case(74): //J键 
 
 //要执行的操作 
 
 break; 
 
 case(75)://K键 
 
 //要执行的操作 
 
 break; 
 
 case(72)://H键 
 
 //要执行的操作 
 
 break; 
 
 case(76)://L键 
 
 //要执行的操作 
 
 break; 
 
 } 
 
 });</pre><pre class="brush:js;toolbar:false">如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键。
下面是键值对照表:
键盘名称    键值(keycode)    键盘名称    键值(keycode)    
BackSpace    8    Tab    9    
Clear    12    Enter    13    
Shift_L    16    Control_L    17    
Alt_L    18    Pause    19    
Caps_Lock    20    Escape    27    
Space    32    Prior    33    
Next    34    End    35    
Home    36    Left    37    
Up    38    Right    39    
Down    40    Select    41    
Print    42    Execute    43    
Insert    45    Delete    46    
Help    47    0 equal braceright    48    
1 exclam onesuperior    49    2 quotedbl twosuperior    50    
3 section threesuperior    51    4 dollar    52    
5 percent    53    6 ampersand    54    
7 slash braceleft    55    8 parenleft bracketleft    56    
9 parenright bracketright    57    a A    65    
b B    66    c C    67    
d D    68    e E EuroSign    69    
f F    70    g G    71    
h H    72    i I    73    
j J    74    k K    75    
l L    76    m M mu    77    
n N    78    o O    79    
p P    80    q Q at    81    
r R    82    s S    83    
t T    84    u U    85    
v V    86    w W    87    
x X    88    y Y    89    
z Z    90    KP_0    96    
KP_1    97    KP_2    98    
KP_3    99    KP_4    100    
KP_5    101    KP_6    102    
KP_7    103    KP_8    104    
KP_9    105    KP_Multiply    106    
KP_Add    107    KP_Separator    108    
KP_Subtract    109    KP_Decimal    110    
KP_Divide    111    F1    112    
F2    113    F3    114    
F4    115    F5    116    
F6    117    F8    119    
F9    120    F10    121    
F11    122    F12    123    
F13    124    F14    125    
F15    126    F16    127    
F17    128    F18    129    
F19    130    F20    131    
F21    132    F22    133    
F23    134    F24    135    
Num_Lock    136    Scroll_Lock    137    
Acute grave    187    Comma semicolon    188    
Minus underscore    189    Period colon    190    
Numbersign apostrophe    192    Plusminus hyphen macron    210    
Copyright registered    212    Guillemotleft guillemotright    213    
Masculine ordfeminine    214    ae AE    215    
Cent yen    216    Questiondown exclamdown    217    
Onequarter onehalf threequarters    218    Less greater bar    219    
Plus asterisk asciitilde    221    Multiply division    227    
acircumflex Acircumflex    228    ecircumflex Ecircumflex    229    
icircumflex Icircumflex    230    ocircumflex Ocircumflex    231    
ucircumflex Ucircumflex    232    ntilde Ntilde    233    
yacute Yacute    234    oslash Ooblique    235    
aring Aring    236    ccedilla Ccedilla    237    
thorn THORN    238    eth ETH    239    
diaeresis cedilla currency    240    agrave Agrave atilde Atilde    241    
egrave Egrave    242    igrave Igrave    243    
ograve Ograve otilde Otilde    244    ugrave Ugrave    245    
adiaeresis Adiaeresis    246    ediaeresis Ediaeresis    247    
idiaeresis Idiaeresis    248    odiaeresis Odiaeresis    249    
udiaeresis Udiaeresis    250    ssharp question backslash    251    
asciicircum degree    252    3 sterling    253    
Mode_switch    254    
A    0X65    B    0X66    
C    0X67    D    0X68    
E    0X69    F    0X70    
J    0X71    H    0X72    
I    0X73    J    0X74    
K    0X75    L    0X76    
M    0X77    N    0X78    
O    0X79    P    0X80    
Q    0X81    R    0X82    
S    0X83    T    0X84    
U    0X85    V    0X86    
W    0X87    X    0X88    
Y    0X89    Z    0X90    
0    0X48    1    0X49    
2    0X50    3    0X51    
4    0X52    5    0X53    
6    0X54    7    0X55    
8    0X56    9    0X57    
ESC    0X1B    CTRL    0X11    
SHIFT    0X10    ENTER    0XD</pre><p><br/></p>

iframe高度自动适诮

/**
 * [autoIframeHeight iframe自动适应高度]
 * @Author   Jerry
 * @DateTime 2017-05-06
 * @Example  eg:
 * @param    {[type]}   id [description]
 * @return   {[type]}      [description]
 */
function autoIframeHeight(levelid){
    var levelid = levelid;
    var iframes = $(&quot;iframe[levelid='&quot;+levelid+&quot;']&quot;);
    iframes.load(function () {
        var windwoheight = ($(window).height()-180)
        iframes.height(windwoheight);
        $('body #loading').remove();
    });
    
    
}

vue

常用

v-bind
v-if
v-else
v-else-if
v-for
v-show
v-on

:class
:style
:href
@click

demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>

<style>
    div{
        border: 1px dotted #ddd;margin: 5px;
    }
</style>
<body>
    <div class="bg">
        {{msg}}
        <div v-html="template"> </div>
        <div>count:{{count}}</div>
        <hr>
        v-on  @click
        <button  @click="counts()">加值</button>
        <hr/>
        v-if
         <div v-if="count>0">
             count > 0 {{count}}
         </div>    
         <div v-else>
                count <0 {{count}}
         </div>
         <hr/>
         v-show
         <div v-show='count>0'> COUNT > 0 了 </div>
         <hr/>
         v-for
         <div v-for="item in list">
                <div>{{item.name}}->{{item.age}}</div>
         </div>
        <div>
            {{msg1}}
        </div>
    </div>

</body>
<script>
    var app = new Vue({
        el: ".bg",
        data: {
            msg: "hello",
            template: "<div style='color:red'>test</div>",
            count: 0,
            list:[{
                name:"zhanshan",
                age:20
            },{
                name:"lishi",
                age:21
            }]

        },
        methods: {
            counts: function () {
                this.count = this.count + 100;
            }
        },
        watch: {
            //监听值
            count: function (newVal, oldVal) {
                console.log("newval:" + newVal);
                console.log("oldVal:" + oldVal);
            }
        },
        computed: {
            //计算值
            msg1: function () {
                return this.msg + this.count;
            }
        },

    })
</script>

</html>

VUE 生命周期


beforeCreate :el 和 data 并未初始化 
created:完成了 data 数据的初始化,el没有
beforeMount :完成了 el 和 data 初始化 
mounted :完成了了挂载
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured