vue import html模板,vue html template模板使用以及引用

简单的直接使用template:

new Vue({

el: '#app',

template: ``,

data:function() {

return {

value1: 0,

value2: 'a',

option1: [

{ text: '全部商品', value: 0 },

{ text: '新款商品', value: 1 },

{ text: '活动商品', value: 2 }

],

option2: [

{ text: '默认排序', value: 'a' },

{ text: '好评排序', value: 'b' },

{ text: '销量排序', value: 'c' },

]

}

}

});

在html页面中引用template:

参考：https://www.cnblogs.com/jiguiyan/p/10757984.html

任务名称

任务状态

{{item.name}}

{{item.bl}}

var vm = new Vue({

el: "#app",

components:{

"my-component-b":{

template:``,

data(){

return{

value1: 0,

value2: 'a',

option1: [

{ text: '全部商品', value: 0 },

{ text: '新款商品', value: 1 },

{ text: '活动商品', value: 2 }

],

option2: [

{ text: '默认排序', value: 'a' },

{ text: '好评排序', value: 'b' },

{ text: '销量排序', value: 'c' },

],

}

},

methods:{

refresh(value){

console.log(this.$parent.query(value));

console.log(value);

}

}

}

},

data: {

tableData: [],

currentPage: 1,

list: [],

loading: false,

finished: false,

},

methods: {

query(value){

console.log(value);

},

onLoad(){

this.list = [];

this.loading = false;

this.finished = true;

}

},

mounted: function () {

}

})