vue学习5+linux操作系统

v-on：补充
v-on后面可以加事件修饰符（.）来指出一个指令以特殊的方式绑定。
1.事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
.stop 阻止事件冒泡

<div id="app">
    <div v-on:click="do0">
        <div v-on:click.stop="do1">点击这里</div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好！",
        },
        methods: {
            do0: function () {
                console.log("这是外层div")
            },
            do1: function () {
                console.log("这是内层div")
            }
        }
    })
</script>

 

.prevent 提交时不再重载页面

<div id="app">
    <form v-on:submit.prevent>
        <input type="text" name="username" ><br/>
        <input type="submit" name="" value="提交">
    </form>
</div>
<script>
    window.onload = function() {
        alert('页面加载 执行了 window.onload');
    };
</script>

.capture 当元素发生冒泡时，先触发带有该修饰符的元素绑定的事件

<div id="app">
    <div v-on:click.capture="do0">0
        <div v-on:click="do1">1
            <div v-on:click="do2">2
            </div>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好！",
        },
        methods: {
            do0: function () {
                console.log("0")
            },
            do1: function () {
                console.log("1")
            },
            do2:function(){
                console.log("2")
            }
        }
    })
</script>

当点击了“2”之后，依次输出：0，2，1。点击了“2”之后先触发带有.capture修饰符的元素绑定的事件do0，之后是事件冒泡的过程，由内到外依次触发do2、do1事件。
更为复杂的例子：

<div id="app">
    <div id="a0" v-on:click.capture="doq">a0
        <div id="a1" v-on:click="doq">a1
            <div id="a2" v-on:click.capture="doq">a2
                <div id="a3" v-on:click="doq">a3
                    <div id="a4" v-on:click="doq">a4

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好！",
        },
        methods: {
            doq: function () {
                let id= event.currentTarget.id;
                console.log(id);
                //a0
                //a2
                //a4
                //a3
                //a1
            },
        }
    })
</script>

在点击时，先从外到内触发具有.capture修饰符的元素上的事件，之后是事件冒泡的过程，也就是剩下的元素的事件由内到外触发。

上面是点击a4之后输出的结果：a0、a2、a4、a3、a1
如果点击a3，依次输出的结果为：a0、a2、a3、a1
如果点击a2，依次输出的结果为：a0、a2、a1
如果点击a1，依次输出的结果为：a0、a1

 

v-model指令：便捷的设置和获取表单元素

绑定的数据和表单元素的值相关联：

    <div id="mask">
        <input type="button" value="修改message" @click="setm">
       <input type="text" v-model="message" >
       <h2>{{ message }}</h2>

    </div>
   
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue
    ({
        el:"#mask",
        data:
        { 
         message:"sdutiter"
        },
        mothods:
        {
            setm:function(){
                this.message="sdut 程序员";
            }
        },
    })
       

 

linux复习：

1

1，利用cd /usr/local 命令切换到指定目录；

2，利用cd .. 命令切换到上一层目录。

 

2

1，利用ls /usr 查看usr里所有的文件目录

 

3

1，先利用 cd /tmp进入 tmp目录下 ，再利用 mkdir a 创建名为a的目录，利用 ls /tmp查看创建的a目录 ：

 

1. 然后 利用 mkdir -p a1/a2/a3/a4 创建目录a1/a2/a3/a4，再利用ls /tmp查看创建成功。

 

4

1. 利用命令 rmdir a 和 rmdir -p a1/a2/a3/a4 删除目录文件，并输出ls /tmp命令查看 已经成功删除。

 

5

命令mkdir test 创建一个test文件，利用cp -r test /usr复制时权限不够，就利用sudo cp -r test /usr 来复制到 /usr。

 

 

6

1，输入命令 sudo mv -f test /完成指令

 

2，返回根目录，sudo mv test test2 修改目录名称，利用ls / 查看修改完成。

 

7

1输入命令 sudo rm -d test2 删除test2 ，利用ls / 查看成功删除

 

8

输入ifconfig命令 inet后为该虚拟机ip地址

 

9

1 命令touch hello 创建文件，ls -l 查看时间；

 

2

利用 vi hello 指令 打开hello文件

 

按下“i”键，进入编辑模式，最下面会出现--INSERT--提示，说明已经进入到编辑模式。

 

然后输入 you are very good，按下ESC键退出编辑模式，输入：wq 保存退出。

 

利用 cat hello 命令 查看已经修改好的内容，修改完成。

 

10

先再usr下创建一个test5文件：

 

在根目录下打包成test5.tar.gz：查看已经存在

 

先进入到tmp目录下，再输入命令 tar -xzvf /test5.tar.gz 来解压文件：

 

11

在local目录下输入sudo vi sdut.txt 输入密码 后可以进入编辑页，按i编辑

 

输入 hello sdut

 

按 esc 退出，输入：wq退出

再输入 cat sdut.txt 查看内容

 

12

输入 sudo sh -c ‘echo “my new file” > mysdutfile’进行重定向输出，利用cat 查看操作成功。