不积跬步, 无以至千里; 不积小流, 无以成江海.
vuejs 语言基础
组件注册:
1. 创建组件构造器: 调用 vue.extend() 方法创建组件构造器 (这种写法在 Vue2.0 中几乎已经看不到了)
(1) 调用 Vue.extend() 创建的是一个组件构造器
(2) 通常在创建组件构造器时, 传入 template 代表我们自定义组件的模板
2. 注册组件: 调用 Vue.component() 方法注册组件
(1) 调用 Vue.component(), 将刚才的组件构造器注册为一个组件, 并且给他起一个组件的标签名称
(2) 所以需要传递两个参数: 1. 注册组件的标签名 2. 组件构造器
3. 使用组件: 在 Vue 实例的作用范围内使用组件
(1) 组件必须挂载在某个 Vue 实例下, 否则它不会生效
- <div id="app">
- <!-- 3. 使用组件 -->
- <my-cpn></my-cpn>
- </div>
- <script src="../js/vue.js"></script>
- <script>
- // 1. 创建组件构造器对象
- const cpnC = Vue.extend({
- // 传入 template 自定义组件的模板
- template:
- `<div>
- <h2 > 我是标题 </h2>
- <p > 我是内容, 哈哈哈 </p>
- </div>`
- })
- // 2. 注册组件
- // Vue.component('组件的标签名')
- Vue.component('my-cpn', cpnC)
- const App = new Vue({
- el: '#app',
- data: {
- message: '你好呀'
- }
- })
- </script>
博客借鉴:
来源: http://www.bubuko.com/infodetail-3682389.html