前端三大框架之Vue学习之入门

最新推荐文章于 2024-05-02 13:13:31 发布

JavaStudyha

最新推荐文章于 2024-05-02 13:13:31 发布

阅读量209

点赞数

分类专栏： Vue 文章标签： vue html5 javascript css

本文链接：https://blog.csdn.net/a23352321/article/details/107382973

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js学习之入门

1.Node(后端)中的MVC与前端中的MVVM之间的区别
2.Vue基本代码和MVVM之间的对应关系
3.v-cloak、v-text、v-html，v-bind、v-on的基本使用
4.制作跑马灯效果
5.v-on的事件修饰符
6.Vue指令之v-model和双向数据绑定
- 6.1简易计算器
7.在Vue中使用样式
8.Vue指令之v-for、v-if、v-show
- 8.1 v-for
- 8.2 v-if和v-show
9.总结

1.Node(后端)中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层分为了Model、View、VM ViewModel。
为什么有了MVC还要有MVVM。

2.Vue基本代码和MVVM之间的对应关系

<body>
	<!-- 将来new的Vue实例会控制这个元素中的所有内容 -->
	<!-- Vue实例所控制的这个元素区域，就是我们的V -->
	<div id="app">
		<p>{{message}}</p>
	</div>
	
	<!-- 1.引入Vue CDN -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//2.创建一个Vue的实例
		//当我们导入包之后,在浏览器的内存中,就多了一个Vue的构造函数
		//注意:我们new出来的这个Vm对象,就是MVVM中的VM调度者
		
		var vm=new Vue({
			el:'#app', //表示:当前我们new的这个Vue实例要控制页面上的哪个区域
			
			//这里的data就是MVVM中的m,专门用来保存每个页面的数据
			data:{//data属性中,存放的是el中要用到的数据
				message:'欢迎学习Vue',//通过Vue提供的指令,很方便就能把数据渲染到页面上,
				//程序员不再手动操作DOM元素了【前端框架不提倡我们去手动操作DOM元素了】
			}
		})
	</script>
</body>

3.v-cloak、v-text、v-html，v-bind、v-on的基本使用

插值表达式和v-text
v-cloak
v-html
v-bind Vue提供的属性绑定机制简写：
v-on Vue提供的事件绑定机制简写@

<style>
	[v-cloak]{
		display: none;
	}
</style>
<body>		
	<div id="app">
		<!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
		<p v-cloak>{{message}}</p>
		
		<!-- 默认v-text是没有闪烁问题的 -->
		<h4 v-text="message"></h4>
		<!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，
		不会将整个元素清空 -->
		
		<p>{{message2}}</p>
		<h4 v-text="message2"></h4>
		<div v-html="message2"></div>
		<!-- v-html可以渲染html元素，而v-text和插值表达式只会直接输出内容不会进行渲染 -->
		
		<!-- v-bind:是Vue中提供的用于绑定属性的指令，v-bind会将mytitle解析为一个变量，
				 v-bind中可以写合法的JS表达式 -->
		<input type="button" value="v-bind" v-bind:title="mytitle +'123'"><br><br>
		<!-- v-bind可以被简写为 :要绑定的属性 -->
		<input type="button" value="v-bind简写" :title="mytitle +'简写的v-bind'"><br><br>
		
		<!-- 点击按钮弹出一句话 -->
		<!-- Vue中提供了v-on：事件绑定机制 ，当点击按钮时就会执行show方法-->
		<input type="button" value="v-on" v-on:click="show"><br><br>
		<!-- v-on的简写形式： @ -->
		<input type="button" value="v-on简写" @click="show">
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				message:'Hello World!',
				message2:'<h1>我是h1</h1>',
				mytitle:'自定义title'
			},
			methods:{//methods属性中定义了当前Vue实例所有可用的方法
				show:function(){
					alert("Hello!")
				}
			}
		})
	</script>
</body>

4.制作跑马灯效果

分析：
1.给按钮绑定一个点击事件，点击启动按钮文字有一个跑马灯效果，点击停止按钮停止
2.在按钮的点击事件处理函数中，写相关的业务逻辑代码：拿到message字符串，调用字符串的substring方法截取字符串，将头一个字符放到最后
3.为了实现点击按钮自动截取功能，需要将代码放到定时器中

<head>
	<meta charset="utf-8">
	<title>制作跑马灯效果</title>
