vue 基础入门笔记 11:组件
0 / 0 / 创建于 5年前 /
September 的个人博客
vue 基础入门笔记 11
- 什么是组件
- 为了拆分Vue示例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么的功能，就可以去调用对应的组件即可
- 模块化： 是从代码逻辑的角度进行划分的，方便代码分层开发
- 组件和： 是从UI界面的角度进行划分的
- 全局组件和局部组件
<!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="https://cdn.jsdelivr.net/npm/vue"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"> <app2></app2> <big></big> </div> <template id="app2"> <h1>哈哈哈哈</h1> </template> <template id="big"> <h2>嘿嘿</h2> </template> <script> //组件创建的一种方法，直接指向dom的 id //定义全局组件 Vue.component('app2',{ template:'#app2' }) var vm=new Vue({ el:'#app', data:{}, methods:{}, //定义局部组件 components:{ big:{ template:'#big' } } }); Vue.config.devtools = true </script> </body> </html>
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号