Vue基本使用-02

上节我们讲了什么是mvvm模型，以及我们vue的一些常用指令，今天给大家讲一下vue的基本使用，在将之前我们需要重点讲解我们的一个指令，v-model指令

v-model

v-model 可以在组件上使用以实现双向绑定,什么是双向绑定呢?意思就是当我们的数据发生变化的时候,我们的视图也会跟着变化;视图发生变化的时候,我们的数据也会发生变化

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

话多说直接上代码!!!!!

在这里我们定义了一个input最基本的输入框,唯一的不同是让他对 msg 这个数据进行了双向绑定,并且我们还展示了一下我们的 msg 这个属性的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
	       测试:<input type="text" v-model="msg"><br>
		   {{msg}} 
		</div>
		<script>
			const app=Vue.createApp({
		      data() {
		      	return {
		      		msg:"aaa"	
		      	}
		      }
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

效果：当我们的视图发生了变化,数据也会跟着变化.

这里我们还可以对 <select/>:下拉框 <textarea/>:文本框等做一些常用的案例,我会给大家一一解释我们的意思是什么

我们直接从性别开始:

在这里我们使用的是input的radio属性,声明它是一个单选框,value 是选择的值,这里我们使用的是0或者1,也可以写作男或者女,他们都对sex属性进行了双向绑定,我们标签后面的男或者女是为了在视图中显示,没有任何实际作用,当我们的男被选中,我们的双向绑定就会将被选中的这个值 value 赋值给 sex属性,也就是 sex就是0

爱好:

在这里我们先需要定义一个数组,用来存储我们的爱好,因为我们的爱好不会只有一个的,跟刚才性别的逻辑是一样的,当我们的多选框的某一个被选中之后,会将value的值,存放到我们双向绑定的happy属性中

班级:

我们的下拉框的值只有一个,所以只需要定义一个空字符,将其绑定到下拉框的select上,为什么我们不需要写value属性呢?在我们有开闭标签时,是不需要写任何的value,我们就可以获取到开闭标签中间值的,什么是开闭标签呢？ <option></option>有开始有结束就是开闭标签还有一种方式是<input/> 这个是需要写我们的value属性的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
	       测试:<input type="text" v-model="msg"><br>
		   {{msg}} <br/>
		   性别:<input type="radio" name="sex" value="0" v-model="sex">男
		   <input type="radio" name="sex" value="1" v-model="sex">女
		    <br>
			展示性别: {{sex}}
			<br>
			爱好:
			<input type="checkbox" value="rapper" name="happy" v-model="happy">rapper
			<input type="checkbox" value="打篮球" name="happy" v-model="happy">打篮球
			<input type="checkbox" value="唱" name="happy" v-model="happy">唱
			<input type="checkbox" value="跳" name="happy" v-model="happy">跳
			<br>
			爱好:{{happy}}
			<br>
			班级：<select v-model="aaa">
				<!--为什么不用加value,因为我们的下拉框有默认值,就是没有value的是时候,我们的值就是标签中间的值-->
				<option value="A365">A365</option>
				<option value="A265">A265</option>
				<option value="A165">A165</option>
			</select>
	         {{aaa}}
			 <br>
			 文本框:
			 <textarea v-model="bbb"></textarea>
			 {{bbb}}
		</div>
		<script>
			const app=Vue.createApp({
		      data() {
		      	return {
		      		msg:"aaa",
					sex:"0",
					happy:["rapper"],
					aaa:"A365",
					bbb:"aa"
		      	}
		      }
			
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

v-on

缩写：@
预期：Function | Inline Statement | Object
参数：event
修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

直接上代码!!!

我们直接用的是简写形式,@click,如果不喜欢的话我们可以使用v-on:click,我们只是声明的点击事件,我们还可以声明其他的事件, 语法 v-on:动作=“方法名字(参数)”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="test1()">普通按钮1</button>
			<button @click.once="test2()">once按钮2</button>
			<button @click.left="test3()">left按钮3</button>
			<button @click.right="test4()">right按钮4</button>
		</div>
		<script>
			const app=Vue.createApp({
			methods: {
			 	test1(){
			 		alert("点击事件")
			 	},
				test2(){
					alert("once，只会触发一次")
				},
				test3(){
					alert("left 鼠标左键点击")
				},
				test4(){
					alert("rigth 鼠标右键点击")
				}
			}

	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

简易轮播图

这里我们使用到了 v-bind，以及鼠标点击事件

思路: 通过点击事件,每点一次,照片路径的数组就切换,如果到最后一个照片,索引从0开始切换

这里我们先定义一个数组,里面存放的是我们照片的路径,再定义一个初始为0的索引,让我们的img这个标签的src属性绑定,可以相当于识别出我们的imgs是谁,index是谁,然后就是我们的点击事件,每次点击,索引加一,意思就是本来是 src="imgs[0]",点击一次按钮就是 src="imges[1]"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		<style>
			img{
				width: 100px;
				heigth:100px
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img :src="imgs[index]"/>
			<button @click="changeImge()">切换</button>
		</div>
		<script>
			const app=Vue.createApp({
		      data() {
		      	return {
		      		imgs:["../static/img/1.jpg","../static/img/2.jpg","../static/img/3.jpg","../static/img/4.jpg","../static/img/5.jpg"],
					index:0
		      	}
		      },
			  methods: {
			  	changeImge() {
					if(this.index>=this.imgs.length-1){
						this.index=0
					}else{
						this.index++
					}
			  		
			  	}
			  },
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

watch

watch：用于监听数据的变化，当数据发送变化的时候,我们可以进行一些逻辑操作.

这里我们的案例是: 当m 这个属性发生变化的时候，km也随着变化,我们输入2000m,km的输入框会变成2,输入3000m,km的输入框会变成3……

我们的watch是一个属性,属性里面是我们监听的哪个属性 属性名（新值,旧值）{ 逻辑代码 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		<style>
			img{
				width: 100px;
				heigth:100px
			}
		</style>
	</head>
	<body>
		<div id="app">
			m:<input type="text" v-model="m"><br>
			km:<input type="text" v-model="km"><br>
		</div>
		<script>
			const app=Vue.createApp({
		      data() {
		      	return {
		      		m:"1000",
					km:"1"
		      	}
		      },
			watch: {
				m(newValue, oldValue) {
				this.km=this.m/1000
				}
			},
		
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

computed

计算属性是vue的强大功能之一,假如我们的逻辑代码中只需要拿到一个值,都可以放在我们的计算属性之中,计算属性的结果会被缓存，也就是说,当第一次调用的时候,才会被计算,计算之后被放在缓存之中，为我们节省了许多的资源,只要内部的数据发生变化,还是会重新进行计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
		 {{add()}}
         {{add()}}
		 {{sex}}
		 {{sex}}
		 {{sex}}
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						idcard:"410424200101274021"
					}
				},
		     	methods: {
			 	add(){
			 		console.log("方法执行")
					return this.idcard.substr(16,1)%2==0?"女":"男";
			 	}
			},
			computed: {
				sex() {
					console.log("计算属性执行")
					return this.idcard.substr(16,1)%2==0?"女":"男";
				}
			},

	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

我们是调用了两次方法,三次计算属性,我们可以发现计算属性只是被调用了一次,其他都是从缓存里拿的

component组件

组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。我们实例化的Vue对象就是一个组件，而且是所有组件的根组件 ,在我的理解看来,组件就是一个标签,这个标签内有什么需要你自己定义,然后向拼积木一样,拼起来搭建一个自己的网站

每个组件都会有自己的方法以及数据,并且他们是不会互相干涉的,当两个重复的组件使用时,数据是不会共享的

全局组件

my-test就是我们组件的名字自定义的标签,官方建议我们使用 xx-xx的形式来写,或者是驼峰命名的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		
	</head>
	<body>
		<div id="app">
				<my-test></my-test>
				<my-test></my-test>
				<my-test></my-test>
		</div>
		<script>
			const app=Vue.createApp()		
	        /*  定义组件  全局组件 */
	             app.component("my-test",{
	                 data(){
	                     return {
	                         name:"test"
	                     }
	                 },
	                 template:
	                `<div>
	                     <div>我就是一个测试</div>
	                     <button @click='test'>按钮</button>
	                 </div>`
	                 ,
	                 methods:{ 
	                     test(){
	                         alert("这就是一个测试的按钮呀  "+this.name)
	                     }
	                 }
	             })
		 app.mount("#app")
		</script>
	</body>
</html>

局部组件

在vue的实例对象中内部注册我们的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		
	</head>
	<body>
		<div id="app">
			<xue-cheng></xue-cheng>
		</div>
		<script>
			const app=Vue.createApp({
		      components:{
				  "xue-cheng":{
					  template:"<h1>111</h1>"
				  }
			  }	
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>