再做vue之前, 需要先引入vue.js文件
<script src="../js/vue.js"></script>
有很多官方或者非官方的cdn可以使用, 可自行前往 搜索下载
组件定义
首先, 使用Vue.extend() 来定义一个组件 (注意这个步骤是在script标签中完成的)
const testComponent = Vue.extend({ })
然后进行初始化操作, 初始化的时候, 在Vue.extend()中填入一个对象参数, 这个参数的格式和new Vue的操作大部分相似.
第一个参数 : template, 也就是模板的意思, 它规定了组件以什么样的方式出现:
const testComponent = Vue.extend({ template : '<div>你好呀</div>' })
第二个参数 : data, 如果组件中存在动态的数据, 那么就需要使用data来写入数据, 例如:
const testComponent = Vue.extend({ template : `<div>你好呀</div> <p>我是{{name}}</p>` })
这个时候你就会发现, 在运行的时候这样定义template是错误的
在使用之前就需要对这个name进行赋值, 也就是使用类似于new Vue的时候的data字段:
vue语法规定, 组件下, 只能有一个根元素, 但是这个根元素可以包含其他元素, 如果template下面有多个元素的时候, 就需要使用div将所有元素全部包裹, 满足只有一个根元素的条件.
注意下面代码中的template下级标签一定是一个div或者其他标签
const testComponent = Vue.extend({ template : `<div> <div>你好呀</div> <p>我是{{name}}</p> </div>`, data () { return { name : '张三' } } })
注意上面代码中template 中把div圈起来的符号是 ``, 这个符号是位于英文键盘的左上角,Esc的下面一个按键, 同时除了这种直接在组件中声明template的格式, 还可以通过引用的形式来创建:
const testComponent = Vue.extend({ template : '#testTemplate', data () { return { name : '张三' } } })
不过需要注意的是, 这里的data是以函数的形式出现的, 为什么?
我们注意到, Vue的定义中, vue的组件是相互独立的存在, 两个不同的文件引用了同一个组件, 如果组件之前返回的数据是以data : {}的形式返回, 那么就意味着这个data必然有一个引用的对象, 也就是说, 这一个文件对这个组件的data引用里面的参数进行修改之后, 另外一个文件也会接收到这个修改, 就会影响组件的独立性, 所以这里使用方法的形式, 方数据直接通过方法返回给使用者, 那么修改的只是返回的值, 而不会影响其他文件.
那么组件中是否能存在方法呢? 当然可以, 并且这个方法的使用和new Vue中的methods一样:
<body> <div id="app"> <testcomponent></testcomponent> </div> <template id="test"> <div> <div>你好呀</div> <p>我是 {{name}}</p> <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p> </div> </template> </body> <script> const testcomponent = Vue.extend({ template : '#test', data () { return { name : '张三' } },methods : { doInput() { alert('收到!!') } } }); var vue = new Vue({ el : '#app', data: { }, methods : { } }); </script>
在组件定义中加入methods对象, 对象的类型为方法, 每个方法之间使用逗号 ',' 隔开, 方法名和事件的名称对应上, 如上图代码.
注册
注册就好比电话卡, 你拿到了一张电话卡, 如果你用一个没有停机的号码打这个电话卡, 那么就会显示此号码为空, 因为这和号码还没被运营商注册到网上
你拿到的这个电话卡就相当于这里的组件, 把电话卡激活就相当于 对组件进行注册, 然后你得使用这张电话卡呀, 怎么使用? 当然是将其插入到手机中使用, 这里将电话卡插入手机就类似于将组件引用至文件中!!
首先注册(局部注册), 你需要将其添加到vue的实例中, vue实例中有一个components字段, 这个字段用来存放一个或者多个组件, 每个组件之间使用英文逗号间隔, 如下:
<body> <div id="app"> </div> <template id="test"> <div> <div>你好呀</div> <p>我是 {{name}}</p> <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p> </div> </template> </body> <script> const testcomponent = Vue.extend({ template : '#test', data () { return { name : '张三' } },methods : { doInput() { alert('收到!!') } } }); var vue = new Vue({ el : '#app', data: { }, methods : { },components : { testcomponent // 相当于testcomponent : testcomponent // 或者你可以写为: // testc : testcomponent // 那么使用的时候就是使用testc这个名字 } }); </script>
对于组件的存放格式, 为key : value的形式, key为使用的时候的名字, value为你组件的名字, 就比如你使用邮箱的时候, 你可以给你的邮箱1111@qq.com 起一个签名niceff@qq.com , 叫做, 你的本质上还是这个1111@qq,com, 但是你使用给别人看的时候是niceff@qq.com.
key为组件将要被使用之前我给它取的别名, value为组件定义的时候的名字.
这个key的命名颇为有趣, 我们讨论在文章末尾讨论一下.
使用组件
使用组件, 直接使用上文提到的key形成的标签来使用组件:
<body> <div id="app"> <testcomponent></testcomponent> </div> <template id="test"> <div> <div>你好呀</div> <p>我是 {{name}}</p> <p>你是谁呀 <input type="button" value="我是你的好朋友" @click="doInput"></p> </div> </template> </body> <script> const testcomponent = Vue.extend({ template : '#test', data () { return { name : '张三' } },methods : { doInput() { alert('收到!!') } } }); var vue = new Vue({ el : '#app', data: { }, methods : { },components : { testcomponent } }); </script>
在 id ='app'的div标签中, 直接使用组件别名来自定义一个标签: ""来使用.
组件的命名
不少初学者在学习vue的时候都会遇到的一个头疼的问题, 因为不同的学生有不同的命名规范, 命名规范各不相同, 所以有些使用小驼峰命名的小伙伴可就惨了
组件的命名有几个注意点:
- 第一种写法为, 首字母小写
- 第二种写法为首字母大写
但是如果你的命名里面不止使用一个单词, 那么就需要注意:
- 如果key的命名中包含 ' - ' 横杠, 那么就需要将整个key加上引号, 例如
'my-key' : testcomponent - 如果使用驼峰的写法, 那么就需要 Vue的脚手架支持
其次:
- 组件需要回避html中已有的标签, 例如h标签, div标签
- 可以使用name配置项指定组件在开发工具中呈现的名字(仅限开发工具), 也就是在组件定义的时候, 加上name 属性, 他是一个键值对的形式出现的字段.
