注意：
script type=”text/javascript”标签是js下，而模板：template id=”upLoading”标签只能在html标签下，所以把模板做成js使用不了，只能写在当前HTML引用页面一起加载
注意2：
模板里的数据调用和绑定只能在template下data属性里设置和绑定，切勿在vue实例里使用。
简单的bug调试例子在最后
1、在当前html页面里放入template模板
<!DOCTYPE html>
<html>
<head>
<body>
......
<!-- UpLoading -->
<template id="upLoading">
<div >
<input v-show="show" id="fileSelect" name="fileSelect" @change="update" ref="inputer" type="file" multiple/>
</div>
</template>
</BODY>
2、Vue.component注册全局
注意该段代码必须写在vue初始化实例前面，
<script>
"use strict";
Vue.component('up-loading', { //不能有大写
template : '#upLoading',
props: {
drop: {
default: false,
},
value: { //前端传来的插槽值
type: Array,
default: Array,
},
},
data :function() { //写法不能改变
return{
show: true,
files:[],
}
},
watch: {
files:function () {
console.log("file changed");
}
},
methods: {
update: function () {
},
fileopen:function () {
},
filepost:function () {
},
//file列表删除
delfile:function (index) {
//this.files.remove(index);
}
}
});
</script>
//主Vue
<script>
new Vue({
el: '#app',
data :{
list:['item1','item1','item1','item1','item1','item1','item1','item1'],
num: 10,
refreshing: false,
trigger: this.$el
},
methods: {
}
})
</script>3、HTML里引用
<up-loading ref="ss"></up-loading>简单例子，用于调试bug使用
1、模板
<!-- UpLoading -->
<template id="tScroll">
<div>B custom component!</div>
</template>2、注册
<script>
// 注册
Vue.component('t-scroll', {
template : '#tScroll',
})
</script>3、页面使用
<t-scroll></t-scroll>
扫一扫
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
