|
|
步骤
1
:
v-model 双向绑定
步骤
2
:
多种风格数据的绑定
步骤
3
:
修饰符
步骤
4
:
修饰符 .lazy
步骤
5
:
修饰符 .number
步骤
6
:
修饰符 .trim
前面的例子，都是把 Vue对象上的数据显示在视图上，那么如何把视图上的数据放到Vue对象上去呢？ 这时就需要用到v-model进行双向绑定 像这样，当input里面的值发生变化的时候，就会自动把变化后的值，绑定到Vue对象上去了
<input v-model="name" >
");
window.frames["iframe_show7803"].document.write(decodeHtml($("textarea#stepcodeTextarea7803").val()));
window.frames["iframe_show7803"].document.close();
$(window.frames["iframe_show7803"]).load(function(){
$("#iframe_show7803").height($("#iframe_show7803").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7803").height($("#iframe_show7803").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
hero name: <input v-model="name" >
<button @click="doClick" >提交数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"teemo"
},
methods:{
doClick:function(){
alert(this.name);
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<div id="div1">
hero name: <input v-model="name" >
<button @click="doClick" >提交数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"teemo"
},
methods:{
doClick:function(){
alert(this.name);
}
}
})
</script>
");
window.frames["iframe7803"].document.write(decodeHtml(code7803));
window.frames["iframe7803"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7803"]).load(function(){
$("#iframe7803").height($("#iframe7803").contents().find("body").height()+showittryitheight);
});
$("#iframe7803").height($("#iframe7803").contents().find("body").height()+showittryitheight);
alreadyWriteCode7803 = code7803;
$("#rendering7803").hide();
$("#rendered7803").show();
}
var tRereshRetry2DemoPanel7803 = setInterval(rereshRetry2DemoPanel7803,1000);
var binded7803 = false;
$("textarea#stepcodeTextarea7803").keyup(function(){
if(!binded7803){
$(window).bind('beforeunload',function(){
binded7803 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7803 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7803!=newCode){
// window.frames["iframe7803"].document.write("
");
// window.frames["iframe7803"].document.write(decodeHtml($("textarea#stepcodeTextarea7803").val()));
// window.frames["iframe7803"].document.close();
// $(window.frames["iframe7803"]).load(function(){
// $("#iframe7803").height($("#iframe7803").contents().find("body").height()+showittryitheight);
// });
// code7803 = newCode;
// }
});
$(".tryButton7803").click(function(){
$("#tryDiv7803").show();
$("#stepcodeTextarea7803").focus();
$("#stepcodeTextarea7803").height(200);
$("#iframe7803").height(0);
window.frames["iframe7803"].document.write("
");
window.frames["iframe7803"].document.write(decodeHtml($("textarea#stepcodeTextarea7803").val()));
window.frames["iframe7803"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7803"]).load(function(){
$("#iframe7803").height($("#iframe7803").contents().find("body").height()+showittryitheight);
});
$("#iframe7803").height($("#iframe7803").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7803.focus();
editor7803.setSize(null, "250");
$("#rendering7803").hide();
$("#rendered7803").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 editor7803 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7803"), {
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);
}
}
});
editor7803.on("change",function(doc){
if(!binded7803){
$(window).bind('beforeunload',function(){
binded7803 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7803 = newCode;
$("textarea#stepcodeTextarea7803").val(newCode);
if(alreadyWriteCode7803!=code7803){
lastModifedTime7803 = new Date().getTime();
$("#rendering7803").show();
$("#rendered7803").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7803 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7803.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7803").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show7804"].document.write(decodeHtml($("textarea#stepcodeTextarea7804").val()));
window.frames["iframe_show7804"].document.close();
$(window.frames["iframe_show7804"]).load(function(){
$("#iframe_show7804").height($("#iframe_show7804").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7804").height($("#iframe_show7804").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model="input" placeholder="输入数据">
</td>
<td>
<p>{{ input }}</p>
</td>
</tr>
<tr>
<td>
多行文本
</td>
<td>
<textarea v-model="textarea" placeholder="输入数据"></textarea>
</td>
<td>
<p>{{ textarea }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
<input type="checkbox" id="checkbox" v-model="checked">
</td>
<td>
<p>{{ checked }}</p>
</td>
</tr>
<tr>
<td>
多个复选框
</td>
<td>
<input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
<label for="teemo">teemo</label>
<input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
<label for="gareen">gareen</label>
<input type="checkbox" id="annie" value="annie" v-model="checkedes">
<label for="annie">annie</label>
</td>
<td>
<p>{{ checkedes }}</p>
</td>
</tr>
<tr>
<td>
单选按钮
</td>
<td>
<input type="radio" id="one" value="One" v-model="radio">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="radio">
<label for="two">Two</label>
</td>
<td>
<p>{{ radio }}</p>
</td>
</tr>
<tr>
<td>
单选选择框
</td>
<td>
<select v-model="selected" size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selected }}</p>
</td>
</tr>
<tr>
<td>
多选选择框
</td>
<td>
(通过ctrl或者shift进行多选)<br>
<select v-model="selecteds" multiple size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selecteds }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
默认值是true或者false,也可以修改为自定义的值<br>
<input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
</td>
<td>
<p>{{ toggle }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
textarea:'',
checked:'',
checkedes:[],
radio:'',
selected:'',
selecteds:[],
toggle:'',
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model="input" placeholder="输入数据">
</td>
<td>
<p>{{ input }}</p>
</td>
</tr>
<tr>
<td>
多行文本
</td>
<td>
<textarea v-model="textarea" placeholder="输入数据"></textarea>
</td>
<td>
<p>{{ textarea }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
<input type="checkbox" id="checkbox" v-model="checked">
</td>
<td>
<p>{{ checked }}</p>
</td>
</tr>
<tr>
<td>
多个复选框
</td>
<td>
<input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
<label for="teemo">teemo</label>
<input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
<label for="gareen">gareen</label>
<input type="checkbox" id="annie" value="annie" v-model="checkedes">
<label for="annie">annie</label>
</td>
<td>
<p>{{ checkedes }}</p>
</td>
</tr>
<tr>
<td>
单选按钮
</td>
<td>
<input type="radio" id="one" value="One" v-model="radio">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="radio">
<label for="two">Two</label>
</td>
<td>
<p>{{ radio }}</p>
</td>
</tr>
<tr>
<td>
单选选择框
</td>
<td>
<select v-model="selected" size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selected }}</p>
</td>
</tr>
<tr>
<td>
多选选择框
</td>
<td>
(通过ctrl或者shift进行多选)<br>
<select v-model="selecteds" multiple size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selecteds }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
默认值是true或者false,也可以修改为自定义的值<br>
<input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
</td>
<td>
<p>{{ toggle }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
textarea:'',
checked:'',
checkedes:[],
radio:'',
selected:'',
selecteds:[],
toggle:'',
}
})
</script>
");
window.frames["iframe7804"].document.write(decodeHtml(code7804));
window.frames["iframe7804"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7804"]).load(function(){
$("#iframe7804").height($("#iframe7804").contents().find("body").height()+showittryitheight);
});
$("#iframe7804").height($("#iframe7804").contents().find("body").height()+showittryitheight);
alreadyWriteCode7804 = code7804;
$("#rendering7804").hide();
$("#rendered7804").show();
}
var tRereshRetry2DemoPanel7804 = setInterval(rereshRetry2DemoPanel7804,1000);
var binded7804 = false;
$("textarea#stepcodeTextarea7804").keyup(function(){
if(!binded7804){
$(window).bind('beforeunload',function(){
binded7804 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7804 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7804!=newCode){
// window.frames["iframe7804"].document.write("
");
// window.frames["iframe7804"].document.write(decodeHtml($("textarea#stepcodeTextarea7804").val()));
// window.frames["iframe7804"].document.close();
// $(window.frames["iframe7804"]).load(function(){
// $("#iframe7804").height($("#iframe7804").contents().find("body").height()+showittryitheight);
// });
// code7804 = newCode;
// }
});
$(".tryButton7804").click(function(){
$("#tryDiv7804").show();
$("#stepcodeTextarea7804").focus();
$("#stepcodeTextarea7804").height(200);
$("#iframe7804").height(0);
window.frames["iframe7804"].document.write("
");
window.frames["iframe7804"].document.write(decodeHtml($("textarea#stepcodeTextarea7804").val()));
window.frames["iframe7804"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7804"]).load(function(){
$("#iframe7804").height($("#iframe7804").contents().find("body").height()+showittryitheight);
});
$("#iframe7804").height($("#iframe7804").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7804.focus();
editor7804.setSize(null, "250");
$("#rendering7804").hide();
$("#rendered7804").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 editor7804 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7804"), {
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);
}
}
});
editor7804.on("change",function(doc){
if(!binded7804){
$(window).bind('beforeunload',function(){
binded7804 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7804 = newCode;
$("textarea#stepcodeTextarea7804").val(newCode);
if(alreadyWriteCode7804!=code7804){
lastModifedTime7804 = new Date().getTime();
$("#rendering7804").show();
$("#rendered7804").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7804 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7804.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7804").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
vue.js 还提供了一些修饰符方便用户操作，常见的有
.lazy
.number
.trim
接下来一一举例说明
对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。
但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
");
window.frames["iframe_show7806"].document.write(decodeHtml($("textarea#stepcodeTextarea7806").val()));
window.frames["iframe_show7806"].document.close();
$(window.frames["iframe_show7806"]).load(function(){
$("#iframe_show7806").height($("#iframe_show7806").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7806").height($("#iframe_show7806").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本1
</td>
<td>
<input v-model.lazy="input1" placeholder="输入数据">
</td>
<td>
<p>{{ input1 }}</p>
</td>
</tr>
<tr>
<td>
单行文本2
</td>
<td>
<input v-model.lazy="input2" placeholder="输入数据">
</td>
<td>
<p>{{ input2 }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input1:'',
input2:''
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本1
</td>
<td>
<input v-model.lazy="input1" placeholder="输入数据">
</td>
<td>
<p>{{ input1 }}</p>
</td>
</tr>
<tr>
<td>
单行文本2
</td>
<td>
<input v-model.lazy="input2" placeholder="输入数据">
</td>
<td>
<p>{{ input2 }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input1:'',
input2:''
}
})
</script>
");
window.frames["iframe7806"].document.write(decodeHtml(code7806));
window.frames["iframe7806"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7806"]).load(function(){
$("#iframe7806").height($("#iframe7806").contents().find("body").height()+showittryitheight);
});
$("#iframe7806").height($("#iframe7806").contents().find("body").height()+showittryitheight);
alreadyWriteCode7806 = code7806;
$("#rendering7806").hide();
$("#rendered7806").show();
}
var tRereshRetry2DemoPanel7806 = setInterval(rereshRetry2DemoPanel7806,1000);
var binded7806 = false;
$("textarea#stepcodeTextarea7806").keyup(function(){
if(!binded7806){
$(window).bind('beforeunload',function(){
binded7806 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7806 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7806!=newCode){
// window.frames["iframe7806"].document.write("
");
// window.frames["iframe7806"].document.write(decodeHtml($("textarea#stepcodeTextarea7806").val()));
// window.frames["iframe7806"].document.close();
// $(window.frames["iframe7806"]).load(function(){
// $("#iframe7806").height($("#iframe7806").contents().find("body").height()+showittryitheight);
// });
// code7806 = newCode;
// }
});
$(".tryButton7806").click(function(){
$("#tryDiv7806").show();
$("#stepcodeTextarea7806").focus();
$("#stepcodeTextarea7806").height(200);
$("#iframe7806").height(0);
window.frames["iframe7806"].document.write("
");
window.frames["iframe7806"].document.write(decodeHtml($("textarea#stepcodeTextarea7806").val()));
window.frames["iframe7806"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7806"]).load(function(){
$("#iframe7806").height($("#iframe7806").contents().find("body").height()+showittryitheight);
});
$("#iframe7806").height($("#iframe7806").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7806.focus();
editor7806.setSize(null, "250");
$("#rendering7806").hide();
$("#rendered7806").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 editor7806 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7806"), {
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);
}
}
});
editor7806.on("change",function(doc){
if(!binded7806){
$(window).bind('beforeunload',function(){
binded7806 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7806 = newCode;
$("textarea#stepcodeTextarea7806").val(newCode);
if(alreadyWriteCode7806!=code7806){
lastModifedTime7806 = new Date().getTime();
$("#rendering7806").show();
$("#rendered7806").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7806 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7806.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7806").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
有时候，拿到了数据需要进行数学运算， 为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型了。
");
window.frames["iframe_show7807"].document.write(decodeHtml($("textarea#stepcodeTextarea7807").val()));
window.frames["iframe_show7807"].document.close();
$(window.frames["iframe_show7807"]).load(function(){
$("#iframe_show7807").height($("#iframe_show7807").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7807").height($("#iframe_show7807").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
<td>数值类型</td>
</tr>
<tr>
<td>
单行文本1
</td>
<td>
<input v-model="input1" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input1 }}</p>
</td>
<td>
<p>{{ typeof input1 }}</p>
</td>
</tr>
<tr>
<td>
单行文本2
</td>
<td>
<input v-model.number="input2" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input2 }}</p>
</td>
<td>
<p>{{ typeof input2 }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input1:'',
input2:''
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
<td>数值类型</td>
</tr>
<tr>
<td>
单行文本1
</td>
<td>
<input v-model="input1" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input1 }}</p>
</td>
<td>
<p>{{ typeof input1 }}</p>
</td>
</tr>
<tr>
<td>
单行文本2
</td>
<td>
<input v-model.number="input2" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input2 }}</p>
</td>
<td>
<p>{{ typeof input2 }}</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input1:'',
input2:''
}
})
</script>
");
window.frames["iframe7807"].document.write(decodeHtml(code7807));
window.frames["iframe7807"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7807"]).load(function(){
$("#iframe7807").height($("#iframe7807").contents().find("body").height()+showittryitheight);
});
$("#iframe7807").height($("#iframe7807").contents().find("body").height()+showittryitheight);
alreadyWriteCode7807 = code7807;
$("#rendering7807").hide();
$("#rendered7807").show();
}
var tRereshRetry2DemoPanel7807 = setInterval(rereshRetry2DemoPanel7807,1000);
var binded7807 = false;
$("textarea#stepcodeTextarea7807").keyup(function(){
if(!binded7807){
$(window).bind('beforeunload',function(){
binded7807 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7807 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7807!=newCode){
// window.frames["iframe7807"].document.write("
");
// window.frames["iframe7807"].document.write(decodeHtml($("textarea#stepcodeTextarea7807").val()));
// window.frames["iframe7807"].document.close();
// $(window.frames["iframe7807"]).load(function(){
// $("#iframe7807").height($("#iframe7807").contents().find("body").height()+showittryitheight);
// });
// code7807 = newCode;
// }
});
$(".tryButton7807").click(function(){
$("#tryDiv7807").show();
$("#stepcodeTextarea7807").focus();
$("#stepcodeTextarea7807").height(200);
$("#iframe7807").height(0);
window.frames["iframe7807"].document.write("
");
window.frames["iframe7807"].document.write(decodeHtml($("textarea#stepcodeTextarea7807").val()));
window.frames["iframe7807"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7807"]).load(function(){
$("#iframe7807").height($("#iframe7807").contents().find("body").height()+showittryitheight);
});
$("#iframe7807").height($("#iframe7807").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7807.focus();
editor7807.setSize(null, "250");
$("#rendering7807").hide();
$("#rendered7807").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 editor7807 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7807"), {
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);
}
}
});
editor7807.on("change",function(doc){
if(!binded7807){
$(window).bind('beforeunload',function(){
binded7807 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7807 = newCode;
$("textarea#stepcodeTextarea7807").val(newCode);
if(alreadyWriteCode7807!=code7807){
lastModifedTime7807 = new Date().getTime();
$("#rendering7807").show();
$("#rendered7807").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7807 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7807.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7807").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show7808"].document.write(decodeHtml($("textarea#stepcodeTextarea7808").val()));
window.frames["iframe_show7808"].document.close();
$(window.frames["iframe_show7808"]).load(function(){
$("#iframe_show7808").height($("#iframe_show7808").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7808").height($("#iframe_show7808").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model.trim="input" placeholder="输入数据">
</td>
<td>
<p>"{{ input }}"</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
input2:''
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model.trim="input" placeholder="输入数据">
</td>
<td>
<p>"{{ input }}"</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
input:'',
input2:''
}
})
</script>
");
window.frames["iframe7808"].document.write(decodeHtml(code7808));
window.frames["iframe7808"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7808"]).load(function(){
$("#iframe7808").height($("#iframe7808").contents().find("body").height()+showittryitheight);
});
$("#iframe7808").height($("#iframe7808").contents().find("body").height()+showittryitheight);
alreadyWriteCode7808 = code7808;
$("#rendering7808").hide();
$("#rendered7808").show();
}
var tRereshRetry2DemoPanel7808 = setInterval(rereshRetry2DemoPanel7808,1000);
var binded7808 = false;
$("textarea#stepcodeTextarea7808").keyup(function(){
if(!binded7808){
$(window).bind('beforeunload',function(){
binded7808 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7808 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7808!=newCode){
// window.frames["iframe7808"].document.write("
");
// window.frames["iframe7808"].document.write(decodeHtml($("textarea#stepcodeTextarea7808").val()));
// window.frames["iframe7808"].document.close();
// $(window.frames["iframe7808"]).load(function(){
// $("#iframe7808").height($("#iframe7808").contents().find("body").height()+showittryitheight);
// });
// code7808 = newCode;
// }
});
$(".tryButton7808").click(function(){
$("#tryDiv7808").show();
$("#stepcodeTextarea7808").focus();
$("#stepcodeTextarea7808").height(200);
$("#iframe7808").height(0);
window.frames["iframe7808"].document.write("
");
window.frames["iframe7808"].document.write(decodeHtml($("textarea#stepcodeTextarea7808").val()));
window.frames["iframe7808"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7808"]).load(function(){
$("#iframe7808").height($("#iframe7808").contents().find("body").height()+showittryitheight);
});
$("#iframe7808").height($("#iframe7808").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7808.focus();
editor7808.setSize(null, "250");
$("#rendering7808").hide();
$("#rendered7808").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 editor7808 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7808"), {
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);
}
}
});
editor7808.on("change",function(doc){
if(!binded7808){
$(window).bind('beforeunload',function(){
binded7808 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7808 = newCode;
$("textarea#stepcodeTextarea7808").val(newCode);
if(alreadyWriteCode7808!=code7808){
lastModifedTime7808 = new Date().getTime();
$("#rendering7808").show();
$("#rendered7808").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7808 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7808.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7808").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
