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目录 :
- 然后 利用 mkdir -p a1/a2/a3/a4 创建目录a1/a2/a3/a4,再利用ls /tmp查看创建成功。
4
- 利用命令 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 查看操作成功。