目录
前言
看本篇之前一定要掌握
webpack 基础(了解即可) https://blog.csdn.net/yzj17025693/article/details/90694903
vue2 基础 https://blog.csdn.net/yzj17025693/article/details/95776062
vue的脚手架
下面是基本的脚手架程序
src是我们写js的地方,上面都是配置文件,node_modules是库文件
static一般用来放图片或者css
src下的components用来放其它组件,也就是我们自己的vue文件
main.js是入口js,用来创建vue的实例
vue文件的基本格式
这样可以样式私有化,不造成组件间的样式感染,具体百度利弊
自定义我们自己的组件
data必须变成方法
也可以写成lamboda表达式形式
然后在app.vue里引入我们自己的组件
导入组件,映射组件,使用组件
编写main.js创建vue的实c
需要先导入vue的js文件和app.vue
然后使用模版 '<App/>'
而这个vue其实是导入js的文件
而app则是我们写的app.vue文件
切换src
如果想切换src,也就是另一套源码,可以在webpack.base.conf.js
引入css
我们一般会把公用的css放到static里
在index.html里引入css即可
注意这个index.html是项目最外层的那个
评论案例(基本组成流程)
把上面的功能拆分成一个一个小模块,也就是组件
List是列表,也仅仅是个框
add是左边的,item是显示的评论
导入组件,映射组件,使用组件标签
不管是哪个组件,需要用到其它组件,都需要这么引入
把app里定义的数据传递给组件(组件间通信)
数据的定义的地点,如果是某个组件要用到某个数据,那么直接在组件里定义数据即可
但是这个数据会被某些组件用到,比如这个案例,这些组件都要用到name(用户名)和content(评论内容)
这时候就需要把数据定义到app里
但是app里的数据还需要传递给具体的组件
直接在组件标签处传递,记得前面要加 : 冒号,才能代表这是表达式,里面是数据,而不是字符串
这个 :comments要和具体组件里定义的声明一致
在具体的组件里声明comments
声明comments的另外形式
组件分离下的v-for循环(遍历数据到列表)
这里list和item是分离的,list仅仅是个框,而item是显示数据的
这时候直接在list组件里引入item,然后使用组件标签,使用的时候,循环item
然后把元素对象传递给item
在item里就需要声明comment并且使用对象
跨组件添加数据进数组
对应的是案例的提交,提交完后在右边显示
首先在add.vue里面添加对应的数据绑定
在app.vue里面也需要添加对应的方法
unshift是添加数据到数组的前面
把方法从app.vue传到add.vue里
add.vue里申明方法
然后把数据添加进数组,最后还需要清除输入的数据
从数组中删除数据
对应的是案例中的删除评论
在app.vue里添加删除方法
传递给item组件
需要在列表循环的时候就把数组的下标传到item组件里
还有一个小功能,就是当数组没有元素的时候显示其它的东西,这个comments上面list组件的时候就定义了
在item里追加声明
最后在item组件里添加删除的方法
item组件里大致就是这些内容,因为应该是由List组件来循环这些的
组件中通信
自定义事件
给标签绑定事件监听
这种方式最好用于父子层传递数据,也就是说如果有3层组件,从第1层传到第3层,用这种方式不适合
在子组件里,就不需要再声明props属性了
使用的时候,直接触发自定义事件即可
另一种方式定义
这种适用传递任何层数
这种方式能
给标签指定ref唯一标识
然后在页面挂载的时候绑定对象
订阅消息
可以实现任意组件间的通信
在需要使用发布/订阅消息的地方导入
发布消息用publish
订阅消息用subscribe(订阅) 第1个参数是上面publish的第1个参数,接受的也是这个字符串,没有什么用
要注意的是这里用箭头函数,因为this的问题,当然,也可以先把this存起来
slot插槽
此方式用于父组件向子组件传递 "标签数据",不仅仅传数据
把标签替换成槽,并且定义name
在父组件里指定插槽即可
而isAllCheck是一个计算属性,计算属性之前是写在子组件里的
现在还需要把计算属性移到父组件里
部署项目到tomcat
