组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。 开始使用 注意！！！ 方法后面第一个值是标签名，第二个是一个对象，里面定义的是data属性，这里的data属性不可以和Vue实例一样是对象，必须是函数，用return返回值，如果是对象会直接报错。 组件标签名命名方式有两种： 1.驼峰命名：列 ：ButtonCounter, 尽量使用驼峰命名，但是渲染时要注意用短横线渲染，不要用驼峰，代码如下： 2.短横线名命：列 ：button-counter 组件模板的方法有两种： 1.默认方法 ：直接用双引号包裹起来 2.模板字符串方法 ：直接用反引号包裹起来（ES6的语法），可读性比较强，比较直观，简洁。 注意： 在组件里可以定义方法methods，我这边定义了一个点击事件的方法，让他每次点击都加 1 注意：methods是定义在组件方法里，不是定义在Vue实例中 渲染到页面：直接把定义好的标签名放到Vue定义的标签里面，就行，这边的组件是可以重用的，而且每一个组件都是一个实例，是独立的，相互不影响。 效果：
Vue基础组件的基本使用
什么是组件呢？
创建自定义组件的是Vue.component方法。<body> <div id="app"> <button-counter></button-counter> </div> </body> <body> <div id="app"> <button-counter></button-counter> </div> </body> <script> // 创建自定义组件 Vue.component('ButtonCounter',{ data:function () { return { count:0 } }, // template:` // <div> // <button @click="add">点击了{{ count }}次</button> // </div> // `, template:"<div><button @click='add'>点击了{{ count }}次</button></div>", methods:{ add() { this.count += 1 console.log(this.count) } } }) var vm = new Vue({ el:'#app', data:{} }) <body> <div id="app"> <button-counter></button-counter> </div> </body> template:"<div><button @click='add'>点击了{{ count }}次</button></div>" <body> <div id="app"> <button-counter></button-counter> </div> </body> template:` <div> <button @click="add">点击了{{ count }}次</button> </div> `
1.渲染模板不管别的，先把div写好，防止出错
2.组件模板的内容必须是单个跟元素， methods:{ add() { this.count += 1 console.log(this.count) } } <div id="app"> <button-counter></button-counter> <br> <button-counter></button-counter> <br> <button-counter></button-counter> <br> </div>
这样一个基本组件就创建完成了 sull
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
