})
var newVue = new Vue({
el:"#mac",
data:{
mydata:"春暖花开"
}
});
</script>
使用
<div id="mac" >
<input type="text" v-model="mydata" />
<mymac v-bind:message="mydata"></mymac>
</div>属性介绍：
<script type="text/template" id="script-component">为定义组件的一种写法，type还可以取的值还可以有： text/javascript: 说明这一段脚本语言是javascript。告诉浏览器这一段要按照javascript来解释执行。在ES5之前的type默认值
text/ecmascript:JavaScript和ECMAScript是相同的，只是在名称上是不同的。但是对于ecmascript-6而言就可以理解是JS的新语法特性。即HTML5中的默认值
application/ecmascript: ie6、7、8都是没法识别里面的js语句的
application/javascript: 这个属性在IE8以下的浏览器中无法被识别。
text/vbscript: 表示该脚本语言是vb脚本
品鉴
Script定义组件方式笔者觉得就是组件定义方式的另一种写法。优点在于不用写字符串式HTML代码。将<script id=”XX”>的XX赋值给局部组件或者全局组件都可。
4.<template>创建组件
定义方式示例：
<template id="cc">
<div >
<h1>{{message}}</h1>
</div></template>
<script>
Vue.component('templatec',{
props:["message"],
template:"#cc"
})
new Vue({
el:"#MyTemp"
})
</script>
使用
<div id="MyTemp">
<templatec message ="template组件之Template标签"></templatec>
</div>属性介绍：
<template> 为HTML5发布后用来声明是“模板元素”的标签。即HTML5之前使用
<script type ="text/template">方式声明，而HTML5之后可用<template> 标签品鉴
<template>定义组件的方式实际是HTML语法升级后的
<script type ="text/template">的另一种写法。同script定义组件一样，同样可以配合定义全局/局部组件。总结
通篇全文，介绍的四种方式。实际上只有两种方式。要不就是全局定义方式，要不就是局部定义方式。另外两种是为了增加代码开发效率将字符串写法换成标签式书写方式。
到此这篇关于Vuejs自定义组件的四种方式的文章就介绍到这了,更多相关vue 自定义组件内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
