+ Fork

文件夹/文件-

[-] 显示/切换

  • cd path

    切换至文件夹 cd /web/www/ 

    切换至上级目录 cd ..

  • pwd

    显示当前路径

[-] 创建

  • mkdir dirname

    创建文件夹 mkdir testdir

  • touch file

    创建文件 touch file1 file2..

[-] 查看

  • ls

    列出当前目录下文件 

    ls -al 列出当前目录下文件(包含隐藏文件)

    -a :全部的文件,连同隐藏档( 开头为 . 的文件) 一起列出来(常用)

    -d :仅列出目录本身,而不是列出目录内的文件数据(常用)

    -l :长数据串列出,包含文件的属性与权限等等数据;(常用)

  • cat file

    查看文件内容 cat file.txt

[-] 编辑

  • vim file

    编辑文件内容 vim file.txt

  • echo "text" >>file

    对文件输出内容 echo "text" >> file.txt

[-] 移动/重命名

  • mv $from &to

    mv 文件名 文件名 : 将源文件名改为目标文件名 

    mv 文件名 目录名 : 将文件移动到目标目录 

    mv 目录名 目录名 : 目标目录已存在,将源目录移动到目标目录;目标目录不存在则改名 

    mv 目录名 文件名 : 出错

[-] 复制/粘贴

  • cp dir/file

    复制文件或目录

[-] 删除

  • rm dir/file

    删除文件夹 rm -r dir1 

    删除文件 rm file1 file2..

  • rmdir dir

    删除空文件夹

  • chmod 777 $file

    更改文件权限

用户-

[-] 帐号

[-] 权限

  • chown -R $user $dir

    将目录权限给指定用户

[-] 用户组

Shell-