</head>
<body>
	
	<!-- 创建一个要控制的区域 -->
	<div id="app">
		<input type="button" value="启动" @click="show">
		<input type="button" value="停止" @click="stop">
		<p>{{message}}</p>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		//注意:在VM实例中,如果想要获取data上的数据,或者想要调用methods中的方法,
		//必须通过this.数据属性名或this.方法名来进行访问,这里的this就表示我们new出来的实例对象
		var vm=new Vue({
			el:'#app',
			data:{
				message:'猥琐发育，别浪！',
				intervalId:null//在data上定义定时器id
			},
			methods:{
				show(){
					//当多次点击启动按钮时,会创建多个定时器从而无法停止
					//所以需要在开始前判断是否已经有一个定时器
					if(this.intervalId != null) return;
					
					this.intervalId=setInterval(()=>{
						console.log(this.message);
						//截取头一个字符
						var start=this.message.substring(0,1);
						//截取后面的字符
						var end=this.message.substring(1);
						//拼接字符串
						this.message=end+start;
					},300)
				},	
				//注意:VM实例会监听自己身上data中所有数据的改变,只要数据一发生变化,
				//就会自动把最新的数据从data上同步到页面上去
				//【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
				
				stop(){//停止定时器
					clearInterval(this.intervalId);
					//停止定时器后需要将intervalId设为null,否则将不能启动
					this.intervalId=null;
				}
			}
		})
	</script>
</body>

5.v-on的事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次

<style>
	.inner{
		height: 150px;
		background-color: bisque;
	}
</style>
<body>

	<div id="app">
		<!-- 使用.capture 事件将会优先触发，即先输出div在输出btn-->
		<div class="inner" @click="divHandler">
			
			<input type="button" value="戳一下" @click="btnHandler">
			<!-- 当点击按钮时，会输出div和按钮的点击事件，这称为事件的冒泡机制 -->
			<!-- 添加stop可以阻止事件的冒泡 -->
			<input type="button" value="阻止冒泡" @click.stop="btnHandler">
			
			<!-- 使用.prevent阻止默认行为,即只触发点击事件不跳转页面 -->
			<a href="http://www.baidu.com" @click="linkClick">百度一下</a>
			<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
			
			<!-- 使用.self只有点击div时才会触发事件 -->
			<!-- <div class="inner" @click.self="divHandler">
				<input type="button" value="戳一下" @click="btnHandler">
			</div> -->
			
			<!-- 事件修饰符可以串联，.once只执行一次，下一次将不会触发事件 -->
			<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度一下</a>
			
			<!-- .stop和.self的区别 -->
			<!-- .stop会阻止所有的冒泡行为 -->
			<!-- .self只会阻止自己身上的冒泡行为 -->

		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{

			},
			methods:{
				divHandler(){
					console.log("触发了div的点击事件");
				},
				btnHandler(){
					console.log("触发了按钮的点击事件");
				},
				linkClick(){
					console.log("触发了链接的点击事件");
				}
			}
		})
	</script>
</body>

6.Vue指令之v-model和双向数据绑定

<body>
	<div id="app">
		<p>{{message}}</p>
		<!-- v-bind只能实现数据的单向绑定，无法实现数据的双向绑定,不能将input同步到p中 -->
		<!-- <input type="text" v-bind:value="message" /> -->
		
		<!-- 使用v-model实现数据的双向绑定 -->
		<!-- 注意：v-model只能运用在表单元素中 -->
		<!-- input(radio,text,address,email) select checkbox textarea  -->
		<input type="text" v-model="message">
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				message:'hello World！'
			},
			methods:{

			}
		})
	</script>
</body>

6.1简易计算器

<body>
	<div id="app">
		<input type="text" v-model="num1" placeholder="请输入第一个数:" />
		<select v-model="opt">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" v-model="num2" placeholder="请输入第二个数:" />
		<input type="button" value="=" @click="calc" />
		<input type="text" v-model="result" />
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				num1: 0,
				num2: 0,
				result: 0,
				opt: '+'
			},
			methods: {
				calc() {
					switch (this.opt) {
						case '+':
							this.result=parseInt(this.num1)+parseInt(this.num2);
							break;
						case '-':
							this.result=this.num1-this.num2;
							break;
						case '*':
							this.result=this.num1*this.num2;
							break;
						case '/':
							this.result=this.num1/this.num2;
							break;
						default:
							break;
					}
				}
			}
		})
	</script>
