Vue学习-组件的基本使用（局部组件）

目录

• 示例代码
• 1.创建组件（构造器对象创建-Vue.extend）
• 2.注册组件
• 3.使用组件
• 4.语法糖创建并注册组件
  • 示例代码：http://jsrun.net/kTvKp/edit
• 5.模板分离写法
  • 示例代码：http://jsrun.net/4TvKp/edit
  • 方法一：使用script标签
  • 方法二：使用template标签

示例代码

http://jsrun.net/H8vKp/edit

1.创建组件（构造器对象创建-Vue.extend）

const cpnC=Vue.extend({
      template:`
            <div>
                  <h2>我是标题</h2>  
                  <p>这里是内容</p>      
            </div>` 
})

ES6定义字符器用"`"定义的字符串，可以换行

2.注册组件

//这种是全局注册的，在多个vue实例中都可以使用
//Vue.component('my-cpn',cpnC);

//通过components局部注册组件
const app=new Vue({
         el:"#app",
         components:{
               myCpn:cpnC   //myCpn为标签名，在html使用时要转换为my-cpn命名法
            },
         data:{
            
            }
      }) 

3.使用组件

<div id="app">
    <my-cpn></my-cpn>
</div>

4.语法糖创建并注册组件

示例代码：http://jsrun.net/kTvKp/edit

//语法糖创建并注册组件（内部还是调用了Vue.extend函数）
Vue.component('my-cpn', {
 template: `
        <div>
            <h2>我是标题</h2>
            <p>这里是内容</p>
        </div> 
        `
}) //这种为全局注册组件


const app = new Vue({
    el: "#app",
    data: {
        message: "我是message"
    },
    components:{
        cnp1:{
            template:`
                <div>
                    <h1>局部注册</h1>
                    <p>这里是语法糖局部注册</p>
                </div>
            `
        }
    }
})

5.模板分离写法

示例代码：http://jsrun.net/4TvKp/edit

方法一：使用script标签

<script type="text/x-template" id="cpn">
	<div>
		<h2>我是标题</h2>
		<p>这里是内容</p>
	</div>
</script>

const cpnC = Vue.extend({
    template: "#cpn"
})

方法二：使用template标签

<template id="cpn1">
    <div>
		<h2>我是标题template</h2>
		<p>这里是内容</p>
	</div>
<template>

//注册组件
const cpnC = Vue.extend({
    template: "#cpn1"
})