VUE学习笔记（二）

最新推荐文章于 2023-02-28 09:46:29 发布

weixin_45154474

最新推荐文章于 2023-02-28 09:46:29 发布

阅读量125

点赞数

分类专栏： Vue 文章标签： vue.js html javascript es6

本文链接：https://blog.csdn.net/weixin_45154474/article/details/103927053

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件化开发（非CLI下）

步骤：

创建组件构造器
注册组件
使用组件

第一种方法

使用Vue.extend()创建组件：

const component = Vue.extend({
      template:`
        <div>
        <h2>第一个组件</h2>
        </div>
        `
    })

使用Vue.component()注册组件。

Vue.component('cpn',component)

使用组件。

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

第二种方法

先定义组件。
①在script中定义，type为：text/x-template：

<script type="text/x-template" id="cpn">
    <div>
      <h2>第一个组件</h2>
      <p>hahaha</p>
    </div>
</script>

②使用template标签：

<template id="cpn">
  <div>
    <h2>第一个组件</h2>
    <p>hahaha</p>
  </div>
</template>

注册组件。

Vue.component('cpn',{
      template:"#cpn"
    })

使用组件。

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

完整代码示例：

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <title>Component-test</title>
  </head>
  <body>
    <div id="app">
      <cnp></cnp>
      <cpn></cpn>
    </div>
    <template id="cpn">
      <div>
        <h2>{{title}}</h2>
        <p>hahaha</p>
      </div>
    </template>
  </body>
  <script src="../js/vue.js"></script>
  <script type="text/x-template" id="cnp">
    <div>
      <h2>第一个组件</h2>
      <p>hahaha</p>
    </div>
  </script>
  <script>
    /*
    组件不能访问Vue实例的数据
    组件中也可以有data，但是这个data必须是一个方法，返回的结果是一个对象
    Q:data为什么是一个函数？
    A：保证同一组件的不同组件实例的数据分离的
    */
    //2、注册组件
    Vue.component('cnp',{
      template:"#cnp"
    })
    Vue.component('cpn',{
      template:"#cpn",
      data(){
        return {
          title: '第二个组件'
        }
      }
    })
    const app = new Vue({
      el:'#app',
      data:{}
    })
  </script>
</html>

weixin_45154474

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记（二）

组件化开发（非CLI下）步骤：创建组件构造器注册组件使用组件第一种方法使用Vue.extend()创建组件：const component = Vue.extend({ template:` <div> <h2>第一个组件</h2> </div> ` ...
复制链接

扫一扫