</body>

7.在Vue中使用样式

<style>
	.red{color: red;}
	.thin{font-weight: 200;}
	.italic{font-style: italic;}
	.active{letter-spacing: 0.5em;}
</style>
</head>
<body>

	<div id="app">
		<!-- 第一种方式，直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定 -->
		<h1 :class="['thin','italic']">这是一个h1</h1>
		
		<!-- 在数组中使用三元运算符 -->
		<h1 :class="['thin','italic',flag?'active':'']">这是一个h1</h1>
		
		<!-- 在数组中使用对象来代替三元表达式 -->
		<h1 :class="['thin','italic',{'active':flag}]">这是一个h1</h1>
		
		<!-- 直接使用对象时，对象的属性是类名，由于对象的属性可带也可不带引号，
		所以可以省略。属性值是标识符 -->
		<h1 :class="{red:true,active:true,thin:false}">这是一个h1</h1>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				flag:true
			},
			methods:{}
		})
	</script>
</body>

8.Vue指令之v-for、v-if、v-show

8.1 v-for

<body>
		<div id="app">
			
			<p v-for="item in list">{{item}}</p>
			
			<!-- 打印索引值 -->
			<p v-for="(item,i) in list">索引值:{{i}}--{{item}}</p>
			
			<!-- 循环对象数组 -->
			<p v-for="(user,i) in user">索引值：{{i}} -- {{user.id}} -- {{user.name}}</p>
			
			<!-- 注意：在遍历对象身上键值对的时候，在第三个位置还有一个索引 -->
			<p v-for="(val,key,i) in person">索引：{{i}} -- {{val}} -- {{key}}</p>
			
			<!-- 迭代数字,注意：count将从1开始-->
			<p v-for="count in 10">第{{count}}次</p>
			
			<!-- 在组件中使用v-for循环时，必须指定唯一的字符串/数字类型 :key 值 -->
			<!-- 注意：v-for循环的时候，key属性只能使用number获string，
			并且必须使用v-bind属性绑定 -->		
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					list:[1,2,3,4,5,6,7,8],
					user:[
						{id:1,name:'asd1'},
						{id:2,name:'asd2'},
						{id:3,name:'asd3'},
						{id:4,name:'asd4'}
					],
					person:{
						id:1,
						name:'小明',
						sex:'男'
					}
				},
				methods:{}
			})
		</script>
	</body>

8.2 v-if和v-show

<div id="app">
	<!-- <input type="button" value="点击切换" @click="choose"> -->
	<input type="button" value="点击切换" @click="flag=!flag">
	
	<!-- v-if的特点：每次都会重新删除或创建元素 ，有较高的切换性能消耗-->
	<!-- v-show的特点：每次只是切换了元素的display属性，有较高的初始消耗-->
	
	<!-- 如果元素涉及到频繁的切换，最好使用v-show -->
	<!-- 如果元素可能永远也不会显示出来被用户看到，最好使用v-if -->
	<h2 v-if="flag">这是用v-if控制的元素</h2>
	<h2 v-show="flag">这是用v-show控制的元素</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			flag:false
		},
		methods:{
// 					choose(){
// 						this.flag=!this.flag;
// 					}
		}
	})
</script>

9.总结

1.MVC和MVVM的区别
Vue中最基本的代码结构
插值表达式、v-cloak、v-text、v-html、v-bind(缩写是：)、v-on(缩写是@)、v-model、v-for、v-if、v-show
事件修饰符：.stop、.prevent、.capture、.self、.once
el：指定要控制的区域，data对象：指定了控制区域要用到的数据，methods对象：自定义方法
在VM实例中，要访问data中的数据或methods中的方法，必须加this
在v-for要回使用key属性(只接受string/number)
v-model只能用于表单元素
在vue中绑定样式的两种方式：v-bind：class、v-bind：style

JavaStudyha

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端三大框架之Vue学习之入门

Vue.js学习之入门1.Node(后端)中的MVC与前端中的MVVM之间的区别2.Vue基本代码和MVVM之间的对应关系3.v-cloak、v-text、v-html，v-bind、v-on的基本使用4.制作跑马灯效果5.v-on的事件修饰符6.Vue指令之v-model和双向数据绑定4.1简易计算器在Vue中使用样式1.Node(后端)中的MVC与前端中的MVVM之间的区别MVC是后端的分层开发概念MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层分为了Model
复制链接

扫一扫