笔记4

一、组件

特点：一组可复用的vue实例

组件化和模块化的区别？

组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性

特点：一个具有html+css+js的页面

模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

二、命名规则

1.不能以标签起名，包含大写
2.建议用驼峰起名
3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰      

三、template模板

组件：一组可服用的vue实例

用法：全局定义，局部定义

Vue.component('组件名',模板对象)　　全局

components{　　　　　　局部

　　　　组件名：{模板对象}

}

四、data使用

重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.

　　data(){

　　return{

　　}

　}

总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰,所以定义为函数

五、组件嵌套

注意：子组件只能在父组件中使用   子组件中的数据目前仅能供自己使用

components:{
　　　　vOne:{　　一层组件
　　　　　　template:'#temp1',
　　　　　　components:{
　　　　　　　　vInner:{　　二层组件
　　　　　　　　　　template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
　　　　　　　　　　components:{
　　　　　　　　　　　　　　vThree:{　　三层组件
　　　　　　　　　　　　　　　　template:'#temp2'
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　vOuter:{　　二层组件

　　　　　　　　}
　　　　　　},
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　name:'张三'
　　　　　　　　　　　　}
　　　　　　　　}
}

// 总结：组件中关系：只有父子和非父子关系
// 嵌套:子组件只能在父组件中使用
// 组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
// data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如：data,methods,filter,cmpputed,watch...

六、后台管理页面实现

注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式 

 

七、生命周期 --8个钩子函数 mounted 是最常用的

v-if 会引起生命周期的改变

v-show 不会引起

 

第一次生命周期会触发的为:beforeCreate，created，beforeMount，mounted

八、脚手架

方法：

1全局安装webpack

npm i webpack -g

查看版本
webpack -v

2全局安装vue脚手架 2.x

npm i vue-cli -g

//查看版本
vue -V

以上操作只需要操作一次

 

1.创建项目

vue init webpack demo

 

2.进入项目

cd demo

 

 

3.启动

npm run dev //localhost:8080

注意： 安装cnpm方法 淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org