004 vue组件

一：创建组件

1.第一种创建方式

　　主要有Vue.extend，Vue.component。

　　注释掉的代码是一步一步的推断，后面的代码是简化的代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

    <div id="app">

        <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->

        <mycom1></mycom1>

    </div>

    <script>

        // 1.1 使用 Vue.extend 来创建全局的Vue组件

        // var com1 = Vue.extend({

        //   template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构

        // })

        // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)

        // Vue.component('myCom1', com1)

        // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；

        // 如果不使用驼峰,则直接拿名称来使用即可;

        // Vue.component('mycom1', com1)

        // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的

        // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容

        Vue.component('mycom1', Vue.extend({

            template: '<h3>这是使用 Vue.extend 创建的组件</h3>'

        }))

        // 创建 Vue 实例，得到 ViewModel

        var vm = new Vue({

            el: '#app',

            data: {},

            methods: {}

        });

    </script>

</body>

</html>

　　效果：

2.方式二

　　不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 还是使用 标签形式,引入自己的组件 -->

    <mycom2></mycom2>

  </div>

  <script>

    // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素

    Vue.component('mycom2', {

      template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>'

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {}

    });

  </script>

</body>

</html>

3.方式三

　　这里包括全局的组件，也包括私有的组件

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <mycom3></mycom3>

    <!-- <login></login> -->

  </div>

  <div id="app2">

    <mycom3></mycom3>

    <login></login>

  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->

  <template id="tmpl">

    <div>

      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>

      <h4>好用,不错!</h4>

    </div>

  </template>

  <template id="tmpl2">

    <h1>这是私有的 login 组件</h1>

  </template>

  <script>

    Vue.component('mycom3', {

      template: '#tmpl'

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {}

    });

    var vm2 = new Vue({

      el: '#app2',

      data: {},

      methods: {},

      filters: {},

      directives: {},

      components: { // 定义实例内部私有组件的

        login: {

          template: '#tmpl2'

        }

      },

      beforeCreate() { },

      created() { },

      beforeMount() { },

      mounted() { },

      beforeUpdate() { },

      updated() { },

      beforeDestroy() { },

      destroyed() { }

    })

  </script>

</body>

</html>

4.组件中的data与方法

<div id="app">

    <mycom1></mycom1>

  </div>

  <script>

    // 1. 组件可以有自己的 data 数据

    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法

    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;

    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

    Vue.component('mycom1', {

      template: '<h1>这是全局组件 --- {{msg}}</h1>',

      data: function () {

        return {

          msg: '这是组件的中data定义的数据'

        }

      }

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {}

    });

  </script>

5.案例

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

     <counter></counter>

     <hr>

     <counter></counter>

     <hr>

     <counter></counter>

   </div>

   <template id="tmpl">

     <div>

       <input type="button" value="+1" @click="increment">

       <h3>{{count}}</h3>

     </div>

   </template>

   <script>

     var dataObj = { count: 0 }

     // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1

     Vue.component('counter', {

       template: '#tmpl',

       data: function () {

         // return dataObj

         return { count: 0 }

       },

       methods: {

         increment() {

           this.count++

         }

       }

     })

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 </html>

　　效果：

二：组件切换

1.方式1

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <a href="" @click.prevent="flag=true">登录</a>

    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>

    <register v-else="flag"></register>

  </div>

  <script>

    Vue.component('login', {

      template: '<h3>登录组件</h3>'

    })

    Vue.component('register', {

      template: '<h3>注册组件</h3>'

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        flag: false

      },

      methods: {}

    });

  </script>

</body>

</html>

2.方式二

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <a href="" @click.prevent="comName='login'">登录</a>

    <a href="" @click.prevent="comName='register'">注册</a>

    <!-- Vue提供了 component ,来展示对应名称的组件 -->

    <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->

    <component :is="comName"></component>

    <!-- 总结:当前学习了几个 Vue 提供的标签了??? -->

    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>

    // 组件名称是 字符串

    Vue.component('login', {

      template: '<h3>登录组件</h3>'

    })

    Vue.component('register', {

      template: '<h3>注册组件</h3>'

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称

      },

      methods: {}

    });

  </script>

</body>

</html>

3.使用mode切换

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <style>

    .v-enter,

    .v-leave-to {

      opacity: 0;

      transform: translateX(150px);

    }

    .v-enter-active,

    .v-leave-active {

      transition: all 0.5s ease;

    }

  </style>

</head>

<body>

  <div id="app">

    <a href="" @click.prevent="comName='login'">登录</a>

    <a href="" @click.prevent="comName='register'">注册</a>

    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->

    <transition mode="out-in">

      <component :is="comName"></component>

    </transition>

  </div>

  <script>

    // 组件名称是 字符串

    Vue.component('login', {

      template: '<h3>登录组件</h3>'

    })

    Vue.component('register', {

      template: '<h3>注册组件</h3>'

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称

      },

      methods: {}

    });

  </script>

</body>

</html>

三：父组件与子组件

1.父组件向子组件传值

　　通过属性绑定的方式

　　要在子组件上定义一下。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->

    <com1 v-bind:parentmsg="msg"></com1>

  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        msg: '123 啊-父组件中的数据'

      },

      methods: {},

      components: {

        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法

        com1: {

          data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；

            // data 上的数据，都是可读可写的；

            return {

              title: '123',

              content: 'qqq'

            }

          },

          template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',

          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的

          // props 中的数据，都是只读的，无法重新赋值

          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据

          directives: {},

          filters: {},

          components: {},

          methods: {

            change() {

              this.parentmsg = '被修改了'

            }

          }

        }

      }

    });

  </script>

