【Web前端问题】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大就是这样设计的。。。

以上是 【Web前端问题】vue组件注册使用问题?求解 的全部内容, 来源链接: utcz.com/a/140207.html

回到顶部