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 () {


    }
})