vue-component组件

一、Component 组件

组件(Component)是自定义封装的功能。在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的页面之间,也存在同样的功能。将相同的功能进行抽取,封装为组件,这样,前端人员就可以在组件化开发时,只需要书写一次代码,随处引入即可使用。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象 为一个组件树。

vue-component组件_第1张图片

二、全局组件

1、语法格式

Vue.component("组件名称", {
    template: "html代码",  // 组件的HTML结构代码
    data(){ //组件数据
        return {}
   },
    methods: {  // 组件的相关的js方法
        方法名(){
            // 逻辑代码
       }
   }
})

注意:

  1. 组件名以小写开头,采用短横线分割命名: 例如 hello-Word
  2. 组件中的data 必须是一个函数,注意与Vue实例中的data区分
  3. 在template模板中, 只能有一个根元素

2、代码演示

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <!-- 使用组件 -->
          <my-header></my-header>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        // 定义全局组件
        //组件的命名规则: 一般用短横线进行连接,左边是公司名 右边组件的作用名称
        Vue.component("my-header", {
          template: "

    {{title}}

    "
    , //template模板中 只能有一个根元素 //组件中的data是一个函数 data() { return { title: "测试标题", }; }, methods: { test() { alert("测试方法!"); }, }, }); var Vm = new Vue({ el: "#app", data: {}, methods: {}, }); </script> </html>
  2. 测试结果

vue-component组件_第2张图片

三、局部组件

1、语法格式

相比起全局组件,局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。 唯一不同就是:局部组件要写在Vue实例里面。

new Vue({
    el: "#app",
    components: {
        组件名: {
            // 组件结构
            template: "HTML代码",
            // data数据
            data() { return { msg:"xxxx" };},
       },
   },
});

2、代码演示

  1. 代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用组件 -->
      <test-component></test-component>
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var Vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      // 创建组件
      components: {
        "test-component": {
          template: "

{{msg}}

"
, data() { return { msg: "测试局部组件!", }; }, }, }, }); </script> </html>
注意: 创建局部组件,注意 components,注意末尾有 ‘s’,而全局组件是不用+ ‘s’ 的。这意味着,components 里可以创建多个组件。
  1. 测试结果

    vue-component组件_第3张图片

四、组件与模板分离

由于把html语言写在组件里面很不方便,也不太好看所以将它们分开写

  1. 代码

    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
     </head>
     <body>
       <div id="app">
         <!-- 使用组件 -->
         <test-component></test-component>
       </div>
    
       <!-- 将模板写在html中,给模板指定id -->
       <template id="tmp">
         <div>
           <button @click="test">{{testmsg}}</button>
         </div>
       </template>
     </body>
    
     <script src="js/vue.min.js"></script>
     <script>
       var Vm = new Vue({
         el: "#app",
         data: {},
         methods: {},
         components: {
           "test-component": {
             template: "#tmp", //此处绑定上面写的template id
             data() {
               return {
                 testmsg: "测试消息~",
               };
             },
             methods: {
               test() {
                 alert("测试方法!");
               },
             },
           },
         },
       });
     </script>
    </html>
    
    • 浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
    • 在 html 中,template 标签一定要有一个id,因为通过 id 是最直接被选中的。data 和 methods 等参数,全部都要放到 Vue 实例里面写。
  2. 测试结果

    vue-component组件_第4张图片

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