Vue.js- 组件化开发

Vue组件化开发

组件的使用分成三部分:

  • 1.创建组件构造器
  • 2.注册组件
  • 3.使用组件
    开始写我的第一个组件
<body>
  <div id="app">
    <!--3.使用组件,组件名称,必须小写-->
    <my-cpn></my-cpn>
  </div>
</body>
<script src="../vue.js"></script>
<script>
  //ES6可以使用``来代替单引号,它是模板字符串,可以换行,表示一个字符串,
  //如`abc` 
  //1.创建组件构造器对象
  const cpn = Vue.extend({
    template: `
    

我是组件

`
}) //2. 注册全局组件,该组件可以在多个Vue对象实例下使用 Vue.component("my-cpn",cpn); //2.注册局部组件,开发时,使用最多的时局部组件 const app = new Vue({ el: '#app', components:{ my-cpn:cpn } }) </script>

父组件和子组件

父组件和子组件的创建,组件和组件之间存在层级关系,

<body>
  <div id="app">
    <cpn2></cpn2>
  </div>
</body>
<script src="../vue.js"></script>
<script>
  //创建子组件
  const cpn1=Vue.extend({
    template:`
     
我是子组件
`
}) //创建父组件 const cpn2 = Vue.extend({ template:`
我是父组件
`
, components:{ cpn1:cpn1 } }) const app = new Vue({ el:'#app', components:{ cpn2:cpn2 } }) </script>

组件的语法糖注册方式

  • 全局组件注册===>语法糖
Vue.component('cpn1',{
    template:`
我是语法糖创建的全局组件
`
, components:{ } })
  • 局部组件注册==>语法糖
const app = new Vue({
	el:'#app',
	components:{
		'cpn1':{
			template:`
我是语法糖创建的局部组件
`
} } })

组件模板抽离

  • 使用

你可能感兴趣的:(vue,vue.js)