Vue从0开始

最新推荐文章于 2022-02-15 14:27:40 发布

黎小蛮

最新推荐文章于 2022-02-15 14:27:40 发布

阅读量630

点赞数 1

分类专栏：前端框架 Vue 文章标签： Vue

本文链接：https://blog.csdn.net/prxhlirr/article/details/101297977

版权

Vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端框架

3 篇文章 0 订阅

订阅专栏

Vue从0开始

1、Vue指令

直接代码吧！
点击按钮使方块隐藏显示，实例如下：

	<script type="text/javascript" src="vue.js"></script>
	<style type="text/css">
		.div1 {width: 100px; height: 100px; background: red; margin-top: 20px;}
	</style>
	<div id="box">
		<button @click='fn()'>toggle</button><br/>
		<div class="div1" v-show='bol'></div>
	</div>
	// 控制器
	var vm = new Vue({
		el: '#box',
		data: {
			// 数据
			bol: false
		},
		methods: {
			fn: function () {
				// body...
				// console.log(1);
				// console.log(this.bol);
				// 如果div显示，那么点击隐藏；
				// 如果div隐藏，那么点击显示
				this.bol = !this.bol;
			}
		}
	});

Vue点击事件：v-on：click。简写方式：@click。
v-model：双向绑定（将用户输入的信息显示在页面上）
v-bind：用来响应的更新HTML属性，支持单一的JavaScript表达式
完整语法：<span v-bind:class=“classProperty”>
注：v-bind是指令；class是参数；classProperty是预期值
v-bind属性绑定：v-bind:class={类名：表达式}。
实例：<style type="text/css"> .red {background: red;} </style> <ul>   <li v-for='(item,index) in arr' @click='fn(index)' v-bind:class='{red:item.bol}'>{{ index+'、' }}{{ item.des }}</li> </ul> var vm = new Vue({ el: '#box', data: { arr: [ {des:'睡觉', bol:false}, {des:'shopping', bol:false}, {des:'coding', bol:false}, {des:'LOL', bol:false}, ] }, methods: { fn: function (index) { // body... // 通过i知道当前被点的数据时谁， // 把被点击的数据的 bol 值改成true // 把所有其他未被选中的数据的bl 改成false // 思路：先都改成 false，然后再把选中的改成true for (var i = 0; i < this.arr.length; i++){ this.arr[i].bol = false; } this.arr[index].bol = true; } } });
v-for：相当于js中的for循环
语法：v-for=“item in arr”
注：item是遍历后得到的元素；arr表示要遍历的数组
v-for=’’（item index） in arr "
注：index表示下标
在style中使用[v-cloak] {display：none}防止当页面刷新的时候产生的{{}}，使其在页面加载完成之前隐藏。
v-text：用来设置文本内容。语法：v-text=变量。相当于innerHTML
v-if：判断。语法：v-if=表达式
实例：

hello!

world

redredred

v-show：控制一个元素的显示与隐藏。语法：v-show=表达式
原理：通过控制元素的display属性，来控制元素的显示和隐藏。
v-else：和v-if、v-else-if指令配合使用。
v-for、v-model、v-show、v-bind：class、@blur等的配合使用。
实例如下：

**<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="vue.js"></script>
	<style type="text/css">
		#box {width: 350px; margin: 30px auto; background: #eee; padding: 30px 50px;}
		li {list-style-type: none;}
		ul {padding-left: 0;}
		.add {width: 200px; height: 20px; margin-right: 10px;}
		.finish {color: #ccc; text-decoration: line-through;}
		.span1 {color: skyblue;}
	</style>
</head>
<body>
	<div id="box">
		<!-- 
			如何计算未完成的任务总数：
			将 arr 进行遍历，能够拿到 obj.bol 值；
			通过判断 obj.bol 的真假，就知道当前这条任务是否完成；
			如果完成，不做计算；如果未完成，将其加入到未完成的数量中；
		 -->
		<h1>任务列表</h1>
		<p>任务总数：{{ arr.length }}；还有：{{ choose() }} 未完成；【<span @click='finish()' class="span1">完成</span>】</p>
		<ul>
			<li v-for='(item,index) in arr' v-bind:class='{finish: item.bol}'>
				<input type="checkbox" v-model='item.bol' @click.stop='choose(index)'></input>
				<span v-show='!item.edit' @click='edit(index)'>{{ item.des }}</span>
				<input type="text" v-model='item.des' v-show='item.edit' @blur='item.edit=false'></input>
			</li>
		</ul>
		<input type="text" class="add" v-model='msg'></input><button @click='add()'>添加</button>
	</div>
</body>
</html>
<script type="text/javascript">
	
	var vm = new Vue({
		el: '#box',
		data: {
			arr: [
				// 每条数据中应该有数据的内容，和 数据的状态
				{des:'设计', bol: false, edit: false},
				{des:'编写页面代码', bol: false, edit: false},
				{des:'编写js代码', bol: false, edit: false},
				{des:'设计产品原型', bol: false, edit: false},
			],
			msg: ''
		},
		methods: {
			add: function () {
				// body...
				// 向数组中添加内容
				this.arr.push({des: this.msg, bol: false});
				this.msg = '';
			},
			choose: function (i) {
				// body...
				// console.log(1);
				// i代表当前点中的数据的下标
				// 返回当前数据的一个状态（bol）
				// 遍历数组
				// arr.forEach(function(item){逻辑操作})
				// item 代表每次遍历后得到的值
				var num = 0; //未完成任务数量
				this.arr.forEach(function (item) {
					// body...
					if (!item.bol) {  //当前任务未完成
						// 增加未完成任务的数量
						num++;
					}
				});
				return num;
			},
			finish: function () {
				// body...
				// 遍历数组，通过判断bol值，来判断当前待办事项是否完成。
				// 如果完成，那么删除
				// for (var i = 0; i < this.arr.length; i++){
				// 	if (this.arr[i].bol) {
				// 		// 删除掉
						//splice()方法表示要添加/删除的项目，并返回删除的项目。
				// 		this.arr.splice(i,1);
				// 	}
				// }
				// 添加功能
				// this.arr
				// var temp = this.arr;   this.arr清空
				// 遍历temp，如果bol值判断结果为未完成，那么将数据push到this.arr
				var temp = this.arr;
				this.arr = [];
				for (var i = 0; i < temp.length; i++) {
					if (!temp[i].bol) {
						this.arr.push(temp[i]);
					}
				}
			},
			edit: function (i) {
				// body...
				if (this.arr[i].bol){
					return;
				}
				this.arr[i].edit = true;
			}
		}
	});
</script>**

2、Vue交互及生命周期

（1）get请求

语法：this.$http.get(‘url’,{params:{a:1,b:2,…}}).then(function (res) {处理请求成功}，function (res) {处理请求失败} );
get请求可以用来请求文本文件、向后台传递参数并返回数值、调用接口查询真实数据等。

（2）post请求

语法：this.$http.post(‘url’，{a:1,b:2…},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败})

（3）jsonp请求

语法：this.$http.jsonp(‘url’,{params:{a:1,b:2…}},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况});
实例：

**<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
	<div id="box">
		<button @click='search()'>search</button>
		<!-- 
			1、get请求
				this.$http.get('url', {params:{a:1,b:2...}}).then(function(res){处理请求成功},function(res){处理请求失败});
		 -->
	</div>
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#box',
		data: {
		},
		methods: {
			search: function () {
				// body...
				// 1）请求文本
				// this.$http.get('11.txt').then(function (res) {
				// 	// body...
				// 	// console.log('成功');
				// 	// res参数: 请求成功时返回的数据
				// 	// 返回的参数中，status 是请求的状态码
				// 	// data：请求返回的数据
				// 	console.log(res.status);
				// 	console.log(res.data);
				// }, function (res) {
				// 	// body...
				// 	// console.log('失败');
				// 	console.log(res.status);
				// });
				// 2) 需要向后台传递参数，并返回数值
				// 需求：向后台传入两个数，返回两个数的和
				// this.$http.get('sum.php',{
				// 	params: {a:3, b:10}
				// }).then(function (res) {
				// 	// body...
				// 	console.log(res.data);
				// }, function (res) {
				// 	// body...
				// 	console.log(res.status);
				// });
				// 3) 请求真实数据
				// http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=2&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187
				// 接口、接口描述、参数描述、返回值、状态码
				this.$http.get('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=2&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187').then(function (res) {
					// body...
					console.log(res.data.data.commentList[0].createAt);
				}, function (res) {
					// body...
					console.log(res.status);
				});
				// 12412935808094 时间戳，表示时间的毫秒数
				// post请求
				// this.$http.post(‘url’，{a:1,b:2...},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败})
				// 参数传递： {参数1：值1，参数2：值2.。。。}
				// {emulateJSON：true}	模拟json数据格式，将参数传递过去
				// 求两个数的差
				// this.$http.post('sub.php',{
				// 	a:5, b:1
				// },{emulateJSON:true}).then(function (res) {
				// 	// body...
				// 	console.log(res.data);
				// }, function (res) {
				// 	// body...
				// 	console.log(res.status);
				// });
				// jsonp请求
				// this.$http.jsonp('url',{params:{a:1,b:2...}},{emulateJSON:true}).then(function(res){处理请求成功的情况},function(res){处理请求失败的情况});
				// 到底该使用什么类型的请求
				// get，参数拼接url上，一般保密性的信息不要使用这种方法，对文件大小限制
				// post，允许传递数据大小 大
				// 使用哪种请求方式，是由后台开发人员决定的
				// 接口文档中，会详细标注，使用什么请求方式
			}
		}
	});
</script>**

（4）过滤器的使用

定义过滤器是在创建实例之前。
语法：Vue.filter(‘过滤器名称’,function (val) {
val:需要处理的值
逻辑代码
return 处理后的数据;
})
过滤器的调用：数据 | 过滤器名称
过滤器的串联：过滤器在没有冲突的情况下，是可以进行串联使用的。
实例：

	**<div id="box">
		<h1>{{ name | hello | currency}}</h1>
	</div>
	<script type="text/javascript">
	// 定义过滤器
	// 位置：创建实例之前
	/* Vue.filter('过滤器名称',function(val){
			val: 需要处理的值
			逻辑代码
			return 处理后的数据；
	})
	*/
	//过滤器的调用：
	//  数据 | 过滤器名称 
	// 过滤器的串联：过滤器在没有冲突的前提下，是可以进行串联使用的
	Vue.filter('hello',function (val) {
		// body...
		return 'hello'+val;
	});
	Vue.filter('currency',function (val) {
		// body...
		return '￥￥￥ '+val;
	});
	var vm = new Vue({
		el: '#box',
		data: {
			name: 'lily'
		}
	});
</script>**

（5）实例的生命周期

实例的生命周期：实例从创建到销毁的过程
钩子函数：在实例的生命周期中会自动调用一些函数，这些函数就是钩子函数
作用：可以通过钩子函数来定义需要的一些逻辑
生命周期：
create（创建）:beforeCreate、created
mount（挂载）：beforeMount、mounted
update（更新）：beforeUpdate、updated
destroy（销毁）：beforeDestroy、destroyed
实例：

**<script type="text/javascript">
	var vm = new Vue({
		el: '#box',
		data: {
			msg: 'hello'
		},
		// 钩子函数书写的位置，和data，methods等配置项同级
		beforeCreate: function () {
			// body...
			console.group('beforeCreate~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
			// 三者都没有创建
		},
		created: function () {
			// body...
			console.group('created~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
			// el没有创建、data和msg创建
		},
		beforeMount: function () {
			// body...
			console.group('beforeMount~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
			// el并没有真正的创建出来，而是进行了一个占位、data和msg创建
		},
		mounted: function () {
			// body...
			console.group('mounted~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
			// el已经替换成了真是的数据，而是进行了一个占位、data和msg创建
		}, 
		// el 是设置挂载  el：‘selector’ 用来将容器和数据进行关联 挂载
		beforeUpdate: function () {
			// body...
			console.group('beforeUpdate~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
		},
		updated: function () {
			// body...
			console.group('updated~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
		}, 
		//数据更新后，这两个方法会执行 
		beforeDestroy: function () {
			// body...
			console.group('beforeDestroy~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
		},
		destroyed: function () {
			// body...
			console.group('beforeDestroy~~~~~~~~~~~~~~~~~~');
			console.log('el:'+this.$el);
			console.log('data:'+this.$data);
			console.log('msg:'+this.msg);
		},  
		// destroy 在实例销毁的时候执行；
		// 实例销毁后，其身上所有的数据和方法都会销毁，不在生效
	});
</script>**

运行效果图

三、组件

（1）全局组件

Vue.Component(‘name’,{template:‘html结构’});
如果想在HTML结构中写入多个标签，外层必须包裹容器。
组件中定义数据语法 data：function () { return { a:1 …}};
实例：

**<script type="text/javascript">
	// 全局组件
	// 组件的封装
	// Vue.component('name',{template:'html结构'})
	// 如果想在html结构中，写入多个标签，外层必须包裹容器
	Vue.component('test', {
		// 模板
		// template: '<div><h1>test</h1><p>111111</p><img src="img/1.png"/></div>'
		template: '#t',
		// 组件中定义数据
		// data：function（）{return {a:1...}}
		data: function () {
			// body...
			return {
				msg: 'hello',
				name: 'lily'
			}
		},
		methods: {
			fn: function () {
				// body...
				console.log(1);
			}
		}
	});
	var vm = new Vue({
		el: '#box',
		data: {
		}
	});
	var vm2 = new Vue({
		el: '#box2',
		data: {
		}
	});
</script>
<body>
	<div id="box">
		<!-- 组件的调用 
			<组件名></组件名>
		-->
		<test></test>
		<test></test>
		<test></test>
	</div>
	<div id="box2">
		<p>~~~~box2~~~~~~</p>
		<test></test>
	</div>
	<!-- 定义模板 
		使用template标签，在box容器外定义模板
		为template标签，添加id
		设置template：‘selector’
	-->
	<template id="t">
		<div>
			<!-- 模板中添加事件 -->
			<img src="img/1.png" @click='fn'/>
			<ul>
				<li>12312323</li>
				<li>12312323</li>
				<li>12312323</li>
			</ul>
			<h1>组件组件</h1>
			<h2>{{ msg + '~~' + name }}</h2>
		</div>
	</template>
</body>**

（2）局部组件

在哪个实例里面进行定义，就只能在对应关联的容器里面进行调用
注：如果组件命名的时候使用了驼峰命名法，那么在调用的时候要使用 - 连接的方式代替驼峰。

**var vm = new Vue({
		el: '#box',
		data: {
		},
		// 局部组件的定义
		components: {
			// 组件名称：{配置项}
			'test': {
				// template: '<h1>sdfasdfsdf</h1>'
				template: '#t',
				data: function () {
					// body...
					return {
						msg: 'hello',
						a: 100
					}
				},
				methods: {
					fn: function () {
						// body...
						console.log(1);
					}
				}
			},
			'test2': {
				template: '<h2>~~~~~~~~~~test2~~~~~~~~~~</h2>'
			},
			// 如果组件命名使用了驼峰命名法，那么在调用时，需要用-连接的方式，替代驼峰
			'myTest': {
				template: '<h1>*********myTest**********</h1>'
			}
			// 每一个组件，相当于一个完整的vue实例
			// 所以组件之间的作用域是完全独立的，组件之间的值不能够公用
		}
	});**

组件下方还可以定义组件，形成父子组件。

黎小蛮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue从0开始

Vue从0开始1、Vue指令直接代码吧！点击按钮使方块隐藏显示，实例如下： <script type="text/javascript" src="vue.js"></script> <style type="text/css"> .div1 {width: 100px; height: 100px; background: red; margin...
复制链接

扫一扫