vue基础

最新推荐文章于 2023-05-17 19:46:30 发布

满山的猴子我毛最多

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/qq_43467548/article/details/103365317

版权

##vueJs基础
###1 VueJs介绍
Vue.js是一个构建数据驱动的web界面的渐进式框架。易于上手，还便于与第三方库或既有项目整合
####MVVM模式
MVVM是Model-View-ViewMode的简写。它本质上就是MVC的改进，MVVM就是将其中的VIew的状态和行为抽象化，让我们将视图UI和业务逻辑分开
MVVM模式和MVC模式一样，主要的目的是分离视图和模型
###Vue的入门
###Vue的语法
1. 插值表达式
2. 事件的绑定
3. 数据的显示
4. 逻辑判断和循环输出
###Vue的生命周期
1. 8个生命周期的执行点
1. 4个基本
2. 4个特殊
###axios的Ajax异步请求
它和jQuery的Ajax比较近似

###案例
实现用户的查询列表和更新操作
1. 前端:Vue
2. 后端：ssm
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C3IfbbZV-1575349080847)(https://i.imgur.com/w7JH89e.png)]

快速入门

Vue:

<!--			<input type="text" onkeydown="showKeyCode()"/>-->
	</div>
</body>
<script>
new Vue({
	el:"#app",
	methods:{
		//$$event它是Vue中的事件对象 和我们传统的js的event对象是一样的
		fun:function (event) {
			var keyCode=event.keyCode;
			if(keyCode<48||keyCode>57){
				event.preventDefault();
			}
		}
	}
});
	//传统的js
	/*function showKeyCode() {
		//event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
	/!*	var keyCode = event.keyCode;*!/
		/!*alert(keyCode);*!/
		/!*if(event.keyCode==51){
			alert("年的");
		}*!/

	}*/
</script>
</html>

#################################333

v-on:mouseover

<body>
	<div id="app">
		<!--v-on的简写就是@-->
		<div v-on:mouseover="fun1" id="div">
			<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
		</div>
	<!--	<div onmouseover="divmouseover()" id="div">
			<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
		</div>-->
	</div>
</body>
<script>
	new Vue({
		el:"#app",
		methods:{
			fun1:function () {
				alert("鼠标悬停在div");
			},
			fun2:function (event) {
				alert("鼠标悬停在texe");
				event.stopPropagation();
			}
		}
	})
	//传统的js方式
	function divmouseover() {
		alert("鼠标移动到div");
	}
	function textareamouseover() {
		alert("鼠标移动到了textarea上了");
		event.stopPropagation();
	}
</script>
</html>

######事件修饰符
Vue.js为v-on提供了事件修饰符来处理dom事件细节，如：event.preventDefault()或eventstopPropagation()
Vue.js通过由点（.）表示的指令后缀来调用修饰符
1. .stop
2. .prevent
3. .capture
4. .self
5. .once

v-on:事件修饰符

##v-bind
插值语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令

v-bind的使用

##Vue中的按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符
全部的按键别名：
1. .enter
2. .tab
3. .delete(捕获删除和退格键)
4. .esc
5. .space
6. .up
7. .down
8. .left
9. .right
10. .ctrl
11. .shift
12. .meta

v-on:按键修饰符

	<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		Vue:<input type="text" @keydown.enter="fun1">
	</div>
</body>
<script>
	//view model
	new Vue({
		el:"#app",
		methods:{
		    fun1:function(){
		        alert("按下的是回车");
			}
		}
	});
</script>
</html>

###vue中的v-for的使用

v-for遍历数组

#################################################333333
###vue的生命周期
v-if是根据表达式的值来决定是否渲染元素
v-show 是根据表达式的值来切换元素的display css属性

<head>
	<meta charset="utf-8" />
	<title>vuejs生命周期</title>
	<script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
	<div id="app">
		{{message}}
	</div>
</body>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			message: 'hello world'
		},
		beforeCreate: function() {
			console.log(this);
			showData('创建vue实例前', this);
		},
		created: function() {
			showData('创建vue实例后', this);
		},
		beforeMount: function() {
			showData('挂载到dom前', this);
		},
		mounted: function() {
			showData('挂载到dom后', this);
		},
		beforeUpdate: function() {
			showData('数据变化更新前', this);
		},
		updated: function() {
			showData('数据变化更新后', this);
		},
		beforeDestroy: function() {
			vm.test = "3333";
			showData('vue实例销毁前', this);
		},
		destroyed: function() {
			showData('vue实例销毁后', this);
		}
	});

	function realDom() {
		console.log('真实dom结构：' + document.getElementById('app').innerHTML);
	}

	function showData(process, obj) {
		console.log(process);
		console.log('data 数据：' + obj.message)
		console.log('挂载的对象：')
		console.log(obj.$el)
		realDom();
		console.log('------------------')
		console.log('------------------')
	}
	// vm.message = "good...";
	/*vm.$destroy();*/
</script>

</html>

###############################################333333
###Vue中的Ajax
vue-resource:是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务，后来使用axios
####axios
Axios是一个基于promise的Http库，可以用在浏览器和node.js中axios的github:http://github.com/axios/axios
####引入axios
首先引入axios，如果你使用es6，只需要安装axios模块之后
import axios from ‘axios’;//安装方法
npm install axios//或
bower install axios
也可以使用script引入

为了方便起见，为所有支持的请求方法提供了别名
1. axios.request(config)
2. axios.delete(url[,config])
3. axios.get(url[,config])
4. axios.head(url[,config])
5. axios.post(url[,config])
6. axios.put(url[,config])
7. axios.patch(url[,config])