Vue.js杂记（一）

空城机
234 阅读4分钟

目录

验证码原理：

Vue生命周期函数

Vue创建实例：

v-bind和v-on

跑马灯效果制作

v-model双向绑定

v-for和key

验证码原理：

验证码是后端生成的，随机生成的。  

  • 1.后端调用相关的绘图第三方类库，或是(平台PHP、.NET. Java) 系统核心绘图类库进行图片的绘制
  • 2.绘制的那些随机的数字。字母都是后端预先定义好的
  • 3.将绘制的图片的URL地址,通过网络送给客户端，然后,客户端可以使用img标签，去引用这个验证码的地址;
  • 4.后端在绘制完毕验证码之后，注意，随机生成的字母不能丢弃，而是需要保存到Session中;
  • 5.当客户确输入验证码完毕后，提交表单，后端服务器拿到客户端提交过来的验证码,与服务器端的Session中的验证确进行比校

 

Vue生命周期函数

  • beforeCreate（创建前）
  • created（创建后）
  • beforeMount（载入前）
  • mounted（载入后）
  • beforeUpdate（更新前）
  • updated（更新后）
  • beforeDestroy（销毁前）
  • destroyed（销毁后）
钩子函数详情场景备注
beforeCreate实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些 
created实例创建完成后，data、methods 被初始化结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时 
beforeMount挂载初始之前，完成 el 初始化，render 被初次调用也可以发送数据请求在服务器端渲染期间不会被调用
mounted完成挂载获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求在服务器端渲染期间不会被调用
beofreUpdate挂载开始之前调用挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated由于数据更改，重新渲染界面时调用可执行依赖于 DOM 的操作服务器端渲染期间不会被调用
activatedkeep-alive 组件激活时调用 服务器端渲染期间不会被调用
deactivated组件停用时调用 服务器端渲染期间不会被调用
beforeDestroy实例销毁之前调用删除钱发出确认信息；清理定时器服务器端渲染期间不会被调用
destroyed实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁提示已删除服务器端渲染期间不会被调用
errorCaptured当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。修改组件状态2.5.0新增

 

我们可以自己下载vue.js文件也可以直接引用网上的vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>

Vue创建实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue基本代码</title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 导入vue包,在浏览器内存中，就多了一个vue构造函数 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--将来new的vue实例，会控制这个元素中的所有内容-->
		<!--vue实例所控制的这个元素区域，就是我们的V-->
		<div id="app">
			<p> {{ msg }} </p>
		</div>
		
		<script type="text/javascript">
			//创建一个vue实例
			//注意：new出来了的这个vm对象，就是MVVM中的VM调度者
			var vm = new Vue({
				el: '#app',  //表示当前new的这个vue实例，要控制页面上的哪个区域
				data: {  //data属性中，存放的是el中要用到的数据
					msg: '欢迎学习vue'  //通过vue提供的指令，很方便的就能把数据渲染到页面上，不再手动操作DOM元素了
					
				}
			})

		</script>
	</body>
</html>

运行结果：

v-bind和v-on

Vue中拥有v-bind可以用来绑定元素，简写是：属性名；v-on可以用来绑定方法，简写是@方法名

<body>
		<div id="app">
			<p> {{msg}} </p>
			<p v-text="msg"></p>
			<!--v-bind: 可用：来缩写-->
			<p v-html="msg2" v-bind:title="mtitle"></p>
			<!-- v-on: 可用@来缩写 -->
			<input type="button" v-on:click="show" value="按钮" />
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',  
				data: {  
					msg: 'asasfasf5',
					msg2:'<h1>啊话说佛</h1>',
					mtitle:'自定义title'
				},
				methods:{  //这个methods属性中定义了当前vue实例所有可用的方法
					show:function(){
						alert('ololplplp')
					}
				}
			})
		</script>
	</body>

运行结果：

 

跑马灯效果制作

<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 导入vue包,在浏览器内存中，就多了一个vue构造函数 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="滚起来" @click="lang"/>
			<input type="button" value="低调" @click="stop"/>
			<h3>{{ msg }}</h3>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',  
				data: {  
					msg: '猥琐发育，别浪~~~~',
					intervalid: null  //在data上定义定时器id
				},
				methods:{  //这个methods属性中定义了当前vue实例所有可用的方法
					lang(){
//						console.log(this.msg)
						this.intervalid = setInterval( ()=>{
							//获取到头的第一个字符
						var start = this.msg.substring(0,1)
						//获取后面所有字符
						var end = this.msg.substring(1)
						//重新拼接
						this.msg = end + start
						},200)
					},
					stop(){
						clearInterval(this.intervalid)
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

 

 

v-model双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 导入vue包,在浏览器内存中，就多了一个vue构造函数 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<h4>{{ msg }}</h4>
			<!--v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定-->
			<input type="text" :value="msg" style="width: 400px;"/><br /><br />
			<!-- v-model指令可以实现表单元素和model中数据的双向绑定 -->
			<!--注意：v-model只能运用在表单元素中-->
			<input type="text" v-model="msg" style="width: 400px;"/>
			
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',  
				data: {  
					msg:'案说法i沙发上覅是覅司法哦沙发看看'
				},
				methods:{}
			})
		</script>
	</body>
</html>

运行结果：

 

v-for和key

能够将vue中data数据里的数组循环遍历出来，也能够将对象中的键值对显示出来

<body>
		<div id="app">
			<p v-for="(item,i) in list">索引值:{{i}}---{{ item }}</p>
			<p v-for="user in list2">索引值:{{user.id}}---{{ user.name }}</p>
			<p v-for="(val,key) in Users">{{ val }}---{{ key }}</p>
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',  
				data: {
					list:[1,2,3,4,5,6],
					list2:[
						{id: 1,name: 'zc'},
						{id: 2,name: 'zg'},
						{id: 3,name: 'zgc'},
						{id: 4,name: 'zac'}
					],
					Users:{
						id: 0,
						name: '安防监控',
						gender: 'man'
					}
				},
				methods:{
					
				}
			})
		</script>
	</body>

 运行结果：

 

 

一起学习，一起进步 -.- ，如有错误，可以发评论

avatar
文章
阅读
粉丝