接上篇（摸到vue门槛后再进阶）组件，生命周期钩子函数，vue脚手架

一、组件

页面中的一部分，可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例

1.组件的定义和使用

• 全局组件的定义

  Vue.component("组件的名字",{
  	               template:"<div>组件模版的内容</div>"   template 必须有
  	           })组件的使用
  

• 局部注册组件的定义 (常用)

var 组件的名字 = {
					template:"<div>组件的内容</div>"
                }

• 局部组件的注册

  new Vue({

              	.....
  					components:{   ／／局部注册
  						key:组件的名字
  					}
              	.....
              	})
  

• 组件的使用 <组件的名字></组件的名字>

• 注意事项

  • 使用时成对标记
  • 名字时驼峰命名的，改为“－”的形式
  • 不能和现有标签重名

  ​

2.组件的data选项

data(){  //为了保证每个组件的实例数据是独立的
 			return {
 				key:value
 			}
 		}

3.组件的事件监听修饰符.native

4.组件的传值

• 父组件给子组件传值

  • <组件 属性=“传改子组件的值”></组件>（v-bind:属性=“识别数据类型和变量” 不用v-bind 传递的都是字符串）

  • 子组件通过props选项接收值

    • props:[“属性”]

    • props:{
             	  属性：类型
             }
      
      props:{验证
             	 属性：{
             	 	type:类型，
             	 	required：true  必须传递这个属性
             	 	default:值  设置默认值
             	 	validator(值){
             	 		return 布尔表达式
             	 	}
             	 }
      
             }
      

    • 父组件传给子组件的值不能更改，单向数据流（可以把这个值赋值给子组件data里的变量，可以更改子组件里data里的那个变量）

• 子组件向父组件传值

  • 父组件先监听自定义事件 v-on：自定义事件
  • 子组件发送数据 this.$emit(“事件的名字”，“数据“)
  • 父组件通过执行事件处理函数，通过事件对象拿到子组件传过来的值

• 兄弟组件的传值

  • 通过公共的父组件进行传值

  • 通过vuebus传值

    • Vue的实例上有两个方法 $on $emit

      1） vuebus = new Vue()   也可以用公共的父组件 this.$parent    this.$root
      
      2) 发送  vuebus.$emit("事件","数据")
      
      3) created  vuebus.$on("事件",(data)=>{ }) data 就是拿到的数据
      

5.生命周期钩子函数

组件整个生命周期能被自动调用的函数，就是生命周期的钩子函数

• beforeCreate

    在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    访问不到数据
  

• created 在实例创建完成后被立即调用 可以获取数据

• beforeMount

  在挂载开始之前被调用
  
  可以访问数据  编译模板结束，虚拟dom已经存在
  

• mounted

  可以拿到节点和数据  常用
  实例被挂载后调用
  ref表示节点
  this.$refs.ref的标识 就可以拿到节点了
  

• beforeUpdate

  数据更新时调用，发生在虚拟 DOM 打补丁之前
  

• updated

   常用的  监控数据的变化
   由于数据更改导致的虚拟 DOM 重新渲染和打补丁
   watch 是监控特定数据的变化，updated是监控组件里所有数据的变化

• beforeDestroy实例销毁之前调用 清理资源，防止内存的泄露
• destroyed 实例销毁后调用。该钩子被调用后

6、动态组件

二、脚手架（vue-cli）

1.安装和使用

      npm i @vue/cli -g  
      vue -V 能看到版本号就按照成功了。
      vue create 项目的名字
      cd 项目的名字
      yarn serve  (npm run serve)
      在浏览器 http://localhost:8080