javascript - vue组件注册使用问题？求解

问题描述

问 题

使用vue组件的时候，我尝试用2中写法去写，写法如下，第一种方法显示正常，但是为什么用第二种写法的父元素却未显示？求大神解答

html代码

<ul class="part" id="part">
    <my-list></my-list>
    <my-list></my-list>
    <my-list></my-list>
    <my-list></my-list>
</ul>

第一种

var partList = Vue.extend({
         template: '<li><a href="details.html" class="title">javascript</a><p class="details"><i class="fa fa-tag eye">&nbsp;Languary</i><i class="fa fa-eye eye">&nbsp;26</i><span>2016年12月5日</span></p><p class="text">最近做一个嵌在APP中的网页活动，接触到好些新技术（支付宝WAP支付场景，微信WAP支付场景、二维码支付场景，网页唤醒APP）。前面的那位同学，你说什么，你都会啊，那是我项目经验少咯 :）今天刚把网页唤醒APP的功能做好，就来写一写</p></li>',
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          }
    })
    Vue.component("my-list",partList)
    var list = new Vue({
                el: '#part'

            });

效果图

调试栏

显示正常，ul标签存在

第二种

var list = new Vue({
    el: '#part',
    template: "<my-list></my-list>", 
    components: { 
        "my-list": { 
         template: '<li><a href="details.html" class="title">javascript</a><p class="details"><i class="fa fa-tag eye">&nbsp;Languary</i><i class="fa fa-eye eye">&nbsp;26</i><span>2016年12月5日</span></p><p class="text">最近做一个嵌在APP中的网页活动，接触到好些新技术（支付宝WAP支付场景，微信WAP支付场景、二维码支付场景，网页唤醒APP）。前面的那位同学，你说什么，你都会啊，那是我项目经验少咯 :）今天刚把网页唤醒APP的功能做好，就来写一写</p></li>'
                } 
            });

效果图

调试栏

显示错误，ul标签不存在

解决方案

这一点确实比较奇怪 -- new Vue({el: '#app'}) 等价于 new Vue({}).$mount('#app')，而文档中提到：

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

注意：替换！所以在你的第二个例子中，ul#part 其实被替换成了 <my-list> 也就是一个 <li>.

而为啥第一个例子正常运行呢？因为第一个例子中你没有指定template，所以ul#part的HTML会被当作模版，而此时ul#part会被保留。如果你非要问为什么会被保留，只能说u大就是这样设计的。。。

这篇关于javascript - vue组件注册使用问题？求解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！