vue-cli和生命周期

一愿一世界
216 阅读5分钟

“这是sylu计算机协会第一次技术征文活动”

7.vue-cli

简化了程序员webpack创建工程化的Vue项目的过程

官网：cli.vuejs.org/zh/

//vue-cli是npm上的一个全局包

使用npm install -g@vue/cli命令行安装

使用vue -v检查是否安装成功

//创建项目

vue create 项目名称

注意冻结窗口

处理方法：鼠标轻点再ctrl+c

  1. vue项目中src目录构成：

    assets文件夹，存放项目中用到的静态资源文件，例如css，图片等等
componeents文件夹：程序员封装可复用的组件，都要房子啊components目录之下
main.js是项目的入口文件，整个项目的执行首先执行此文件夹
App.vue是项目的根组件

    在工程化的项目中，vue将APP.vue渲染到index.html之中

    • main.js
//导入vue包，得到vue构造函数
import Vue from 'vue'
//导入App.vue根组件，把这个玩意儿渲染到index上
import App from './App.vue'


new Vue({
  //render渲染根组件渲染到index.html
  render: h => h(App),
}).$mount('#app')
//$mount('#app')渲染到这个位置，或者手动渲染使用`el`
创建组件
  1. 在assests文件夹中新建.vue文件
  2. 在main中导入
  3. 创建vue对象

组件中的data不能指向对象，组件中的data必须是一个函数

data(){
//组件中return的对象可以定义数据
return{

}
}

注意组件中只能存在唯一根节点

组件结构

组件中必须的data必须有一个函数 在data中必须有一个return{}

export default{
	data(){
		return{
			//在此定义数据
		}
	}
}

启用less语法

//启用less语法
<style lang="less">
.qwe{
	background-color:red:
		h1{
			color:red;
		}
}
</style>
组件中的多个组件之间的关系
  1. 组件被封装好，彼此是独立的，没有父子关系
  2. 组件使用时，之间嵌套关系之后会产生父子系工地关系

通过commponents节点进行注册组件

相当于标签之间

注意写在需要的vue组件之中

commponents:{
LEFT：left
}



<div>
    <left></left>
</div>

通过components注册的是私有组件 只有在注册节点之下才可以使用此声明节点 在哪个组件之中注册就是哪个里边使用，不可跨组件使用

  • 全局组件

导入 注册 使用三部分引用其他组件中注册的组件

解决上述问题从而实现注册全局组件的用法

在vue项目中的main.js入口文件中，通过Vue.commponent()方法，可以注册全局组件

import Count from '@+路径下的组件'

//参数1：字符串类型，表示注册的名称
//参数2：需要杯全局注册的组件
Vue.commponent('注册的名称',Count);
之后可以通过名称以标签的形式引用
  • 组件中的props

props是组件的自定义属性，在封装通用组件的时候，合理的使用props可以极大的提高代码的复用性！ 当组件多次使用之后，可以由用户进行自定义初始值 和data（）{}平级写 通过页面中的属性节点(是指之前定义的那个标签名字就是属性节点)进行定义props的内部数据，实现多页面引用组件数据初始不同化

例子:

wxport default{
	//名称合法就行，随便定义
	props:['init'];
	data(){
		return{
			
		}
	}
}

//这里传入的是数字9，如果不加冒号传入的是字符串9（绑定了v-bind）
<mycount :init="9">

</mycount>
  • props中的数据可以直接在模板结构上使用
  • props的数据是只读的（只能看不能改）
  • 将props中的值直接转存到data中进行读写。
data(){
	return{
		count:init
	}
}
  • props可以赋一个默认值，在属性节点没有赋值的话，用默认值渲染
  • 数组无法定义默认值
props:{
	init:{
		//用default属性定义默认值
		//在用户没有传值的时候生效
		default:0，
		//可以通过type属性定义属性的类型
		//可通过数据检测进行判断
		type:Number，
		//required是必填项的意思(必填项校验)
		required:ture
	}
}
//和之前的数组格式效果相同
组件中的样式冲突

在默认的情况下，写.vue的组件中的样式会全局生效，因此会造成多个组件样式冲突的问题。

  1. 由于单页面应用程序的问题，所有的组件中的DOM元素都在index.html上呈现，全部的样式也会渲染到全部页面上

当写<style>时加入scoped属性，就解决了以上问题

/deep/写在选择器之前也是同等效果，可以该改变子类的属性

8.生命周期

生命周期是一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。 生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

组件创建阶段 new Vue()->beforecreate->created->beforeMount->mounted->

组件运行阶段 beforeUpdate->updated

组件销毁阶段 brforeDestroy->destroy


new Vue()->beforecreate->created->beforeMount->mounted->beforeUpdate->updated->brforeDestroy->destroy


以下是创建阶段


new Vue()//创建实例对象





beforecreate（）//此时组件中的props，data，methods都未被创建，刚刚结束初始化事件和生命周期函数






created()//在组件中的的props，data，methods都杯创建，但是模板结构未生成，可发起ajax请求拿数据但是因为模板结构未生成即在此无法操作dom属性**这一块用于请求数据渲染页面**




beforeMount()//将要把内存中编译完成的html结构渲染到浏览器中。此时浏览器中还没有dom结构





mounted()//此时dom结构已经渲染成功，将el全部换成dom属性，想操作dom元素最早只能在此阶段进行





以下是运行阶段



当返回数据发生改变，触发之下函数

beforeUpdate()//将要根据变化后的数据或者最新数据，重新渲染组件的模板结构





updated()//已经根据最新的数据完成dom结构的重新渲染。




以下是销毁阶段


brforeDestroy()将要销毁组件之前，此时尚未销毁，组件还处在正常工作简短



destroy()组件已经销毁，此组件在浏览器中对应的dom组件已经被完全移除
avatar
文章
阅读
粉丝