前端最火Vue从新手村到老师傅(二)

最新推荐文章于 2022-05-23 22:22:28 发布

瓦坎达forever

最新推荐文章于 2022-05-23 22:22:28 发布

阅读量112

点赞数

分类专栏： Vue 文章标签： java vue.js node.js reactjs vue

本文链接：https://blog.csdn.net/cssnnd/article/details/108457691

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此文接上文__前端最火Vue从新手村到老师傅(一)
在这里插入图片描述

Vue.js

3.Vue常用实例属性和方法以及生命周期

3.1 常用实例属性

$el
类型 : HTMLElement
只读 :
详细 : Vue实例使用的根DOM元素
在这里插入图片描述
$data
类型 : Object
详细 :
Vue实例观察的数据对象，Vue实例代理了其data对象属性的访问

$options
类型 : Object
详细 : 用于当前Vue实例的初始化选项，需要在选项中包含自定义属性时会有用处 :

window.onload = function(){
	var vm = new Vue({
		el : '#box', //指明数据展示在哪个view里面
		data:{
				a : 1 ,
		},
		  methods:{

		},
		//自定义属性
		myData : 12,
		//自定义的方式
		 myfunction : function(){
			 alert('hello');
		},
	});
	//获取自定义的属性
	alert(vm.$options.myData);
	vm.$options.myfunction();
};

3.2 常用实例方法

$mount([elementOrSelector]) 参数 : {Element | string } [elementOrSelector] {boolean} [hydrating] 返回值 : vm 实力本身用法 : 如果Vue实例在实例化时没收到el选项，则它处于"未挂载"状态，没有关联DOM元素，可以使用vm.$ mount() 手动挂载一个实例

如果没有提供elementOrSelector参数，模板将被渲染为文档之外的元素，而且必须用原生的DOM API把它插入文档
在这里插入图片描述

3.3 Vue的生命周期

每个Vue的实例都在被创建之前要经过一系列的初始化过程，例如需要设置数据监听，编译模板，挂载实例到DOM，数据变化更新DOM等，同时这个过程也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加代码

Vue的生命周期钩子函数如下 :

beforeCreate : 组件实例刚刚被创建，任何属性都没有
created : 实力已经创建完成，data(属性)已经绑定，但是DOM还没有生成
beforeMount : 模板被编译之前
mounted : 模板编译完成，意思就是 {{}} 表达式是否变成数据
beforeUpdate : 组件更新完成
Updated : 组件更新完成
beforeDestroy : 组件销毁之前
destroyed : 组件销毁完成

为方便理解如下图所示
在这里插入图片描述
Vue的生命周期仅作为了解，大致知道流程即可

在这里插入图片描述
接下来是Vue的绝对重点内容

在这里插入图片描述

3.4Vuejs中通过Axios完成异步请求 --(重点)

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中

axios的github: axiox戳这

步骤 :
导入axios的js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get请求+传参方式一 :

axios.get('user' , {
	params : {
		ID : 12345
	}
	}).then(function(response){
		console.log(response);
	}).catch(function(error){
		console.log(error);
})

get请求+传参方式二 :

axios.get('/user?id=123456').then(function(response){
	console.log(response);
}).catch(function(error){
	console.log(error);
});

post请求+传参方式一 :
注意 : 后端的springmvc必须设置 : @ResponseBody才能获取到值

var params = {
	username : username ,
	paswword : password
} ;

this.$axios.post(url , params).then(res=>{
		console.log(res);
})

post请求+传参方式二 :

var params = new URLSearchParams();
params.append('username' , username); 
params.append('password' , password);
this.$axios({
	method : 'post' , 
	url : url ,
	data : params
}).then((res)=>{
	console.log(res);
});

axios请求的时候带上请求头token验证
方法一 :

this.$axios.defaults.headers.common['Authorization']=token;
this.$axios.get('http://localhost : 8080/test/3')

方法二 :

let config = {
	Authorization : token
}
this.$axios.get('http://localhost : 8080/test/3' , {
	headers : config,
})

为方便起见 , 为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])