|
|
步骤
1
:
组件是什么
步骤
2
:
局部组件
步骤
3
:
全局组件
步骤
4
:
参数
步骤
5
:
动态参数
步骤
6
:
自定义事件
步骤
7
:
遍历 json 数组
步骤
8
:
最开始效果步骤里的代码
如效果所示，每个产品展示，就是一个模板。 只用做一个模板，然后照着这个模板，传递不同的参数就可以看到不同的产品展示了。
这个模板，就是组件。
当前看到的这个效果比较复杂，接下来会由浅入深，慢慢地把这个效果做出来。
注： 点击产品，还可以增加销售数量。 虽然业务上不会真的增加销售数量，但是这里是演示组件也有自定义事件的效果。
");
window.frames["iframe_show7817"].document.write(decodeHtml($("textarea#stepcodeTextarea7817").val()));
window.frames["iframe_show7817"].document.close();
$(window.frames["iframe_show7817"]).load(function(){
$("#iframe_show7817").height($("#iframe_show7817").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7817").height($("#iframe_show7817").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSales">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSales">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
</script>
");
window.frames["iframe7817"].document.write(decodeHtml(code7817));
window.frames["iframe7817"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7817"]).load(function(){
$("#iframe7817").height($("#iframe7817").contents().find("body").height()+showittryitheight);
});
$("#iframe7817").height($("#iframe7817").contents().find("body").height()+showittryitheight);
alreadyWriteCode7817 = code7817;
$("#rendering7817").hide();
$("#rendered7817").show();
}
var tRereshRetry2DemoPanel7817 = setInterval(rereshRetry2DemoPanel7817,1000);
var binded7817 = false;
$("textarea#stepcodeTextarea7817").keyup(function(){
if(!binded7817){
$(window).bind('beforeunload',function(){
binded7817 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7817 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7817!=newCode){
// window.frames["iframe7817"].document.write("
");
// window.frames["iframe7817"].document.write(decodeHtml($("textarea#stepcodeTextarea7817").val()));
// window.frames["iframe7817"].document.close();
// $(window.frames["iframe7817"]).load(function(){
// $("#iframe7817").height($("#iframe7817").contents().find("body").height()+showittryitheight);
// });
// code7817 = newCode;
// }
});
$(".tryButton7817").click(function(){
$("#tryDiv7817").show();
$("#stepcodeTextarea7817").focus();
$("#stepcodeTextarea7817").height(200);
$("#iframe7817").height(0);
window.frames["iframe7817"].document.write("
");
window.frames["iframe7817"].document.write(decodeHtml($("textarea#stepcodeTextarea7817").val()));
window.frames["iframe7817"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7817"]).load(function(){
$("#iframe7817").height($("#iframe7817").contents().find("body").height()+showittryitheight);
});
$("#iframe7817").height($("#iframe7817").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7817.focus();
editor7817.setSize(null, "250");
$("#rendering7817").hide();
$("#rendered7817").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 editor7817 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7817"), {
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);
}
}
});
editor7817.on("change",function(doc){
if(!binded7817){
$(window).bind('beforeunload',function(){
binded7817 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7817 = newCode;
$("textarea#stepcodeTextarea7817").val(newCode);
if(alreadyWriteCode7817!=code7817){
lastModifedTime7817 = new Date().getTime();
$("#rendering7817").show();
$("#rendered7817").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7817 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7817.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7817").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
接下来就由浅入深地展开组件的学习。 先看最简单的局部组件。 在 Vue对象里增加 components： components:{ 'product':{ template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>' } 然后在视图里，通过如下方式就可以调用了 如果想重复使用，则多写几次就行了 <product></product> <product></product> <product></product>
");
window.frames["iframe_show7823"].document.write(decodeHtml($("textarea#stepcodeTextarea7823").val()));
window.frames["iframe_show7823"].document.close();
$(window.frames["iframe_show7823"]).load(function(){
$("#iframe_show7823").height($("#iframe_show7823").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7823").height($("#iframe_show7823").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
new Vue({
el: '#div1',
components:{
'product':{
template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
}
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
new Vue({
el: '#div1',
components:{
'product':{
template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
}
}
})
</script>
");
window.frames["iframe7823"].document.write(decodeHtml(code7823));
window.frames["iframe7823"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7823"]).load(function(){
$("#iframe7823").height($("#iframe7823").contents().find("body").height()+showittryitheight);
});
$("#iframe7823").height($("#iframe7823").contents().find("body").height()+showittryitheight);
alreadyWriteCode7823 = code7823;
$("#rendering7823").hide();
$("#rendered7823").show();
}
var tRereshRetry2DemoPanel7823 = setInterval(rereshRetry2DemoPanel7823,1000);
var binded7823 = false;
$("textarea#stepcodeTextarea7823").keyup(function(){
if(!binded7823){
$(window).bind('beforeunload',function(){
binded7823 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7823 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7823!=newCode){
// window.frames["iframe7823"].document.write("
");
// window.frames["iframe7823"].document.write(decodeHtml($("textarea#stepcodeTextarea7823").val()));
// window.frames["iframe7823"].document.close();
// $(window.frames["iframe7823"]).load(function(){
// $("#iframe7823").height($("#iframe7823").contents().find("body").height()+showittryitheight);
// });
// code7823 = newCode;
// }
});
$(".tryButton7823").click(function(){
$("#tryDiv7823").show();
$("#stepcodeTextarea7823").focus();
$("#stepcodeTextarea7823").height(200);
$("#iframe7823").height(0);
window.frames["iframe7823"].document.write("
");
window.frames["iframe7823"].document.write(decodeHtml($("textarea#stepcodeTextarea7823").val()));
window.frames["iframe7823"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7823"]).load(function(){
$("#iframe7823").height($("#iframe7823").contents().find("body").height()+showittryitheight);
});
$("#iframe7823").height($("#iframe7823").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7823.focus();
editor7823.setSize(null, "250");
$("#rendering7823").hide();
$("#rendered7823").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 editor7823 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7823"), {
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);
}
}
});
editor7823.on("change",function(doc){
if(!binded7823){
$(window).bind('beforeunload',function(){
binded7823 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7823 = newCode;
$("textarea#stepcodeTextarea7823").val(newCode);
if(alreadyWriteCode7823!=code7823){
lastModifedTime7823 = new Date().getTime();
$("#rendering7823").show();
$("#rendered7823").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7823 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7823.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7823").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
和vue.js 里的过滤器一样，有的组件会在不同页面使用，这个时候就可以考虑用全局组件。 Vue.component('product', { template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>' }) 写法其实跟局部差不多，只是提出来了。 这样到处都可以用了。
");
window.frames["iframe_show7818"].document.write(decodeHtml($("textarea#stepcodeTextarea7818").val()));
window.frames["iframe_show7818"].document.close();
$(window.frames["iframe_show7818"]).load(function(){
$("#iframe_show7818").height($("#iframe_show7818").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7818").height($("#iframe_show7818").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
Vue.component('product', {
template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
})
new Vue({
el: '#div1'
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product></product>
<product></product>
<product></product>
</div>
<script>
Vue.component('product', {
template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
})
new Vue({
el: '#div1'
})
</script>
");
window.frames["iframe7818"].document.write(decodeHtml(code7818));
window.frames["iframe7818"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7818"]).load(function(){
$("#iframe7818").height($("#iframe7818").contents().find("body").height()+showittryitheight);
});
$("#iframe7818").height($("#iframe7818").contents().find("body").height()+showittryitheight);
alreadyWriteCode7818 = code7818;
$("#rendering7818").hide();
$("#rendered7818").show();
}
var tRereshRetry2DemoPanel7818 = setInterval(rereshRetry2DemoPanel7818,1000);
var binded7818 = false;
$("textarea#stepcodeTextarea7818").keyup(function(){
if(!binded7818){
$(window).bind('beforeunload',function(){
binded7818 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7818 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7818!=newCode){
// window.frames["iframe7818"].document.write("
");
// window.frames["iframe7818"].document.write(decodeHtml($("textarea#stepcodeTextarea7818").val()));
// window.frames["iframe7818"].document.close();
// $(window.frames["iframe7818"]).load(function(){
// $("#iframe7818").height($("#iframe7818").contents().find("body").height()+showittryitheight);
// });
// code7818 = newCode;
// }
});
$(".tryButton7818").click(function(){
$("#tryDiv7818").show();
$("#stepcodeTextarea7818").focus();
$("#stepcodeTextarea7818").height(200);
$("#iframe7818").height(0);
window.frames["iframe7818"].document.write("
");
window.frames["iframe7818"].document.write(decodeHtml($("textarea#stepcodeTextarea7818").val()));
window.frames["iframe7818"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7818"]).load(function(){
$("#iframe7818").height($("#iframe7818").contents().find("body").height()+showittryitheight);
});
$("#iframe7818").height($("#iframe7818").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7818.focus();
editor7818.setSize(null, "250");
$("#rendering7818").hide();
$("#rendered7818").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 editor7818 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7818"), {
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);
}
}
});
editor7818.on("change",function(doc){
if(!binded7818){
$(window).bind('beforeunload',function(){
binded7818 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7818 = newCode;
$("textarea#stepcodeTextarea7818").val(newCode);
if(alreadyWriteCode7818!=code7818){
lastModifedTime7818 = new Date().getTime();
$("#rendering7818").show();
$("#rendered7818").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7818 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7818.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7818").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
像前面的例子，产品名称都是固定的，这样肯定不行，所以就要能够传递参数给组件。 设置参数name, 并且在组件里使用这个name: Vue.component('product', { props:['name'], template: '<div class="product" >{{name}}</div>' }) 调用的时候，就当作是一个自定义属性传进去就可以了 <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product> <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product> <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
");
window.frames["iframe_show7819"].document.write(decodeHtml($("textarea#stepcodeTextarea7819").val()));
window.frames["iframe_show7819"].document.close();
$(window.frames["iframe_show7819"]).load(function(){
$("#iframe_show7819").height($("#iframe_show7819").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7819").height($("#iframe_show7819").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el: '#div1'
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el: '#div1'
})
</script>
");
window.frames["iframe7819"].document.write(decodeHtml(code7819));
window.frames["iframe7819"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7819"]).load(function(){
$("#iframe7819").height($("#iframe7819").contents().find("body").height()+showittryitheight);
});
$("#iframe7819").height($("#iframe7819").contents().find("body").height()+showittryitheight);
alreadyWriteCode7819 = code7819;
$("#rendering7819").hide();
$("#rendered7819").show();
}
var tRereshRetry2DemoPanel7819 = setInterval(rereshRetry2DemoPanel7819,1000);
var binded7819 = false;
$("textarea#stepcodeTextarea7819").keyup(function(){
if(!binded7819){
$(window).bind('beforeunload',function(){
binded7819 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7819 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7819!=newCode){
// window.frames["iframe7819"].document.write("
");
// window.frames["iframe7819"].document.write(decodeHtml($("textarea#stepcodeTextarea7819").val()));
// window.frames["iframe7819"].document.close();
// $(window.frames["iframe7819"]).load(function(){
// $("#iframe7819").height($("#iframe7819").contents().find("body").height()+showittryitheight);
// });
// code7819 = newCode;
// }
});
$(".tryButton7819").click(function(){
$("#tryDiv7819").show();
$("#stepcodeTextarea7819").focus();
$("#stepcodeTextarea7819").height(200);
$("#iframe7819").height(0);
window.frames["iframe7819"].document.write("
");
window.frames["iframe7819"].document.write(decodeHtml($("textarea#stepcodeTextarea7819").val()));
window.frames["iframe7819"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7819"]).load(function(){
$("#iframe7819").height($("#iframe7819").contents().find("body").height()+showittryitheight);
});
$("#iframe7819").height($("#iframe7819").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7819.focus();
editor7819.setSize(null, "250");
$("#rendering7819").hide();
$("#rendered7819").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 editor7819 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7819"), {
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);
}
}
});
editor7819.on("change",function(doc){
if(!binded7819){
$(window).bind('beforeunload',function(){
binded7819 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7819 = newCode;
$("textarea#stepcodeTextarea7819").val(newCode);
if(alreadyWriteCode7819!=code7819){
lastModifedTime7819 = new Date().getTime();
$("#rendering7819").show();
$("#rendered7819").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7819 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7819.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7819").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
所谓的动态参数，就是指组件内的参数可以和组件外的值关联起来 如效果所示，在组件外的input输入数据，就可以传递到组件内了 关键是这一行，name表示组件内的属性name, outName就是组件外的 <product v-bind:name="outName"></product>
");
window.frames["iframe_show7820"].document.write(decodeHtml($("textarea#stepcodeTextarea7820").val()));
window.frames["iframe_show7820"].document.close();
$(window.frames["iframe_show7820"]).load(function(){
$("#iframe_show7820").height($("#iframe_show7820").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7820").height($("#iframe_show7820").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
组件外的值：<input v-model="outName" ><br>
<product v-bind:name="outName"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el: '#div1',
data:{
outName:'产品名称'
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
组件外的值：<input v-model="outName" ><br>
<product v-bind:name="outName"></product>
</div>
<script>
Vue.component('product', {
props:['name'],
template: '<div class="product" >{{name}}</div>'
})
new Vue({
el: '#div1',
data:{
outName:'产品名称'
}
})
</script>
");
window.frames["iframe7820"].document.write(decodeHtml(code7820));
window.frames["iframe7820"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7820"]).load(function(){
$("#iframe7820").height($("#iframe7820").contents().find("body").height()+showittryitheight);
});
$("#iframe7820").height($("#iframe7820").contents().find("body").height()+showittryitheight);
alreadyWriteCode7820 = code7820;
$("#rendering7820").hide();
$("#rendered7820").show();
}
var tRereshRetry2DemoPanel7820 = setInterval(rereshRetry2DemoPanel7820,1000);
var binded7820 = false;
$("textarea#stepcodeTextarea7820").keyup(function(){
if(!binded7820){
$(window).bind('beforeunload',function(){
binded7820 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7820 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7820!=newCode){
// window.frames["iframe7820"].document.write("
");
// window.frames["iframe7820"].document.write(decodeHtml($("textarea#stepcodeTextarea7820").val()));
// window.frames["iframe7820"].document.close();
// $(window.frames["iframe7820"]).load(function(){
// $("#iframe7820").height($("#iframe7820").contents().find("body").height()+showittryitheight);
// });
// code7820 = newCode;
// }
});
$(".tryButton7820").click(function(){
$("#tryDiv7820").show();
$("#stepcodeTextarea7820").focus();
$("#stepcodeTextarea7820").height(200);
$("#iframe7820").height(0);
window.frames["iframe7820"].document.write("
");
window.frames["iframe7820"].document.write(decodeHtml($("textarea#stepcodeTextarea7820").val()));
window.frames["iframe7820"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7820"]).load(function(){
$("#iframe7820").height($("#iframe7820").contents().find("body").height()+showittryitheight);
});
$("#iframe7820").height($("#iframe7820").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7820.focus();
editor7820.setSize(null, "250");
$("#rendering7820").hide();
$("#rendered7820").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 editor7820 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7820"), {
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);
}
}
});
editor7820.on("change",function(doc){
if(!binded7820){
$(window).bind('beforeunload',function(){
binded7820 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7820 = newCode;
$("textarea#stepcodeTextarea7820").val(newCode);
if(alreadyWriteCode7820!=code7820){
lastModifedTime7820 = new Date().getTime();
$("#rendering7820").show();
$("#rendered7820").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7820 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7820.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7820").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
增加自定义事件和在一个Vue对象上增加 methods 是一样的做法 先来个methods:
methods:{
increaseSale:function(){
this.sale++
}
}
然后在组件里：
v-on:click="increaseSale"
注，这里是在组件上增加的，而不是在视图上增加的。 测试： 点击产品，就会增销量
");
window.frames["iframe_show7821"].document.write(decodeHtml($("textarea#stepcodeTextarea7821").val()));
window.frames["iframe_show7821"].document.close();
$(window.frames["iframe_show7821"]).load(function(){
$("#iframe_show7821").height($("#iframe_show7821").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7821").height($("#iframe_show7821").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>
<script>
Vue.component('product', {
props:['name','sale'],
template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
methods:{
increaseSale:function(){
this.sale++
}
}
})
new Vue({
el: '#div1'
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>
<product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包" sale="20" ></product>
<product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮" sale="30" ></product>
</div>
<script>
Vue.component('product', {
props:['name','sale'],
template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
methods:{
increaseSale:function(){
this.sale++
}
}
})
new Vue({
el: '#div1'
})
</script>
");
window.frames["iframe7821"].document.write(decodeHtml(code7821));
window.frames["iframe7821"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7821"]).load(function(){
$("#iframe7821").height($("#iframe7821").contents().find("body").height()+showittryitheight);
});
$("#iframe7821").height($("#iframe7821").contents().find("body").height()+showittryitheight);
alreadyWriteCode7821 = code7821;
$("#rendering7821").hide();
$("#rendered7821").show();
}
var tRereshRetry2DemoPanel7821 = setInterval(rereshRetry2DemoPanel7821,1000);
var binded7821 = false;
$("textarea#stepcodeTextarea7821").keyup(function(){
if(!binded7821){
$(window).bind('beforeunload',function(){
binded7821 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7821 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7821!=newCode){
// window.frames["iframe7821"].document.write("
");
// window.frames["iframe7821"].document.write(decodeHtml($("textarea#stepcodeTextarea7821").val()));
// window.frames["iframe7821"].document.close();
// $(window.frames["iframe7821"]).load(function(){
// $("#iframe7821").height($("#iframe7821").contents().find("body").height()+showittryitheight);
// });
// code7821 = newCode;
// }
});
$(".tryButton7821").click(function(){
$("#tryDiv7821").show();
$("#stepcodeTextarea7821").focus();
$("#stepcodeTextarea7821").height(200);
$("#iframe7821").height(0);
window.frames["iframe7821"].document.write("
");
window.frames["iframe7821"].document.write(decodeHtml($("textarea#stepcodeTextarea7821").val()));
window.frames["iframe7821"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7821"]).load(function(){
$("#iframe7821").height($("#iframe7821").contents().find("body").height()+showittryitheight);
});
$("#iframe7821").height($("#iframe7821").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7821.focus();
editor7821.setSize(null, "250");
$("#rendering7821").hide();
$("#rendered7821").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 editor7821 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7821"), {
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);
}
}
});
editor7821.on("change",function(doc){
if(!binded7821){
$(window).bind('beforeunload',function(){
binded7821 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7821 = newCode;
$("textarea#stepcodeTextarea7821").val(newCode);
if(alreadyWriteCode7821!=code7821){
lastModifedTime7821 = new Date().getTime();
$("#rendering7821").show();
$("#rendered7821").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7821 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7821.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7821").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
大部分时候是拿到一个 json 数组，然后遍历这个 json 数组为多个组件实例。 1. 首先准备产品数组
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
]
2. 然后在视图里通过 v-for 遍历 products <product v-for="item in products" v-bind:product="item"></product> 3. 接着修改组件，让接受的参数为 v-bind:product 里的这个 product，显示和方法里也通过 product.xxx 来调用。 Vue.component('product', { props:['product'], template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>', methods:{ increaseSale:function(){ this.product.sale++ } } })
");
window.frames["iframe_show7824"].document.write(decodeHtml($("textarea#stepcodeTextarea7824").val()));
window.frames["iframe_show7824"].document.close();
$(window.frames["iframe_show7824"]).load(function(){
$("#iframe_show7824").height($("#iframe_show7824").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7824").height($("#iframe_show7824").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
Vue.component('product', {
props:['product'],
template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
methods:{
increaseSale:function(){
this.product.sale++
}
}
})
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
]
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
</style>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
Vue.component('product', {
props:['product'],
template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
methods:{
increaseSale:function(){
this.product.sale++
}
}
})
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
]
}
})
</script>
");
window.frames["iframe7824"].document.write(decodeHtml(code7824));
window.frames["iframe7824"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7824"]).load(function(){
$("#iframe7824").height($("#iframe7824").contents().find("body").height()+showittryitheight);
});
$("#iframe7824").height($("#iframe7824").contents().find("body").height()+showittryitheight);
alreadyWriteCode7824 = code7824;
$("#rendering7824").hide();
$("#rendered7824").show();
}
var tRereshRetry2DemoPanel7824 = setInterval(rereshRetry2DemoPanel7824,1000);
var binded7824 = false;
$("textarea#stepcodeTextarea7824").keyup(function(){
if(!binded7824){
$(window).bind('beforeunload',function(){
binded7824 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7824 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7824!=newCode){
// window.frames["iframe7824"].document.write("
");
// window.frames["iframe7824"].document.write(decodeHtml($("textarea#stepcodeTextarea7824").val()));
// window.frames["iframe7824"].document.close();
// $(window.frames["iframe7824"]).load(function(){
// $("#iframe7824").height($("#iframe7824").contents().find("body").height()+showittryitheight);
// });
// code7824 = newCode;
// }
});
$(".tryButton7824").click(function(){
$("#tryDiv7824").show();
$("#stepcodeTextarea7824").focus();
$("#stepcodeTextarea7824").height(200);
$("#iframe7824").height(0);
window.frames["iframe7824"].document.write("
");
window.frames["iframe7824"].document.write(decodeHtml($("textarea#stepcodeTextarea7824").val()));
window.frames["iframe7824"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7824"]).load(function(){
$("#iframe7824").height($("#iframe7824").contents().find("body").height()+showittryitheight);
});
$("#iframe7824").height($("#iframe7824").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7824.focus();
editor7824.setSize(null, "250");
$("#rendering7824").hide();
$("#rendered7824").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 editor7824 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7824"), {
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);
}
}
});
editor7824.on("change",function(doc){
if(!binded7824){
$(window).bind('beforeunload',function(){
binded7824 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7824 = newCode;
$("textarea#stepcodeTextarea7824").val(newCode);
if(alreadyWriteCode7824!=code7824){
lastModifedTime7824 = new Date().getTime();
$("#rendering7824").show();
$("#rendered7824").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7824 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7824.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7824").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
最开始效果步骤里的代码其实就是在前面的基础上，增加了一些样式，增加了一些字段而已。 另外 template 部分因为比较复杂，就不好写在一个 单引号 ' ' 里维护起来，所以就直接写在html里，然后通过html dom 获取出来，这样编写起来略微容易一点。
var tempalateDiv=document.getElementById("tempalate").innerHTML;
其他的就没有什么新东西啦
");
window.frames["iframe_show7822"].document.write(decodeHtml($("textarea#stepcodeTextarea7822").val()));
window.frames["iframe_show7822"].document.close();
$(window.frames["iframe_show7822"]).load(function(){
$("#iframe_show7822").height($("#iframe_show7822").contents().find("body").height()+showittryitheight);
});
$("#iframe_show7822").height($("#iframe_show7822").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSales">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
</script>
<script src="http://127.0.0.1/study/vue.min.js"></script>
<style>
div.product{
float:left;
border:1px solid lightGray;
width:200px;
margin:10px;
cursor: pointer;
}
div.product:hover{
border:1px solid #c40000;
}
div.price{
color:#c40000;
font-weight:bold;
font-size:1.2em;
margin:10px;
}
div.productName{
color:gray;
font-size:0.8em;
margin:10px;
}
div.sale{
float:left;
width:100px;
border:1px solid lightgray;
border-width:1px 0px 0px 0px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
div.review{
overflow:hidden;
border:1px solid lightgray;
border-width:1px 0px 0px 1px;
color:gray;
font-size:0.8em;
padding-left:10px;
}
</style>
<div id="tempalate" style="display:none">
<div class="product" v-on:click="increaseSales">
<div class="price">
¥ {{product.price}}
</div>
<div class="productName">
{{product.name}}
</div>
<div class="sale"> 月成交 {{product.sale}} 笔</div>
<div class="review"> 评价 {{product.review}} </div>
</div>
</div>
<div id="div1">
<product v-for="item in products" v-bind:product="item"></product>
</div>
<script>
var tempalateDiv=document.getElementById("tempalate").innerHTML;
var templateObject = {
props: ['product'],
template: tempalateDiv,
methods: {
increaseSales: function () {
this.product.sale = parseInt(this.product.sale);
this.product.sale += 1
this.$emit('increment')
}
}
}
Vue.component('product', templateObject)
new Vue({
el: '#div1',
data:{
products:[
{"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","price":"889","sale":"18","review":"5"},
{"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","price":"322","sale":"35","review":"12"},
{"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","price":"523","sale":"29","review":"3"},
]
}
})
</script>
");
window.frames["iframe7822"].document.write(decodeHtml(code7822));
window.frames["iframe7822"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7822"]).load(function(){
$("#iframe7822").height($("#iframe7822").contents().find("body").height()+showittryitheight);
});
$("#iframe7822").height($("#iframe7822").contents().find("body").height()+showittryitheight);
alreadyWriteCode7822 = code7822;
$("#rendering7822").hide();
$("#rendered7822").show();
}
var tRereshRetry2DemoPanel7822 = setInterval(rereshRetry2DemoPanel7822,1000);
var binded7822 = false;
$("textarea#stepcodeTextarea7822").keyup(function(){
if(!binded7822){
$(window).bind('beforeunload',function(){
binded7822 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code7822 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code7822!=newCode){
// window.frames["iframe7822"].document.write("
");
// window.frames["iframe7822"].document.write(decodeHtml($("textarea#stepcodeTextarea7822").val()));
// window.frames["iframe7822"].document.close();
// $(window.frames["iframe7822"]).load(function(){
// $("#iframe7822").height($("#iframe7822").contents().find("body").height()+showittryitheight);
// });
// code7822 = newCode;
// }
});
$(".tryButton7822").click(function(){
$("#tryDiv7822").show();
$("#stepcodeTextarea7822").focus();
$("#stepcodeTextarea7822").height(200);
$("#iframe7822").height(0);
window.frames["iframe7822"].document.write("
");
window.frames["iframe7822"].document.write(decodeHtml($("textarea#stepcodeTextarea7822").val()));
window.frames["iframe7822"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe7822"]).load(function(){
$("#iframe7822").height($("#iframe7822").contents().find("body").height()+showittryitheight);
});
$("#iframe7822").height($("#iframe7822").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor7822.focus();
editor7822.setSize(null, "250");
$("#rendering7822").hide();
$("#rendered7822").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 editor7822 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea7822"), {
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);
}
}
});
editor7822.on("change",function(doc){
if(!binded7822){
$(window).bind('beforeunload',function(){
binded7822 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code7822 = newCode;
$("textarea#stepcodeTextarea7822").val(newCode);
if(alreadyWriteCode7822!=code7822){
lastModifedTime7822 = new Date().getTime();
$("#rendering7822").show();
$("#rendered7822").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor7822 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor7822.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv7822").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
