|
|
步骤
1
:
CRUD
步骤
2
:
效果
步骤
3
:
分解动作
步骤
4
:
查询
步骤
5
:
增加
步骤
6
:
删除
步骤
7
:
编辑和更新
");
window.frames["iframe_show8023"].document.write(decodeHtml($("textarea#stepcodeTextarea8023").val()));
window.frames["iframe_show8023"].document.close();
$(window.frames["iframe_show8023"]).load(function(){
$("#iframe_show8023").height($("#iframe_show8023").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8023").height($("#iframe_show8023").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="edit(hero)">编辑</a>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
//修改区域隐藏起来先
$("#div4Update").hide();
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
},
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
}
});
</script>
<div style="height:300px"></div>
</body>
</html>
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="edit(hero)">编辑</a>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
//修改区域隐藏起来先
$("#div4Update").hide();
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
},
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
}
});
</script>
<div style="height:300px"></div>
</body>
</html>
");
window.frames["iframe8023"].document.write(decodeHtml(code8023));
window.frames["iframe8023"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8023"]).load(function(){
$("#iframe8023").height($("#iframe8023").contents().find("body").height()+showittryitheight);
});
$("#iframe8023").height($("#iframe8023").contents().find("body").height()+showittryitheight);
alreadyWriteCode8023 = code8023;
$("#rendering8023").hide();
$("#rendered8023").show();
}
var tRereshRetry2DemoPanel8023 = setInterval(rereshRetry2DemoPanel8023,1000);
var binded8023 = false;
$("textarea#stepcodeTextarea8023").keyup(function(){
if(!binded8023){
$(window).bind('beforeunload',function(){
binded8023 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8023 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8023!=newCode){
// window.frames["iframe8023"].document.write("
");
// window.frames["iframe8023"].document.write(decodeHtml($("textarea#stepcodeTextarea8023").val()));
// window.frames["iframe8023"].document.close();
// $(window.frames["iframe8023"]).load(function(){
// $("#iframe8023").height($("#iframe8023").contents().find("body").height()+showittryitheight);
// });
// code8023 = newCode;
// }
});
$(".tryButton8023").click(function(){
$("#tryDiv8023").show();
$("#stepcodeTextarea8023").focus();
$("#stepcodeTextarea8023").height(200);
$("#iframe8023").height(0);
window.frames["iframe8023"].document.write("
");
window.frames["iframe8023"].document.write(decodeHtml($("textarea#stepcodeTextarea8023").val()));
window.frames["iframe8023"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8023"]).load(function(){
$("#iframe8023").height($("#iframe8023").contents().find("body").height()+showittryitheight);
});
$("#iframe8023").height($("#iframe8023").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8023.focus();
editor8023.setSize(null, "250");
$("#rendering8023").hide();
$("#rendered8023").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 editor8023 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8023"), {
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);
}
}
});
editor8023.on("change",function(doc){
if(!binded8023){
$(window).bind('beforeunload',function(){
binded8023 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8023 = newCode;
$("textarea#stepcodeTextarea8023").val(newCode);
if(alreadyWriteCode8023!=code8023){
lastModifedTime8023 = new Date().getTime();
$("#rendering8023").show();
$("#rendered8023").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8023 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8023.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8023").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
接下来，就按照查询，增加，删除，编辑和更新，由浅入深地把这个 CRUD 一点点做出来。
查询很简单，和前面的 循环语句 教程内容一样，没什么区别
");
window.frames["iframe_show8024"].document.write(decodeHtml($("textarea#stepcodeTextarea8024").val()));
window.frames["iframe_show8024"].document.close();
$(window.frames["iframe_show8024"]).load(function(){
$("#iframe_show8024").height($("#iframe_show8024").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8024").height($("#iframe_show8024").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data
});
</script>
</body>
</html>
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data
});
</script>
</body>
</html>
");
window.frames["iframe8024"].document.write(decodeHtml(code8024));
window.frames["iframe8024"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8024"]).load(function(){
$("#iframe8024").height($("#iframe8024").contents().find("body").height()+showittryitheight);
});
$("#iframe8024").height($("#iframe8024").contents().find("body").height()+showittryitheight);
alreadyWriteCode8024 = code8024;
$("#rendering8024").hide();
$("#rendered8024").show();
}
var tRereshRetry2DemoPanel8024 = setInterval(rereshRetry2DemoPanel8024,1000);
var binded8024 = false;
$("textarea#stepcodeTextarea8024").keyup(function(){
if(!binded8024){
$(window).bind('beforeunload',function(){
binded8024 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8024 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8024!=newCode){
// window.frames["iframe8024"].document.write("
");
// window.frames["iframe8024"].document.write(decodeHtml($("textarea#stepcodeTextarea8024").val()));
// window.frames["iframe8024"].document.close();
// $(window.frames["iframe8024"]).load(function(){
// $("#iframe8024").height($("#iframe8024").contents().find("body").height()+showittryitheight);
// });
// code8024 = newCode;
// }
});
$(".tryButton8024").click(function(){
$("#tryDiv8024").show();
$("#stepcodeTextarea8024").focus();
$("#stepcodeTextarea8024").height(200);
$("#iframe8024").height(0);
window.frames["iframe8024"].document.write("
");
window.frames["iframe8024"].document.write(decodeHtml($("textarea#stepcodeTextarea8024").val()));
window.frames["iframe8024"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8024"]).load(function(){
$("#iframe8024").height($("#iframe8024").contents().find("body").height()+showittryitheight);
});
$("#iframe8024").height($("#iframe8024").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8024.focus();
editor8024.setSize(null, "250");
$("#rendering8024").hide();
$("#rendered8024").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 editor8024 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8024"), {
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);
}
}
});
editor8024.on("change",function(doc){
if(!binded8024){
$(window).bind('beforeunload',function(){
binded8024 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8024 = newCode;
$("textarea#stepcodeTextarea8024").val(newCode);
if(alreadyWriteCode8024!=code8024){
lastModifedTime8024 = new Date().getTime();
$("#rendering8024").show();
$("#rendered8024").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8024 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8024.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8024").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
接着就是增加功能 1. 准备输入框
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
输入组件都和 hero4Add 对象通过 v-model 进行了双向绑定。 增加按钮也监听了 add 函数 2. maxId
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
准备了 maxId，作为自增长键，初始值取当前数据的最大id. 3. add函数
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
}
}
");
window.frames["iframe_show8025"].document.write(decodeHtml($("textarea#stepcodeTextarea8025").val()));
window.frames["iframe_show8025"].document.close();
$(window.frames["iframe_show8025"]).load(function(){
$("#iframe_show8025").height($("#iframe_show8025").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8025").height($("#iframe_show8025").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
}
}
});
</script>
</body>
</html>
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
}
}
});
</script>
</body>
</html>
");
window.frames["iframe8025"].document.write(decodeHtml(code8025));
window.frames["iframe8025"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8025"]).load(function(){
$("#iframe8025").height($("#iframe8025").contents().find("body").height()+showittryitheight);
});
$("#iframe8025").height($("#iframe8025").contents().find("body").height()+showittryitheight);
alreadyWriteCode8025 = code8025;
$("#rendering8025").hide();
$("#rendered8025").show();
}
var tRereshRetry2DemoPanel8025 = setInterval(rereshRetry2DemoPanel8025,1000);
var binded8025 = false;
$("textarea#stepcodeTextarea8025").keyup(function(){
if(!binded8025){
$(window).bind('beforeunload',function(){
binded8025 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8025 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8025!=newCode){
// window.frames["iframe8025"].document.write("
");
// window.frames["iframe8025"].document.write(decodeHtml($("textarea#stepcodeTextarea8025").val()));
// window.frames["iframe8025"].document.close();
// $(window.frames["iframe8025"]).load(function(){
// $("#iframe8025").height($("#iframe8025").contents().find("body").height()+showittryitheight);
// });
// code8025 = newCode;
// }
});
$(".tryButton8025").click(function(){
$("#tryDiv8025").show();
$("#stepcodeTextarea8025").focus();
$("#stepcodeTextarea8025").height(200);
$("#iframe8025").height(0);
window.frames["iframe8025"].document.write("
");
window.frames["iframe8025"].document.write(decodeHtml($("textarea#stepcodeTextarea8025").val()));
window.frames["iframe8025"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8025"]).load(function(){
$("#iframe8025").height($("#iframe8025").contents().find("body").height()+showittryitheight);
});
$("#iframe8025").height($("#iframe8025").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8025.focus();
editor8025.setSize(null, "250");
$("#rendering8025").hide();
$("#rendered8025").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 editor8025 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8025"), {
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);
}
}
});
editor8025.on("change",function(doc){
if(!binded8025){
$(window).bind('beforeunload',function(){
binded8025 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8025 = newCode;
$("textarea#stepcodeTextarea8025").val(newCode);
if(alreadyWriteCode8025!=code8025){
lastModifedTime8025 = new Date().getTime();
$("#rendering8025").show();
$("#rendered8025").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8025 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8025.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8025").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
1. 增加删除的链接 <td> <a href="#nowhere" @click="deleteHero(hero.id)">删除</a> </td> 2. 增加 deleteHero 函数，逻辑很简单，就是遍历所有的hero对象，如果id相同，就删掉。
deleteHero: function (id) {
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}
注: 方法名是 deleteHero 而不是 delete, 因为 delete 是关键字。。。 这个坑
");
window.frames["iframe_show8026"].document.write(decodeHtml($("textarea#stepcodeTextarea8026").val()));
window.frames["iframe_show8026"].document.close();
$(window.frames["iframe_show8026"]).load(function(){
$("#iframe_show8026").height($("#iframe_show8026").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8026").height($("#iframe_show8026").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}
}
});
</script>
</body>
</html>
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}
}
});
</script>
</body>
</html>
");
window.frames["iframe8026"].document.write(decodeHtml(code8026));
window.frames["iframe8026"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8026"]).load(function(){
$("#iframe8026").height($("#iframe8026").contents().find("body").height()+showittryitheight);
});
$("#iframe8026").height($("#iframe8026").contents().find("body").height()+showittryitheight);
alreadyWriteCode8026 = code8026;
$("#rendering8026").hide();
$("#rendered8026").show();
}
var tRereshRetry2DemoPanel8026 = setInterval(rereshRetry2DemoPanel8026,1000);
var binded8026 = false;
$("textarea#stepcodeTextarea8026").keyup(function(){
if(!binded8026){
$(window).bind('beforeunload',function(){
binded8026 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8026 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8026!=newCode){
// window.frames["iframe8026"].document.write("
");
// window.frames["iframe8026"].document.write(decodeHtml($("textarea#stepcodeTextarea8026").val()));
// window.frames["iframe8026"].document.close();
// $(window.frames["iframe8026"]).load(function(){
// $("#iframe8026").height($("#iframe8026").contents().find("body").height()+showittryitheight);
// });
// code8026 = newCode;
// }
});
$(".tryButton8026").click(function(){
$("#tryDiv8026").show();
$("#stepcodeTextarea8026").focus();
$("#stepcodeTextarea8026").height(200);
$("#iframe8026").height(0);
window.frames["iframe8026"].document.write("
");
window.frames["iframe8026"].document.write(decodeHtml($("textarea#stepcodeTextarea8026").val()));
window.frames["iframe8026"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8026"]).load(function(){
$("#iframe8026").height($("#iframe8026").contents().find("body").height()+showittryitheight);
});
$("#iframe8026").height($("#iframe8026").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8026.focus();
editor8026.setSize(null, "250");
$("#rendering8026").hide();
$("#rendered8026").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 editor8026 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8026"), {
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);
}
}
});
editor8026.on("change",function(doc){
if(!binded8026){
$(window).bind('beforeunload',function(){
binded8026 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8026 = newCode;
$("textarea#stepcodeTextarea8026").val(newCode);
if(alreadyWriteCode8026!=code8026){
lastModifedTime8026 = new Date().getTime();
$("#rendering8026").show();
$("#rendered8026").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8026 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8026.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8026").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
1. 增加链接 <a href="#nowhere" @click="edit(hero)">编辑</a> 2. 增加用于编辑的 div <div id="div4Update"> 英雄名称: <input type="text" v-model="hero4Update.name" /> <br> 血量： <input type="number" v-model="hero4Update.hp" /> <input type="hidden" v-model="hero4Update.id" /> <br> <button type="button" v-on:click="update">修改</button> <button type="button" v-on:click="cancel">取消</button> </div> 3. 增加相关函数
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
");
window.frames["iframe_show8027"].document.write(decodeHtml($("textarea#stepcodeTextarea8027").val()));
window.frames["iframe_show8027"].document.close();
$(window.frames["iframe_show8027"]).load(function(){
$("#iframe_show8027").height($("#iframe_show8027").contents().find("body").height()+showittryitheight);
});
$("#iframe_show8027").height($("#iframe_show8027").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="edit(hero)">编辑</a>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
//修改区域隐藏起来先
$("#div4Update").hide();
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
},
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
}
});
</script>
<div style="height:300px"></div>
</body>
</html>
<html>
<head>
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style type="text/css">
td{
border:1px solid gray;
}
table{
border-collapse:collapse;
}
div#app{
margin:20px auto;
width:400px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
<td>
<a href="#nowhere" @click="edit(hero)">编辑</a>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
英雄名称:
<input type="text" v-model="hero4Add.name" />
<br>
血量：
<input type="number" v-model="hero4Add.hp" />
<br>
<button type="button" v-on:click="add">增加</button>
</td>
</tr>
</tbody>
</table>
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
</div>
<script type="text/javascript">
//修改区域隐藏起来先
$("#div4Update").hide();
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320},
{ id: 3, name: '安妮', hp: 419},
{ id: 4, name: '死歌', hp: 325},
{ id: 5, name: '米波', hp: 422},
],
hero4Add: { id: 0, name: '', hp: '0'},
hero4Update: { id: 0, name: '', hp: '0'}
};
//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
},
deleteHero: function (id) {
console.log("id"+id);
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
},
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
}
});
</script>
<div style="height:300px"></div>
</body>
</html>
");
window.frames["iframe8027"].document.write(decodeHtml(code8027));
window.frames["iframe8027"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8027"]).load(function(){
$("#iframe8027").height($("#iframe8027").contents().find("body").height()+showittryitheight);
});
$("#iframe8027").height($("#iframe8027").contents().find("body").height()+showittryitheight);
alreadyWriteCode8027 = code8027;
$("#rendering8027").hide();
$("#rendered8027").show();
}
var tRereshRetry2DemoPanel8027 = setInterval(rereshRetry2DemoPanel8027,1000);
var binded8027 = false;
$("textarea#stepcodeTextarea8027").keyup(function(){
if(!binded8027){
$(window).bind('beforeunload',function(){
binded8027 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code8027 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code8027!=newCode){
// window.frames["iframe8027"].document.write("
");
// window.frames["iframe8027"].document.write(decodeHtml($("textarea#stepcodeTextarea8027").val()));
// window.frames["iframe8027"].document.close();
// $(window.frames["iframe8027"]).load(function(){
// $("#iframe8027").height($("#iframe8027").contents().find("body").height()+showittryitheight);
// });
// code8027 = newCode;
// }
});
$(".tryButton8027").click(function(){
$("#tryDiv8027").show();
$("#stepcodeTextarea8027").focus();
$("#stepcodeTextarea8027").height(200);
$("#iframe8027").height(0);
window.frames["iframe8027"].document.write("
");
window.frames["iframe8027"].document.write(decodeHtml($("textarea#stepcodeTextarea8027").val()));
window.frames["iframe8027"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe8027"]).load(function(){
$("#iframe8027").height($("#iframe8027").contents().find("body").height()+showittryitheight);
});
$("#iframe8027").height($("#iframe8027").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor8027.focus();
editor8027.setSize(null, "250");
$("#rendering8027").hide();
$("#rendered8027").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 editor8027 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea8027"), {
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);
}
}
});
editor8027.on("change",function(doc){
if(!binded8027){
$(window).bind('beforeunload',function(){
binded8027 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code8027 = newCode;
$("textarea#stepcodeTextarea8027").val(newCode);
if(alreadyWriteCode8027!=code8027){
lastModifedTime8027 = new Date().getTime();
$("#rendering8027").show();
$("#rendered8027").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor8027 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor8027.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv8027").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
