mood
今天天气不错,就是风有点大不尽人意
注册组件的语法糖
正常写法是:先创建组件构造器,再注册组件。
//1.创建组件构造器
const cpn1 = Vue.extend( {
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容,哈哈哈哈</p>
</div>
`
})
//2.注册组件
Vue.component(" cpn1 ",cpn1)
采用语法糖可以省去extend,如
// const cpn1 = Vue.extend( )
Vue.component(" Cpn1 ",{
template: `
<div>
<h2>我是标题1</h2>
<p>我是内容,哈哈哈哈</p>
</div> `
})
不过依我看来并没有简单多少,老师说以后讲脚手架会有更简单的写法。
有两种把template分离出来的写法
1.使用scrip标签中的type="text/x-template" type的属性,再定义一个ID
通过template对ID的引用进行引入
<script type="text/x-template" id="cpn"><div>
<h2>我是标题</h2>
<p>我是内容,哈哈哈</p></div>
</script>
<script src="./js/vue.js"></script>
<script>
vue.component(' cpn', {
template: '#cpn'
})