[-] 基本语法

  • #!/bin/bash

    指定解释器。需设置为777有执行权限

  • $0 $1 ..

    传递参数。$0为执行的文件名。

  • `expr 2 + 2

    条件表达式要放在方括号之间,并且要有空格,例如: [$a==$b] 是错误的,必须写成 [ $a == $b ]。 

    val=`expr $a \* $b`,乘号(*)前边必须加反斜杠(\)才能实现乘法运算;

[-] 变量

  • ${var}

    定义变量 var=xxx ; 变量定义时不能留空格

    使用变量 echo ${var}

  • readonly var

    设置变量为只读

  • unset var

    删除变量,不能删除只读变量

[-] 字符串

[-] 数组

vim-

[-] 模式切换

  • i

    普通模式下,按i进入插入模式

  • :

    普通模式下,按:进入命令行模式 

    命令 说明
    :w [$name/$path] 保存
    :q 退出
    :wq / :x 保存并退出
    :q! 强制退出不保存
    :wq! 强制保存并退出

    普通模式下 shift+zz = 保存退出

[-] 文本编辑

  • Delete

    删除文本(普通模式) 

    x: 删除游标所在的字符 

    dd: 删除整行 

    d$: 删除至行尾 

    d^: 删除至行首 

    dG: 删除至文档结尾处

  • . / Ncmd

    重复操作(普通模式) 

    .(小数点)表示重复上一次的命令操作 

    Ncommand,N表示重复后面的次数

  • nG / gg / G

    行间跳转(普通模式) 

    第N行 / gg第一行 / G最后一行

  • ^ / $

    行内跳转(普通模式)

    行首 / 行尾 

    Ctrl+o快速回到上一次(跳转前)光标所在位置

  • y

    复制(普通模式) 

    普通模式中,yy复制游标所在的整行(3yy表示复制3行)

    普通模式中,y^ 复制至行首,或y0。不含光标所在处字符。

    普通模式中,y$ 复制至行尾。含光标所在处字符。

    普通模式中,yw 复制一个单词。

    普通模式中,y2w 复制两个单词。

    普通模式中,yG 复制至文本末。

    普通模式中,y1G 复制至文本开头。

  • p

    粘贴(普通模式)

    普通模式中,p(小写)代表粘贴至光标后(下)

    普通模式中,P(大写)代表粘贴至光标前(上)

[-] 其他

配置-

[-] 账户

  • config

    /etc/gitconfig

    系统中对所有用户都普遍适用的配置。若使用 git config 时用 --system 选项,读写的就是这个文件。

    ~/.gitconfig

    用户目录下的配置文件只适用于该用户。若使用 git config 时用 --global 选项,读写的就是这个文件。

    .git/config

    当前项目的 Git 目录中的配置文件(也就是工作目录中的)

    这里的配置仅仅针对当前项目有效。每一个级别的配置都会覆盖上层的相同配置,所以 .git/config 里的配置会覆盖 /etc/gitconfig 中的同名变量。

  • git config --global [key] [val]

    git config --global <配置名称> <配置的值>

  • git config --list

    查看各项设置值。

  • git config user.[option]

    $ git config --global user.name "username" 

    $ git config --global user.email user@example.com 

    使用了 --global 选项,那么该命令只需要运行一次,因为之后无论你在该系统上做任何事情, Git 都会使用那些信息。 当你想针对特定项目使用不同的用户名称与邮件地址时,可以在那个项目目录下运行没有 --global 选项的命令来配置。

  • ssh key

    1.查看是否已存在ssh密钥:cd ~/.ssh 

    2.生成密钥: ssh-keygen -t rsa -C "username@mail.com" 按3个回车,密码为空 

    3.得到文件:id_rsa私钥和id_rsa.pub公钥 

    4.添加密钥到ssh:ssh-add $file.name

[-] 文件

  • GUI乱码

    gitconfig文件设置 

    [gui] 

    encoding = utf-8

  • .gitignore

    需要被忽略的文件

    查看多语言范本

    .gitignore 的格式规范如下:

    所有空行或者以 # 开头的行都会被 Git 忽略。

    可以使用标准的 glob 模式匹配。

    匹配模式可以以(/)开头防止递归。

    匹配模式可以以(/)结尾指定目录。

    要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(!)取反。

    所谓的 glob 模式是指 shell 所使用的简化了的正则表达式。 

    星号(*)匹配零个或多个任意字符;

    [abc] 匹配任何一个列在方括号中的字符(这个例子要么匹配一个 a,要么匹配一个 b,要么匹配一个 c);

    问号(?)只匹配一个任意字符;

    如果在方括号中使用短划线分隔两个字符,表示所有在这两个字符范围内的都可以匹配(比如 [0-9] 表示匹配所有 0 到 9 的数字)。 

    使用两个星号(*) 表示匹配任意中间目录,比如`a/**/z` 可以匹配 a/z, a/b/z 或 `a/b/c/z`等。

[-] 别名

  • git config --global alias.st status

    设置别名 

    git config --global alias.$cmd "$cmd_old" 

    如需删除在.git/config中修改

    git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit" 

    git config --global alias.last 'log -1' 

    参考资料

其它-

[-] 其它

创建-

[-] 初始化

  • git init

    git init 使用当前目录初始化一个项目

  • git init [path]

    git init dirname 使用指定目录初始化一个项目

  • fork

    从别人的项目分支一个版本至你的git服务器仓库

[-] 克隆

  • git clone [url]

    dir缺省时,会创建一个和项目同名的目录 

    url支持多种数据传输协议,url可以为https:// 、git:// 、git@ 、user@server:path/to/repo.git等。

  • git clone [url] [path]

    指定dir时生成对应的文件夹名 

    path为“./”时则在当前目录下克隆内容,不再生成项目名目录

修改-

[-] 添加/提交

  • git add [regexp]

    跟踪新文件,加入缓存区INDEX

    git add file1 file2 file3 

    git add */. 

    git add *.js

  • git commit -m "desc"

    提交修改,将缓存区内容添加到仓库中

    git commit -m "message" 

  • git commit -a -m "desc"

    git commit -a -m "message" 跳过使用暂存区域直接提交(但不包含新建文件,仅修改与删除)

  • git commit

    git commit 这种方式会启动文本编辑器以便输入本次提交的说明。

    默认会启用 shell 的环境变量 $EDITOR 所指定的软件,一般都是 vim 或 emacs。

    当然也可以按照 起步 介绍的方式,使用 git config --global core.editor 命令设定你喜欢的编辑软件。

[-] 移动/删除

  • git rm file [--cached][-f]

    git rm 将文件从缓存区和你的硬盘中(工作目录)删除

    git rm --cached 只从缓存区中移除,工作目录中保存

    git rm -f 强制删除,删除之前修改过并且已经放到暂存区域的 

  • git rm -r dir

    git rm -r dirname 删除目录及目录内容 

    当该目录没有stage时,无法进行该操作,直接执行shell命令rm操作即可。

  • git mv (from) (to)

    同linux mv命令,自动判定执行“移动”或“重命名”操作。

    git mv 文件名 文件名 : 将源文件名改为目标文件名 

    git mv 文件名 目录名 : 将文件移动到目标目录 

    git mv 目录名 目录名 : 目标目录已存在,将源目录移动到目标目录;目标目录不存在则改名(当源文件为空时不可移动) 

    git mv 目录名 文件名 : 出错

[-] 查看/对比

  • git status [-s]

    检查状态

    git status -s 简易查看 

    新添加的未跟踪文件前面有 ?? 标记 

    新添加到暂存区中的文件前面有 A 标记

    修改过的文件前面有 M 标记。 

    出现在右边的 M 表示该文件被修改了但是还没放入暂存区

    出现在靠左边的 M 表示该文件被修改了并放入了暂存区。

    AM状态的意思是,这个文件在我们将它添加到缓存之后又有改动

  • git diff [--cached]

    查看修改

    git diff : 尚未缓存的改动 

    git diff --cached : 查看已缓存的改动 (同git diff --staged [1.6+]) 

    git diff HEAD : 查看已缓存的与未缓存的所有改动 

    git diff --stat : 显示摘要而非整个 diff

[-] 历史

  • git log [--pretty=oneline]

    git log 显示全部提交记录

    git log --pretty=oneline 美化显示

  • git reflog

    查看每一次命令

分支-

[-] 创建/切换

[-] 删除

[-] 对比

合并-

[-] 合并

  • git merge $dev

    合并指定分支到当前分支

  • git merge $origin/$dev

    合并指定远端分支到当前分支

[-] 存储

恢复-

[-] 撤销修改

  • git checkout -- $file

    丢弃工作区的修改

  • git reset HEAD $file

    丢弃已经进入暂存区的修改

[-] 版本回退

  • git reset --hard HEAD^

    HEAD表示当前版本,上个版本HEAD^,上上个版本HEAD^^,上100个版本HEAD~100。

    git reset HEAD 取消目前所有暂存的文件(仍在工作区)

    git reset HEAD filename 取消某个文件的暂存状态

  • git reset --hard HEAD^^

    回退到上上个版本

  • git reset --hard $commit_id

    恢复到指定commit版本

[-] 找回

  • git fsck --lost-found

    找出删除的提交对象

  • git show $commit_id

    查看某个提交对象的内容

  • git rebase $commit_id

    恢复指定commit

远端-

[-] 连接

  • git remote -v

    查看全部远端

  • git remote add $origin $url

    添加一个远端地址。默认的为origin

  • git remote $url

    修改本地指向的远程仓库地址

[-] 获取

  • git fetch [$oigin $master]

    获取远端最新内容

  • git pull $origin $master

    获取并合并远端最新内容

[-] 提交

  • git push [-u] $origin $master

    发布本地$master分支到远端$origin 

    第一次添加-u参数

  • git push -f

    强制推送,适用于版本回退场景需覆盖远程

  • git push origin --delete $branch

    git push origin --delete $branch 

    删除远端分支

[-] 追踪

  • git branch --track $name $origin/$name

    git branch --track $name $origin/$name 

    创建一个本地与远端分支的追踪映射。当执行git pull $name时自动同步拉取

标签-

[-] 查看

[-] 创建

  • git tag $name

    给当前commit打tag

  • git tag $name $commit_id

    给指定commit打tag

  • git tag -a $name $commit_id -m "desc"

    指定标签同时添加描述

    git tag -a $name $commit_id -m "desc"

[-] 移除

  • git tag -d $tag

    删除本地tag

  • git push $origin :refs/tags/$tag

    删除远端tag 

    $ git push origin :refs/tags/$tag 

    $ git push origin --delete $tag 

    $ git push origin:$tags

[-] 推送

子库-

[-] 添加

[-] 更新

  • git submodule sync

    1.更新 .gitsubmodule中对应submodule的条目URL 

    2.更新 .git/config 中对应submodule的条目的URL 

    3.执行 git submodule sync

[-] 删除

  • git rm --cached $subpath

    1.删除 .gitsubmodule中对应submodule的条目 

    2.删除 .git/config 中对应submodule的条目 

    3.执行 git rm --cached {submodule_path}

自动部署-

[-] Hooks

服务器-

[-] Gitlab

基础-

[-] 对象

  • new Vue
        <div id="app">
            <h1>{{name}}</h1>
            <p>{{job}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"bf.w",
                    job:"web开发"
                }
            })
        </script>
  • el-容器

    el:element 需要获取的元素 html中的容器元素

        <div id="app">
            <h1>{{name}}</h1>
            <p>{{job}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"bf.w",
                    job:"web开发"
                }
            })
        </script>
  • data-属性-数据

    data:用于数据的存储,可以理解为c# java的属性

        <div id="app">
            <h1>{{name}}</h1>
            <p>{{job}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"bf.w",
                    job:"web开发"
                }
            })
        </script>

     

  • methods-方法
        <div id="app">
            <h1>{{name}}</h1>
            <p>{{job}}</p>
            <p>{{greet()}}</p>
            <p>{{hellopar('bf.w')}}</p>
            <p>{{helloatt('bf.w')}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"bf.w",
                    job:"web开发"
                },
                methods:{
                    greet:function(){ //不带参数方法
                        return 'Good Morning!'; 
                    },
                    hellopar:function(username){//带参数方法
                        return '你好'+username+'!';
                    },
                    helloatt:function(){//调用属性方法
                        return '你好'+this.name+'!';
                    }
                }
            })
        </script>
  • computed-计算属性
        <div id="app">
            <h1>Computen 计算属性</h1>
            <button v-on:click="a++">Add to A</button>
            <button v-on:click="b++">Add to B</button>
            <p>A-{{a}}</p>
            <p>A-{{b}}</p>
            <p>Age+A={{addToA()}}</p><!--页面DOM改变的时候所有方法都会执行-->
            <p>Age+B={{addToB()}}</p>
            <p>Age+B={{alertOne()}}</p>
            <p>Comp Age+a={{addToAComp}}</p><!--计算属性调用不用括号 -->
            <p>Comp Age+b={{addToBComp}}</p><!--当addToAComp调用的时候addToBComp不会执行 计算属性调用不用括号 -->
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    a:0,
                    b:0,
                    age:20
                },
                methods:{
                    addToA:function(){//会执行因为在页面渲染的时候调用
                        return this.a+this.age;
                    },
                    addToB:function(){//会执行因为在页面渲染的时候调用
                        return this.b+this.age;
                    },
                    alertOne:function(){//会执行因为在页面渲染的时候调用
                        alert('HelloOne');
                    },
                    alertTwo:function(){ //不会执行,因为在dom渲染的时候没有调用
                        alert('HelloTwo');
                    }               
                },
                computed:{
                    addToAComp:function(){
                        return this.a+this.age;
                    },
                    addToBComp:function(){
                        console.log('addToBComp'); //当addToAComp调用的时候addToBComp不会执行
                        return this.b+this.age;
                    }
                }
            })
        </script>

[-] 数据绑定

  • v-bind
        <div id="app">
            <a v-bind:href="website">web开发</a><!--v-bind后面跟要绑定的属性-->
            <input type="text" v-bind:value="name">
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:'bf.w',
                    website:'http://www.airuxu.cn'
                }
            })
        </script>
  • v-html
        <div id="app">
            <p v-html="websiteTag">
    
            </p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    websiteTag:"<a href='http://www.airuxu.cn'>web开发</a>"
                }
            })
        </script>

[-] 事件

  • v-on
    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <style>
            #canvas{
                width: 600px;
                padding: 200px 20px;
                text-align: center;
                border: 1px solid #333;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>Events</h1>
            <button v-on:click="age++">涨一岁</button><!--v-on:后面跟html事件-->
            <button v-on:click="subtract(1)">减一岁</button><!--单击-->
            <button v-on:dblclick="add(10)">涨十岁</button><!--双击-->
            <button v-on:dblclick="subtract(10)">减十岁</button>
            <p>My age is {{age}}</p>
            <div id="canvas" v-on:mousemove="updateXY"><!--鼠标事件-->
                {{x}},{{y}}
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    age:30,
                    x:0,
                    y:0
                },
                methods:{
                    add:function(inc){
                        this.age += inc;
                    },
                    subtract:function(dec){
                        this.age -= dec;
                    },
                    updateXY:function(event){
                        //console.log(event);
                        this.x = event.offsetX;
                        this.y = event.offsetY;
                    }
                }
            })
        </script>
    </body>
    </html>

[-] 事件修饰符

  • .stop

    阻止事件

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <style>
            #canvas{
                width: 600px;
                padding: 200px 20px;
                text-align: center;
                border: 1px solid #333;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>Events</h1>
            <button v-on:click="age++">涨一岁</button><!--v-on:后面跟html事件-->
            <button v-on:click="subtract(1)">减一岁</button>
            <button v-on:dblclick="add(10)">涨十岁</button>
            <button v-on:dblclick="subtract(10)">减十岁</button>
            <p>My age is {{age}}</p>
            <div id="canvas" v-on:mousemove="updateXY"><!--鼠标事件-->
                {{x}},{{y}}
                <span v-on:mousemove.stop="">Stop Moving</span><!--鼠标移动事件停止-->
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    age:30,
                    x:0,
                    y:0
                },
                methods:{
                    add:function(inc){
                        this.age += inc;
                    },
                    subtract:function(dec){
                        this.age -= dec;
                    },
                    updateXY:function(event){
                        //console.log(event);
                        this.x = event.offsetX;
                        this.y = event.offsetY;
                    }
                }
            })
        </script>
    </body>
    </html>
  • .once

    事件将只会触发一次

    <button v-on:click.once="age">涨一岁</button>
  • .prevent

    阻止默认事件

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

[-] 按键修饰符

  • keyup
        <div id="app">
            <h1>键盘Events</h1>
            <label>姓名:</label>
            <input type="text" v-on:keyup="logName()">
            <label>年龄:</label>
            <input type="text" v-on:keyup="logAge()">
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                    logName:function(){
                        console.log('你正在输入姓名');
                    },
                    logAge:function(){
                        console.log('你正在输入年龄');
                    }
                }
            })
        </script>
  • keyup.键位
        <div id="app">
            <h1>键盘Events</h1>
            <label>姓名:</label>
            <input type="text" v-on:keyup.enter="logName()">
            <label>年龄:</label>
            <input type="text" v-on:keyup.ctrl.enter="logAge()">
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                    logName:function(){
                        console.log('你正在输入姓名');
                    },
                    logAge:function(){
                        console.log('你正在输入年龄');
                    }
                }
            })
        </script>

    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

    可以通过全局 config.keyCodes 对象自定义按键修饰符别名

    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

[-] 双向数据绑定

  • ref
        <div id="app">
            <h1>数据双向绑定</h1>
            <label>姓名:</label>
            <input ref="name" type="text" v-on:keyup="logName()">
            <span>{{name}}</span>
            <label>年龄:</label>
            <input ref="age" type="text" v-on:keyup="logAge()">
            <span>{{age}}</span>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"",
                    age:""
                },
                methods:{
                    logName:function(){
                        this.name = this.$refs.name.value;
                    },
                    logAge:function(){
                        this.age = this.$refs.age.value;
                    }
                }
            })
        </script>
  • v-model
        <div id="app">
            <h1>数据双向绑定</h1>
            <label>姓名:</label>
            <input  type="text" v-model="name" >
            <span>{{name}}</span>
            <label>年龄:</label>
            <input  type="text" v-model="age">
            <span>{{age}}</span>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name:"",
                    age:""
                },
                methods:{
                    
                }
            })
        </script>

[-] 动态绑定css样式

  • v-bind

    利用v-bind:class 达到改变样式的目的

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <style>
            span{
                background: red;
                display: inline-block;
                padding: 10px;
                color: #fff;
                margin: 10px 0;
            }
            .changeColor span{
                background: green;
            }
            .changeLength span:after{
                content: "length";
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>动态CSS Class</h1>
            <h2>示例1</h2>
            <!--v-bind:class="{changeColor:changeColorAtt}" 属性changeColorAtt为true时样式changeColor就会生效-->
            <div v-on:click="changeColorAtt = !changeColorAtt" v-bind:class="{changeColor:changeColorAtt}">
                <span>点击我动态改变颜色</span>
            </div>
            <h2>示例2</h2>
            <!--利用事件改变属性值-->
            <button v-on:click="changeColorAtt = !changeColorAtt">改变颜色</button>
            <button v-on:click="changeLengthAtt = !changeLengthAtt">改变长度</button>
            <!--绑定计算属性-->
            <div v-bind:class="compClasses">
                <span>changeColor</span>
            </div>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    changeColorAtt:false,
                    changeLengthAtt:false
                },
                methods:{
                                 
                },
                computed:{
                    compClasses:function(){
                        return {
                            changeColor:this.changeColorAtt,//changeColor css 的 class名
                            changeLength:this.changeLengthAtt//changeLength css 的 class名
                        }
                    }
                }
            })
        </script>
    </body>
    </html>

指令-

[-] 逻辑判断

  • v-if

    当v-if值为flase时内容在dom中不显示

        <div id="app">
            <h1>v-if条件</h1>
            <button v-on:click="error = !error">显示成功</button>
            <button v-on:click="success = !success">显示失败</button>
            <p v-if="error">网络连接失败</p>
            <p v-if="success">网络连接成功</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   error:false,
                   success:false
                },
                methods:{
                                 
                },
                computed:{
                    
                }
            })
        </script>
  • v-show

    v-show为flase时 内容在dom中是利用css隐藏 style="display: none;"

        <div id="app">
            <h1>v-if条件</h1>
            <button v-on:click="error = !error">显示成功</button>
            <button v-on:click="success = !success">显示失败</button>
            <p v-show="error">网络连接失败</p>
            <p v-show="success">网络连接成功</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   error:false,
                   success:false
                },
                methods:{
                                 
                },
                computed:{
                    
                }
            })
        </script>

     

[-] 循环

  • v-for
    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app">
            <h1>v-for循环</h1>
            <ul>
                <li v-for="character in characters">
                    {{character}}
                </li>
            </ul>
            <ul>
                <li v-for="user in users">
                    name:{{user.name}} age:{{user.age}}
                </li>
            </ul>
            <!--template相当于一个空标签,用于循环不会产生v-for所在标签的代码-->
            <template v-for="(user,index) in users">
                <div>
                    <p>{{index}}</p>
                    <p>{{user.name}}</p>
                    <p>age:{{user.age}}</p>
                </div>           
            </template>
            -------------------
            <br>
            <template v-for="user in users">
                --分割线--
                <!--v-for遍历对象-->
                <div v-for="(val,key) in user">
                    <p>{{key}} - {{val}}</p>
                </div>           
            </template>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   characters:["Mario","Luffy","Yoshi"],
                   users:[
                       {name:"Henry",age:30},
                       {name:"Bucky",age:25},
                       {name:"Emily",age:18}
                   ]
                },
                methods:{
                                 
                },
                computed:{
                    
                }
            })
        </script>
    </body>
    </html>

生命周期-

[-] 生命周期

  • beforeCreate

    组件实例化之前执行的函数

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                }
            })
        </script>
  • created

    组件实例化完毕,但页面还未显示

    一半ajax请求初始化数据,放在此方法

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                }
            })
        </script>
  • beforeMount

    组件挂载前,页面仍未展示,但虚拟DOM已经配置

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                }
            })
        </script>
  • mounted

    组件挂载后,此方法执行后,页面显示

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                },
                mounted:function(){
                    alert("组件挂载后,此方法执行后,页面显示");
                },
                beforeUpdate:function(){
                    alert("组件更新前,页面仍未更新,但虚拟DOM已经配置");
                }
            })
        </script>
  • beforeUpdate

    组件更新前,页面仍未更新,但虚拟DOM已经配置

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                },
                mounted:function(){
                    alert("组件挂载后,此方法执行后,页面显示");
                },
                beforeUpdate:function(){
                    alert("组件更新前,页面仍未更新,但虚拟DOM已经配置");
                }
            })
        </script>
  • updated

    组件更新,此方法执行后页面显示

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                },
                mounted:function(){
                    alert("组件挂载后,此方法执行后,页面显示");
                },
                beforeUpdate:function(){
                    alert("组件更新前,页面仍未更新,但虚拟DOM已经配置");
                },
                updated:function(){
                    alert("组件更新,此方法执行后页面显示");
                }
            })
        </script>
  • beforeDestroy

    组件销毁前

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                },
                mounted:function(){
                    alert("组件挂载后,此方法执行后,页面显示");
                },
                beforeUpdate:function(){
                    alert("组件更新前,页面仍未更新,但虚拟DOM已经配置");
                },
                updated:function(){
                    alert("组件更新,此方法执行后页面显示");
                },
                beforeDestroy:function(){
                    alert("组件销毁前");
                },
                destroyed:function(){
                    alert("组件销毁");
                }
            })
        </script>
  • destroyed

    组件销毁

        <div id="app">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                   
                },
                methods:{
                                 
                },
                computed:{
                    
                },
                beforeCreate:function(){
                    alert("组件实例化之前执行的函数");
                },
                created:function(){
                    alert("组件实例化完毕,但页面还未显示");
                },
                beforeMount:function(){
                    alert("组件挂载前,页面仍未展示,但虚拟DOM已经配置");
                },
                mounted:function(){
                    alert("组件挂载后,此方法执行后,页面显示");
                },
                beforeUpdate:function(){
                    alert("组件更新前,页面仍未更新,但虚拟DOM已经配置");
                },
                updated:function(){
                    alert("组件更新,此方法执行后页面显示");
                },
                beforeDestroy:function(){
                    alert("组件销毁前");
                },
                destroyed:function(){
                    alert("组件销毁");
                }
            })
        </script>

AJAX-

[-] AJAX

  • vue-resource (get)

    vue-resource 插件

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.js"></script>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="user in userdata">
                    Id={{user.id}} name={{user.name}} zipcore={{user.address.zipcode}}
                </li>
            </ul>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    apiUrl: 'http://jsonplaceholder.typicode.com/users',
                    userdata:''
                },
                methods:{
                                 
                },
                created:function(){
                    this.$http.get(this.apiUrl)
                    .then(
                        function(response){
                            console.log(response.data);
                            console.log('响应成功回调');
                            this.userdata = response.data;
                        },
                        function(response){
                            console.log('响应失败回调');
                        }
                    )
                    .catch(function(response){//catch方法用于捕捉程序的异常,catch方法和errorCallback是不同的,errorCallback只在响应失败时调用,而catch则是在整个请求到响应过程中,只要程序出错了就会被调用。
                        console.log('catch方法用于捕捉程序的异常');
                        console.log(response);
                    });
                    
                }
            })
        </script>
    </body>
    </html>
bf.w's Snippet Box
×