|
|
步骤
1
:
v-on 监听事件
步骤
2
:
v-on 缩写为 @
步骤
3
:
事件修饰符
步骤
4
:
冒泡这件事
步骤
5
:
事件修饰符 阻止冒泡 .stop
步骤
6
:
事件修饰符 优先触发 .capture
步骤
7
:
事件修饰符 只有自己能触发，子元素无法触发.self
步骤
8
:
事件修饰符 只能提交一次 .once
步骤
9
:
事件修饰符 阻止提交 .prevent
1. 在 js里为 Vue 对象的数据设置为 clickNumber
data: {
clickNumber:0
}
2. 新建一个方法： count， 其作用是 clickNumber 自增1
methods:{
count: function(){
this.clickNumber++;
}
}
3. 在按钮上增加 click 监听，调用 count 方法
<button v-on:click="count">点击</button>
");
window.frames["iframe_show7780"].document.write(decodeHtml($("textarea#stepcodeTextarea7780").val()));
window.frames["iframe_show7780"].document.close();
$(window.frames["iframe_show7780"]).load(function(){
$("#iframe_show7780").height($("#iframe_show7780").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7780").height($("#iframe_show7780").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button v-on:click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button v-on:click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
");
window.frames["iframe7780"].document.write(decodeHtml(code7780));
window.frames["iframe7780"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7780"]).load(function(){
$("#iframe7780").height($("#iframe7780").contents().find("body").height()+showittryitheight);
});
$("#iframe7780").height($("#iframe7780").contents().find("body").height()+showittryitheight);
alreadyWriteCode7780 = code7780;
$("#rendering7780").hide();
$("#rendered7780").show();
}
var tRereshRetry2DemoPanel7780 = setInterval(rereshRetry2DemoPanel7780,1000);
var binded7780 = false;
$("textarea#stepcodeTextarea7780").keyup(function(){
if(!binded7780){
$(window).bind('beforeunload',function(){
binded7780 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7780 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7780!=newCode){
// window.frames["iframe7780"].document.write("
");
// window.frames["iframe7780"].document.write(decodeHtml($("textarea#stepcodeTextarea7780").val()));
// window.frames["iframe7780"].document.close();
// $(window.frames["iframe7780"]).load(function(){
// $("#iframe7780").height($("#iframe7780").contents().find("body").height()+showittryitheight);
// });
// code7780 = newCode;
// }
});
$(".tryButton7780").click(function(){
$("#tryDiv7780").show();
$("#stepcodeTextarea7780").focus();
$("#stepcodeTextarea7780").height(200);
$("#iframe7780").height(0);
window.frames["iframe7780"].document.write("
");
window.frames["iframe7780"].document.write(decodeHtml($("textarea#stepcodeTextarea7780").val()));
window.frames["iframe7780"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7780"]).load(function(){
$("#iframe7780").height($("#iframe7780").contents().find("body").height()+showittryitheight);
});
$("#iframe7780").height($("#iframe7780").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7780.focus();
editor7780.setSize(null, "250");
$("#rendering7780").hide();
$("#rendered7780").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7780 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7780"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7780.on("change",function(doc){
if(!binded7780){
$(window).bind('beforeunload',function(){
binded7780 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7780 = newCode;
$("textarea#stepcodeTextarea7780").val(newCode);
if(alreadyWriteCode7780!=code7780){
lastModifedTime7780 = new Date().getTime();
$("#rendering7780").show();
$("#rendered7780").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7780 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7780.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7780").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
v-on 还可以缩写为 @ 原来写法：
<button v-on:click="count">点击</button>
缩写之后：
<button @click="count">点击</button>
");
window.frames["iframe_show7787"].document.write(decodeHtml($("textarea#stepcodeTextarea7787").val()));
window.frames["iframe_show7787"].document.close();
$(window.frames["iframe_show7787"]).load(function(){
$("#iframe_show7787").height($("#iframe_show7787").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7787").height($("#iframe_show7787").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button @click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button @click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
");
window.frames["iframe7787"].document.write(decodeHtml(code7787));
window.frames["iframe7787"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7787"]).load(function(){
$("#iframe7787").height($("#iframe7787").contents().find("body").height()+showittryitheight);
});
$("#iframe7787").height($("#iframe7787").contents().find("body").height()+showittryitheight);
alreadyWriteCode7787 = code7787;
$("#rendering7787").hide();
$("#rendered7787").show();
}
var tRereshRetry2DemoPanel7787 = setInterval(rereshRetry2DemoPanel7787,1000);
var binded7787 = false;
$("textarea#stepcodeTextarea7787").keyup(function(){
if(!binded7787){
$(window).bind('beforeunload',function(){
binded7787 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7787 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7787!=newCode){
// window.frames["iframe7787"].document.write("
");
// window.frames["iframe7787"].document.write(decodeHtml($("textarea#stepcodeTextarea7787").val()));
// window.frames["iframe7787"].document.close();
// $(window.frames["iframe7787"]).load(function(){
// $("#iframe7787").height($("#iframe7787").contents().find("body").height()+showittryitheight);
// });
// code7787 = newCode;
// }
});
$(".tryButton7787").click(function(){
$("#tryDiv7787").show();
$("#stepcodeTextarea7787").focus();
$("#stepcodeTextarea7787").height(200);
$("#iframe7787").height(0);
window.frames["iframe7787"].document.write("
");
window.frames["iframe7787"].document.write(decodeHtml($("textarea#stepcodeTextarea7787").val()));
window.frames["iframe7787"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7787"]).load(function(){
$("#iframe7787").height($("#iframe7787").contents().find("body").height()+showittryitheight);
});
$("#iframe7787").height($("#iframe7787").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7787.focus();
editor7787.setSize(null, "250");
$("#rendering7787").hide();
$("#rendered7787").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7787 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7787"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7787.on("change",function(doc){
if(!binded7787){
$(window).bind('beforeunload',function(){
binded7787 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7787 = newCode;
$("textarea#stepcodeTextarea7787").val(newCode);
if(alreadyWriteCode7787!=code7787){
lastModifedTime7787 = new Date().getTime();
$("#rendering7787").show();
$("#rendered7787").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7787 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7787.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7787").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
vue.js 还提供了各种事件修饰符来方便开发者使用。
.stop
.prevent
.capture
.self
.once
这些都是什么用呢？ 接下来就会一一展开
事件修饰符 里面有几个都是关于冒泡的，那么什么是冒泡呢? 简单的说就是 父元素里有 子元素， 如果点击了 子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。 尝试点击下面的任意一个 div，就会观察到冒泡现象
");
window.frames["iframe_show7789"].document.write(decodeHtml($("textarea#stepcodeTextarea7789").val()));
window.frames["iframe_show7789"].document.close();
$(window.frames["iframe_show7789"]).load(function(){
$("#iframe_show7789").height($("#iframe_show7789").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7789").height($("#iframe_show7789").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: green;
}
#father {
background: blue;
}
#me {
background: red;
}#son {
background: gray;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: green;
}
#father {
background: blue;
}
#me {
background: red;
}#son {
background: gray;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
");
window.frames["iframe7789"].document.write(decodeHtml(code7789));
window.frames["iframe7789"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7789"]).load(function(){
$("#iframe7789").height($("#iframe7789").contents().find("body").height()+showittryitheight);
});
$("#iframe7789").height($("#iframe7789").contents().find("body").height()+showittryitheight);
alreadyWriteCode7789 = code7789;
$("#rendering7789").hide();
$("#rendered7789").show();
}
var tRereshRetry2DemoPanel7789 = setInterval(rereshRetry2DemoPanel7789,1000);
var binded7789 = false;
$("textarea#stepcodeTextarea7789").keyup(function(){
if(!binded7789){
$(window).bind('beforeunload',function(){
binded7789 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7789 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7789!=newCode){
// window.frames["iframe7789"].document.write("
");
// window.frames["iframe7789"].document.write(decodeHtml($("textarea#stepcodeTextarea7789").val()));
// window.frames["iframe7789"].document.close();
// $(window.frames["iframe7789"]).load(function(){
// $("#iframe7789").height($("#iframe7789").contents().find("body").height()+showittryitheight);
// });
// code7789 = newCode;
// }
});
$(".tryButton7789").click(function(){
$("#tryDiv7789").show();
$("#stepcodeTextarea7789").focus();
$("#stepcodeTextarea7789").height(200);
$("#iframe7789").height(0);
window.frames["iframe7789"].document.write("
");
window.frames["iframe7789"].document.write(decodeHtml($("textarea#stepcodeTextarea7789").val()));
window.frames["iframe7789"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7789"]).load(function(){
$("#iframe7789").height($("#iframe7789").contents().find("body").height()+showittryitheight);
});
$("#iframe7789").height($("#iframe7789").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7789.focus();
editor7789.setSize(null, "250");
$("#rendering7789").hide();
$("#rendered7789").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7789 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7789"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7789.on("change",function(doc){
if(!binded7789){
$(window).bind('beforeunload',function(){
binded7789 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7789 = newCode;
$("textarea#stepcodeTextarea7789").val(newCode);
if(alreadyWriteCode7789!=code7789){
lastModifedTime7789 = new Date().getTime();
$("#rendering7789").show();
$("#rendered7789").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7789 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7789.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7789").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
步骤
5
:
事件修饰符 阻止冒泡 .stop
顶
折
在me上的click后面加一个 .stop， 那么冒泡到了这里就结束了，就不会冒到father上面去了。 <div id="me" v-on:click .stop="doc">
");
window.frames["iframe_show7790"].document.write(decodeHtml($("textarea#stepcodeTextarea7790").val()));
window.frames["iframe_show7790"].document.close();
$(window.frames["iframe_show7790"]).load(function(){
$("#iframe_show7790").height($("#iframe_show7790").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7790").height($("#iframe_show7790").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click.stop="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click.stop="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
");
window.frames["iframe7790"].document.write(decodeHtml(code7790));
window.frames["iframe7790"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7790"]).load(function(){
$("#iframe7790").height($("#iframe7790").contents().find("body").height()+showittryitheight);
});
$("#iframe7790").height($("#iframe7790").contents().find("body").height()+showittryitheight);
alreadyWriteCode7790 = code7790;
$("#rendering7790").hide();
$("#rendered7790").show();
}
var tRereshRetry2DemoPanel7790 = setInterval(rereshRetry2DemoPanel7790,1000);
var binded7790 = false;
$("textarea#stepcodeTextarea7790").keyup(function(){
if(!binded7790){
$(window).bind('beforeunload',function(){
binded7790 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7790 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7790!=newCode){
// window.frames["iframe7790"].document.write("
");
// window.frames["iframe7790"].document.write(decodeHtml($("textarea#stepcodeTextarea7790").val()));
// window.frames["iframe7790"].document.close();
// $(window.frames["iframe7790"]).load(function(){
// $("#iframe7790").height($("#iframe7790").contents().find("body").height()+showittryitheight);
// });
// code7790 = newCode;
// }
});
$(".tryButton7790").click(function(){
$("#tryDiv7790").show();
$("#stepcodeTextarea7790").focus();
$("#stepcodeTextarea7790").height(200);
$("#iframe7790").height(0);
window.frames["iframe7790"].document.write("
");
window.frames["iframe7790"].document.write(decodeHtml($("textarea#stepcodeTextarea7790").val()));
window.frames["iframe7790"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7790"]).load(function(){
$("#iframe7790").height($("#iframe7790").contents().find("body").height()+showittryitheight);
});
$("#iframe7790").height($("#iframe7790").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7790.focus();
editor7790.setSize(null, "250");
$("#rendering7790").hide();
$("#rendered7790").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7790 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7790"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7790.on("change",function(doc){
if(!binded7790){
$(window).bind('beforeunload',function(){
binded7790 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7790 = newCode;
$("textarea#stepcodeTextarea7790").val(newCode);
if(alreadyWriteCode7790!=code7790){
lastModifedTime7790 = new Date().getTime();
$("#rendering7790").show();
$("#rendered7790").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7790 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7790.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7790").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
步骤
6
:
事件修饰符 优先触发 .capture
顶
折
在father 上增加一个.capture <div id="father" v-on:click .capture="doc"> 那么当冒泡发生的时候，就会优先让father捕捉事件。 点击son或者me的时候，都会优先触发它
");
window.frames["iframe_show7791"].document.write(decodeHtml($("textarea#stepcodeTextarea7791").val()));
window.frames["iframe_show7791"].document.close();
$(window.frames["iframe_show7791"]).load(function(){
$("#iframe_show7791").height($("#iframe_show7791").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7791").height($("#iframe_show7791").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.capture="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.capture="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
");
window.frames["iframe7791"].document.write(decodeHtml(code7791));
window.frames["iframe7791"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7791"]).load(function(){
$("#iframe7791").height($("#iframe7791").contents().find("body").height()+showittryitheight);
});
$("#iframe7791").height($("#iframe7791").contents().find("body").height()+showittryitheight);
alreadyWriteCode7791 = code7791;
$("#rendering7791").hide();
$("#rendered7791").show();
}
var tRereshRetry2DemoPanel7791 = setInterval(rereshRetry2DemoPanel7791,1000);
var binded7791 = false;
$("textarea#stepcodeTextarea7791").keyup(function(){
if(!binded7791){
$(window).bind('beforeunload',function(){
binded7791 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7791 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7791!=newCode){
// window.frames["iframe7791"].document.write("
");
// window.frames["iframe7791"].document.write(decodeHtml($("textarea#stepcodeTextarea7791").val()));
// window.frames["iframe7791"].document.close();
// $(window.frames["iframe7791"]).load(function(){
// $("#iframe7791").height($("#iframe7791").contents().find("body").height()+showittryitheight);
// });
// code7791 = newCode;
// }
});
$(".tryButton7791").click(function(){
$("#tryDiv7791").show();
$("#stepcodeTextarea7791").focus();
$("#stepcodeTextarea7791").height(200);
$("#iframe7791").height(0);
window.frames["iframe7791"].document.write("
");
window.frames["iframe7791"].document.write(decodeHtml($("textarea#stepcodeTextarea7791").val()));
window.frames["iframe7791"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7791"]).load(function(){
$("#iframe7791").height($("#iframe7791").contents().find("body").height()+showittryitheight);
});
$("#iframe7791").height($("#iframe7791").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7791.focus();
editor7791.setSize(null, "250");
$("#rendering7791").hide();
$("#rendered7791").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7791 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7791"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7791.on("change",function(doc){
if(!binded7791){
$(window).bind('beforeunload',function(){
binded7791 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7791 = newCode;
$("textarea#stepcodeTextarea7791").val(newCode);
if(alreadyWriteCode7791!=code7791){
lastModifedTime7791 = new Date().getTime();
$("#rendering7791").show();
$("#rendered7791").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7791 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7791.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7791").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
步骤
7
:
事件修饰符 只有自己能触发，子元素无法触发.self
顶
折
修改father,增加 .self <div id="father" v-on:click .self="doc"> 这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。
");
window.frames["iframe_show7792"].document.write(decodeHtml($("textarea#stepcodeTextarea7792").val()));
window.frames["iframe_show7792"].document.close();
$(window.frames["iframe_show7792"]).load(function(){
$("#iframe_show7792").height($("#iframe_show7792").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7792").height($("#iframe_show7792").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.self="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.self="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
");
window.frames["iframe7792"].document.write(decodeHtml(code7792));
window.frames["iframe7792"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7792"]).load(function(){
$("#iframe7792").height($("#iframe7792").contents().find("body").height()+showittryitheight);
});
$("#iframe7792").height($("#iframe7792").contents().find("body").height()+showittryitheight);
alreadyWriteCode7792 = code7792;
$("#rendering7792").hide();
$("#rendered7792").show();
}
var tRereshRetry2DemoPanel7792 = setInterval(rereshRetry2DemoPanel7792,1000);
var binded7792 = false;
$("textarea#stepcodeTextarea7792").keyup(function(){
if(!binded7792){
$(window).bind('beforeunload',function(){
binded7792 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7792 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7792!=newCode){
// window.frames["iframe7792"].document.write("
");
// window.frames["iframe7792"].document.write(decodeHtml($("textarea#stepcodeTextarea7792").val()));
// window.frames["iframe7792"].document.close();
// $(window.frames["iframe7792"]).load(function(){
// $("#iframe7792").height($("#iframe7792").contents().find("body").height()+showittryitheight);
// });
// code7792 = newCode;
// }
});
$(".tryButton7792").click(function(){
$("#tryDiv7792").show();
$("#stepcodeTextarea7792").focus();
$("#stepcodeTextarea7792").height(200);
$("#iframe7792").height(0);
window.frames["iframe7792"].document.write("
");
window.frames["iframe7792"].document.write(decodeHtml($("textarea#stepcodeTextarea7792").val()));
window.frames["iframe7792"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7792"]).load(function(){
$("#iframe7792").height($("#iframe7792").contents().find("body").height()+showittryitheight);
});
$("#iframe7792").height($("#iframe7792").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7792.focus();
editor7792.setSize(null, "250");
$("#rendering7792").hide();
$("#rendered7792").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7792 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7792"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7792.on("change",function(doc){
if(!binded7792){
$(window).bind('beforeunload',function(){
binded7792 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7792 = newCode;
$("textarea#stepcodeTextarea7792").val(newCode);
if(alreadyWriteCode7792!=code7792){
lastModifedTime7792 = new Date().getTime();
$("#rendering7792").show();
$("#rendered7792").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7792 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7792.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7792").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
步骤
8
:
事件修饰符 只能提交一次 .once
顶
折
修改father,增加 .once <div id="father" v-on:click .once="doc"> 这样father点击一次之后，就不会再监听到click了，但是有意思的是，grandFather还能监听到~
");
window.frames["iframe_show7793"].document.write(decodeHtml($("textarea#stepcodeTextarea7793").val()));
window.frames["iframe_show7793"].document.close();
$(window.frames["iframe_show7793"]).load(function(){
$("#iframe_show7793").height($("#iframe_show7793").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7793").height($("#iframe_show7793").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.once="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
width: 100px;
cursor:pointer;
}
#grandFather {
background: deeppink;
}
#father {
background: pink;
}
#me {
background: hotpink;
}#son {
background: #ff4225;
}
</style>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click.once="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id= event.currentTarget.id;
alert(this.id)
}
}
})
</script>
");
window.frames["iframe7793"].document.write(decodeHtml(code7793));
window.frames["iframe7793"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7793"]).load(function(){
$("#iframe7793").height($("#iframe7793").contents().find("body").height()+showittryitheight);
});
$("#iframe7793").height($("#iframe7793").contents().find("body").height()+showittryitheight);
alreadyWriteCode7793 = code7793;
$("#rendering7793").hide();
$("#rendered7793").show();
}
var tRereshRetry2DemoPanel7793 = setInterval(rereshRetry2DemoPanel7793,1000);
var binded7793 = false;
$("textarea#stepcodeTextarea7793").keyup(function(){
if(!binded7793){
$(window).bind('beforeunload',function(){
binded7793 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7793 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7793!=newCode){
// window.frames["iframe7793"].document.write("
");
// window.frames["iframe7793"].document.write(decodeHtml($("textarea#stepcodeTextarea7793").val()));
// window.frames["iframe7793"].document.close();
// $(window.frames["iframe7793"]).load(function(){
// $("#iframe7793").height($("#iframe7793").contents().find("body").height()+showittryitheight);
// });
// code7793 = newCode;
// }
});
$(".tryButton7793").click(function(){
$("#tryDiv7793").show();
$("#stepcodeTextarea7793").focus();
$("#stepcodeTextarea7793").height(200);
$("#iframe7793").height(0);
window.frames["iframe7793"].document.write("
");
window.frames["iframe7793"].document.write(decodeHtml($("textarea#stepcodeTextarea7793").val()));
window.frames["iframe7793"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7793"]).load(function(){
$("#iframe7793").height($("#iframe7793").contents().find("body").height()+showittryitheight);
});
$("#iframe7793").height($("#iframe7793").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7793.focus();
editor7793.setSize(null, "250");
$("#rendering7793").hide();
$("#rendered7793").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7793 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7793"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7793.on("change",function(doc){
if(!binded7793){
$(window).bind('beforeunload',function(){
binded7793 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7793 = newCode;
$("textarea#stepcodeTextarea7793").val(newCode);
if(alreadyWriteCode7793!=code7793){
lastModifedTime7793 = new Date().getTime();
$("#rendering7793").show();
$("#rendered7793").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7793 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7793.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7793").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
步骤
9
:
事件修饰符 阻止提交 .prevent
顶
折
通过在 click 后面添加 .prevent 可以阻止页面刷新。
@click.prevent="jump"
也可以直接用@click.prevent后面不跟函数
@click.prevent
注： 只有超链和form这种会导致页面刷新的操作，.prevent 才有用。 普通的不导致页面刷新的按钮，加上这个没有任何变化。 注： 跳转到 12306.com 后，用 F5 刷新页面返回。。。
");
window.frames["iframe_show7794"].document.write(decodeHtml($("textarea#stepcodeTextarea7794").val()));
window.frames["iframe_show7794"].document.close();
$(window.frames["iframe_show7794"]).load(function(){
$("#iframe_show7794").height($("#iframe_show7794").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7794").height($("#iframe_show7794").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>
<br>
<br>
<form @submit="jump" action="http://12306.com">
<button type="submit">正常的form</button>
</form>
<form @submit.prevent="jump" action="http://12306.com">
<button type="submit">prevent jump()之后的form</button>
</form>
<form @submit.prevent action="http://12306.com">
<button type="submit">纯prevent之后的form</button>
</form>
</div>
<script>
new Vue({
el: '#div1',
data: {
},
methods:{
jump:function(){
alert("jump()函数被调用");
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
<a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a>
<br>
<a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a>
<br>
<br>
<form @submit="jump" action="http://12306.com">
<button type="submit">正常的form</button>
</form>
<form @submit.prevent="jump" action="http://12306.com">
<button type="submit">prevent jump()之后的form</button>
</form>
<form @submit.prevent action="http://12306.com">
<button type="submit">纯prevent之后的form</button>
</form>
</div>
<script>
new Vue({
el: '#div1',
data: {
},
methods:{
jump:function(){
alert("jump()函数被调用");
}
}
})
</script>
");
window.frames["iframe7794"].document.write(decodeHtml(code7794));
window.frames["iframe7794"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7794"]).load(function(){
$("#iframe7794").height($("#iframe7794").contents().find("body").height()+showittryitheight);
});
$("#iframe7794").height($("#iframe7794").contents().find("body").height()+showittryitheight);
alreadyWriteCode7794 = code7794;
$("#rendering7794").hide();
$("#rendered7794").show();
}
var tRereshRetry2DemoPanel7794 = setInterval(rereshRetry2DemoPanel7794,1000);
var binded7794 = false;
$("textarea#stepcodeTextarea7794").keyup(function(){
if(!binded7794){
$(window).bind('beforeunload',function(){
binded7794 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7794 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7794!=newCode){
// window.frames["iframe7794"].document.write("
");
// window.frames["iframe7794"].document.write(decodeHtml($("textarea#stepcodeTextarea7794").val()));
// window.frames["iframe7794"].document.close();
// $(window.frames["iframe7794"]).load(function(){
// $("#iframe7794").height($("#iframe7794").contents().find("body").height()+showittryitheight);
// });
// code7794 = newCode;
// }
});
$(".tryButton7794").click(function(){
$("#tryDiv7794").show();
$("#stepcodeTextarea7794").focus();
$("#stepcodeTextarea7794").height(200);
$("#iframe7794").height(0);
window.frames["iframe7794"].document.write("
");
window.frames["iframe7794"].document.write(decodeHtml($("textarea#stepcodeTextarea7794").val()));
window.frames["iframe7794"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7794"]).load(function(){
$("#iframe7794").height($("#iframe7794").contents().find("body").height()+showittryitheight);
});
$("#iframe7794").height($("#iframe7794").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7794.focus();
editor7794.setSize(null, "250");
$("#rendering7794").hide();
$("#rendered7794").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor7794 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7794"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor7794.on("change",function(doc){
if(!binded7794){
$(window).bind('beforeunload',function(){
binded7794 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7794 = newCode;
$("textarea#stepcodeTextarea7794").val(newCode);
if(alreadyWriteCode7794!=code7794){
lastModifedTime7794 = new Date().getTime();
$("#rendering7794").show();
$("#rendered7794").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7794 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7794.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7794").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
