• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue–学习(一)

开发技术 开发技术 3小时前 1次浏览

一、vue介绍

除了这些前端框架

vue是一个渐进式的js框架,只关注视图层,视图和数据是分离的。

1.vue的快速开始

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title>快速开始</title>
	</head>
	<body>
		<div id="app">
			<!--通过差值表达式来获取vue对象中提供的数据-->
			欢迎你!{{name}}!年龄是:{{age}}
		</div>
		
		<!--引入外部的vue.js文件,页面就可以使用vue框架-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!--使用js来创建vue对象,提供数据-->
		<script>
			new Vue({
				el:'#app',   //绑定页面上id是app的元素
				data:{       //提供数据
					name:'小明',
					age:20
				}
			})
		</script>
	</body>
</html>

2.cdn内容分发

网络

vue--学习(一)

3.vue中的MVVM双向数据绑定模式

vue--学习(一)

二、Vue中的关键字

1. v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体验MVVM</title>
	</head>
	<body>
		<div id="app">
			
			{{name}}<br/>
			<input type="text" v-model="name"/>
			
		</div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{       //提供数据
				name:'小明',
				age:20
			}
		})
	</script>
</html>

将html标签的value属性值与vue对象中的属性值进行绑定,实现双向数据绑定的效果

2.v-on

在html标签上绑定事件,与普通绑定事件的不同之处在于v-on绑定的事件发生后的响应行为是vue对象中定义的方法。“v-on:“ 可以被 “@”替代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
	</head>
	<body>
		<div id="app">
			
			{{name}}<br/>
			<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/>
			
		</div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{       //提供数据
				name:'小明',
				age:20
			},
			methods:{
				sayHi:function(){
					alert("hello!!!");
				},
				changeName:function(){
					console.log(this.name);
				}
			}
		})
	</script>
</html>

3.v-bind

当html标签内的属性值需要使用vue中的属性值,就不能使用差值表达式来获取了,因为差值表达式只能写在视图层的html标签外。因此,需要通过v-bind关键字来实现。“v-bind:”可以被简写成”:”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind</title>
	</head>
	<body>
		<div id="app">
			
			{{name}}<br/>
			<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
			<a v-bind:href="link">baidu</a><br/> <!--使用v-bind获取vue中对象的属性值-->
			<a :href="link">baidu</a><!--v-bind简写-->
			
		</div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{       //提供数据
				name:'小明',
				age:20,
				link:"http://www.baidu.com"
			},
			methods:{
				sayHi:function(){
					alert("hello!!!");
				},
				changeName:function(){
					console.log(this.name);
				}
			}
		})
	</script>
</html>

4. v-once

当前的值出现后就不会再更改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-once</title>
	</head>
	<body>
		<div id="app">
			
			{{name}}<br/>
			<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
			<a v-bind:href="link">baidu</a><br/>
			<a :href="link">baidu</a><br/>
			<p v-once>{{name}}</p>
			
		</div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{       //提供数据
				name:'小明',
				age:20,
				link:"http://www.baidu.com"
			},
			methods:{
				sayHi:function(){
					alert("hello!!!");
				},
				changeName:function(){
					console.log(this.name);
				}
			}
		})
	</script>
</html>

5.v-html 和 v-text

v-html会把文本显示成html标签,而v-text只会按照文本来显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-html & v-text</title>
	</head>
	<body>
		<div id="app">
			
			{{name}}<br/>
			<input type="text" @input="changeName()" v-on:click="sayHi()" v-model="name"/><br/>
			<a v-bind:href="link">baidu</a><br/>
			<a :href="link">baidu</a><br/>
			<p v-once>{{name}}</p><br/>
			<p v-html="finishedlink"></p><br/>
			<p v-text="finishedlink"></p><br/>
			
			
		</div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{       //提供数据
				name:'小明',
				age:20,
				link:"http://www.baidu.com",
				finishedlink:"<a href='http://www.baidu.com'>百度</a>"
			},
			methods:{
				sayHi:function(){
					alert("hello!!!");
				},
				changeName:function(){
					console.log(this.name);
				}
			}
		})
	</script>
</html>

三、vue中的事件

1.事件的三大部分

  • 事件的触发条件的设置
  • 事件的参数传递
  • 事件的响应行为

2.vue中的事件绑定、传参、响应行为的例子

  • 案例一: 通过button点击,传递参数给increase,增加count的值
  • 案例二:给p标签设置鼠标移动的事件监听,响应行为是获取当前鼠标的x和y轴坐标,赋值给x和y
  • 案例三:在p标签内部创建span,用来阻止事件冒泡。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的事件</title>
	</head>
	<body>
	     <div id="app">
			 {{count}}
	     	<button type="button" v-on:click="increase(2)">click</button>
			<p v-on:mousemove="mo">
				mx:{{x}}<br/>
				my:{{y}}<br/>
				<span v-on:mousemove="dummy">停止鼠标移动</span>
			</p>
	     </div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{   
				count:0,
				x:0, //当前鼠标x轴的坐标
				y:0  //当前鼠标y轴的坐标
			},
			methods:{
				increase:function(step){
					this.count+=step;
				},
				mo:function(event){//event 内置参数
					 this.x = event.clientX;
					 this.y = event.clientY;
				},
				dummy:function(event){
					event.stopPropagation();//调用event内置方法停止
				}
			}
		})
	</script>
</html>

3.事件修饰符

可以通过事件修饰符来修饰某个事件的具体的行为。

比如在这个例子中,对键盘弹起的事件明确修饰的是enter键的弹起。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件修饰符</title>
	</head>
	<body>
	     <div id="app">
			<input type="text" v-on:keyup.enter="submit" />
	     </div>
	</body>
	<!--引入外部的vue.js文件,页面就可以使用vue框架-->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!--使用js来创建vue对象,提供数据-->
	<script>
		new Vue({
			el:'#app',   //绑定页面上id是app的元素
			data:{   
			},
			methods:{
				submit:function(){
					alert("完成注册!");
				}
			}
		})
	</script>
</html>


程序员灯塔
转载请注明原文链接:vue–学习(一)
喜欢 (0)