</body>

</html>

2.父组件向子组件传方法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->

    <com2 @func="show"></com2>

  </div>

  <template id="tmpl">

    <div>

      <h1>这是 子组件</h1>

      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">

    </div>

  </template>

  <script>

    // 定义了一个字面量类型的 组件模板对象

    var com2 = {

      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构

      data() {

        return {

          sonmsg: { name: '小头儿子', age: 6 }

        }

      },

      methods: {

        myclick() {

          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？

          //  emit 英文原意： 是触发，调用、发射的意思

          // this.$emit('func123', 123, 456)

          this.$emit('func', this.sonmsg)

        }

      }

    }

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        datamsgFormSon: null

      },

      methods: {

        show(data) {

          // console.log('调用了父组件身上的 show 方法: --- ' + data)

          // console.log(data);

          this.datamsgFormSon = data

        }

      },

      components: {

        com2

        // com2: com2

      }

    });

  </script>

</body>

</html>

3.列表评论

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">

</head>

<body>

  <div id="app">

    <cmt-box @func="loadComments"></cmt-box>

    <ul class="list-group">

      <li class="list-group-item" v-for="item in list" :key="item.id">

        <span class="badge">评论人： {{ item.user }}</span>

        {{ item.content }}

      </li>

    </ul>

  </div>

  <template id="tmpl">

    <div>

      <div class="form-group">

        <label>评论人：</label>

        <input type="text" class="form-control" v-model="user">

      </div>

      <div class="form-group">

        <label>评论内容：</label>

        <textarea class="form-control" v-model="content"></textarea>

      </div>

      <div class="form-group">

        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">

      </div>

    </div>

  </template>

  <script>

    var commentBox = {

      data() {

        return {

          user: '',

          content: ''

        }

      },

      template: '#tmpl',

      methods: {

        postComment() { // 发表评论的方法

          // 分析：发表评论的业务逻辑

          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')

          // 2. 先组织出一个最新的评论数据对象

          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：

          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify

          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组

          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换

          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论

          var list = JSON.parse(localStorage.getItem('cmts') || '[]')

          list.unshift(comment)

          // 重新保存最新的 评论数据

          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????

          this.$emit('func')

        }

      }

    }

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        list: [

          { id: Date.now(), user: '李白', content: '天生我材必有用' },

          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },

          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }

        ]

      },

      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },

      created(){

        this.loadComments()

      },

      methods: {

        loadComments() { // 从本地的 localStorage 中，加载评论列表

          var list = JSON.parse(localStorage.getItem('cmts') || '[]')

          this.list = list

        }

      },

      components: {

        'cmt-box': commentBox

      }

    });

  </script>

</body>

</html>

004 vue组件的更多相关文章

vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件具备一下的几个要求 ...
vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scss v-on和v-for的基础应用源码下载一.搭建vue开发环境更换镜像到cnpmnpm ins ...
vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册通过Vue.comp ...
关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
Vue组件基础用法
前面的话组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

随机推荐

centos7 docker安装nginx
1.查询nginx最新镜像 docker search nginx 2.下载镜像 docker pull nginx 3.创建目录 mkdir -p /software/nginx/html mkdi ...
MySQL高可用架构应该考虑什么? 你认为应该如何设计？
一.MySQL高可用架构应该考虑什么? 对业务的了解,需要考虑业务对数据库一致性要求的敏感程度,切换过程中是否有事务会丢失对于基础设施的了解,需要了解基础设施的高可用的架构.例如单网线,单电源等情 ...
C 语言快速入门，21 个小项目足矣！「不走弯路就是捷径」
C 语言作为大学理工科专业的必修,是很多同学走进编程世界的第一课.那么怎样才能更好的入门 C 语言呢? 下面整理了 21 个 C 语言练手项目,从基础语法开始,逐步深入,通过一个个练手项目,让你轻松驰 ...
Python-tkinter开发学习笔记
目录课时一 kinter 介绍查询官方帮助:help(tkinter) 概念介绍最简单的界面实现简单的模块组件的摆放方式 pack()方式例子 gird() 方式例子 place方式例子课 ...
VMware15.5版本安装CentOS7
VMware15.5版本安装CentOS7 一.在VMware15.5中新建虚拟机 1.打开VMware,在首页面选择创建新的虚拟机. 2.新建虚拟机向导,选择典型配置.3.选择稍后安装操作系统.4. ...
Cloudera Manager 5.15.1忘记密码怎么破？
Cloudera Manager 5.15.1忘记密码怎么破? 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.登陆CM修改默认密码 1>.使用默认密码登陆CM界面 2&g ...
HTML&CSS基础-内联框架
HTML&CSS基础-内联框架作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...
python基础---python环境搭建windows版
Python3.7.1标准安装 1.官网下载官网地址:https://www.python.org/downloads/ 下载3.7.1 下载64/32bitwindows安装文件,下图x86-64 ...
微信程序开发之-WeixinJSBridge调用
微信的WeixinJSBridge还是很厉害的,虽然官方文档只公布了3个功能,但是还内置的很多功能没公布,但是存在.今天就好好和大家聊聊功能1------发送给好友代码如下: functi ...
test201909027 老Z
30+100+40=170.数据出锅*2,也是没谁了. 装饰快要到 Mope 的生日了,Mope 希望举行一场盛大的生日派对. 派对的准备工作中当然有装饰房间啦.Mope 的房间里有按从左到右的顺序 ...

004 vue组件

004 vue组件的更多相关文章

随机推荐

热门专题