vue.js学习笔记（01）

最新推荐文章于 2024-10-09 10:13:02 发布

FUYUR

最新推荐文章于 2024-10-09 10:13:02 发布

阅读量216

点赞数

文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/FUYUR/article/details/107290583

版权

vue.js学习笔记（01）

1、什么是vue.js

vue.js是目前最火的前端框架，react是最流行的前端框架，除了开发网站，还可以开发手机APP，vue语法需要借助weex。

vue.js和Angular.js、React.js并称为前端三大主流框架

vue.js是一套构建用户界面的框架，只关注视图层，容易上手，便于与第三方库或既有项目整合。（vue有配套第三方库，可以整合做大型项目的开发）

2、为什么要学习流行框架

提高开发效率的发展历程：原生js->Jquery之类的类库->前端模版引擎->Angular.js/Vue.js（减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【只需关心数据的业务逻辑，不必关心DOM如何渲染】）

3、框架和库的区别

框架：是一套完整的解决方案；对项目的入侵性较大，项目如果需要更换框架，则需要重新架构整个项目

库（插件）：提供某一个小功能，对项目的侵入性较小，如果库无法完成某些需求，可以很容易切换到其他库实现需求

4、Node（后端）中的MVC与前端中的MVVM之间的区别

MVC是后端的分层开发概念;
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分：Model、View、VM ViewModel
在这里插入图片描述

5、Vue.js基本代码和MVVM之间的对应关系

在这里插入图片描述

定义一个基本的vue代码结构
1、导入vue.js包
2、创建一个vue的实例

6、讲解v-cloak、v-text、v-html、v-on的基本使用

插值表达式和v-text
插值表达式：<p>++++++++{{msg}}--------</p>
v-text：<h4 v-text="msg">======</h4>
v-cloak 解决插值表达式闪烁的问题
<p v-cloak>{{msg}}</p>
v-html 插值表达式和v-text指令被直接解析为了字符串元素。对此Vue提供了另外一个指令：v-html解析了标签属性
<p v-html="msg2"></p>
v-bind vue提供的属性绑定机制缩写是：
<input type="button" value="按钮1" v-bind:title="mytitle + '123'" />
<input type="button" value="按钮1" :title="mytitle + '123'" />
v-on VUE提供的时间绑定机制缩写是 @
<input type="button" value="按钮1" :title="mytitle + '123'" v-on:click="show" />
<input type="button" value="show1" :title="mytitle + '123'" @click="show"/>

7、总结

1、如何定义一个基本的VUE代码结构
2、插值表达式和v-text
3、v-cloak
4、v-html
5、v-bind vue提供的属性绑定机制缩写是：
6、v-on VUE提供的时间绑定机制缩写是 @

8、案例：跑马灯效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1、导入vue.js包 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 2、创建一个要控制的区域 -->
		<div id="app">
			<input type="button" value="跑马灯" @click="paomadeng"/>
			<input type="button" value="停止" @click="stop"/>
			
			<h4>{{msg}}</h4>
		</div>
		<script>
			//注意：在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名
			//或this.方法名来进行访问，这里的this.就表示我们new出来的vm实例对象
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'跑马灯跑马灯，等等等等',
					intervalId:null//在data上定义 定时器Id
				},
				methods:{
					paomadeng(){
						//console.log(this.msg)
						//获取到头的第一个字符
						//this
						if(this.intervalId != null) return;
						this.intervalId = setInterval(()=>{
							var start = this.msg.substring(0,1)
							//获取到后面的所有字符
							var end = this.msg.substring(1)
							//重新拼接得到新的字符串，并赋值给this.msg
							this.msg = end + start
						},400)
						
						//注意：vm实例，会监听自己身上data中的所有数据的改变，
						//只要数据一发生变化，就会吧最新的数据，从data上同步到页面中去
						//好处：程序员只需要关心数据，不需要考虑渲染Dom页面
					},
					stop(){//停止定时器
					
						clearInterval(this.intervalId)
						//每当清除了定时器之后，需要重新把intervalId置为null
						this.intervalId = null;
					}
				}
			})
			
			//分析：
			//1、给按钮，绑定一个点击事件 v-on @
			//2、在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的
			   //substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；
			//3、为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去；
		</script>
	</body>
</html>

9、Vue指令之v-on的缩写和事件修饰符

事件修饰符：

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

10、Vue指令之v-model和双向数据绑定

<!-- 将来new的Vue实例，会控制这个元素中的所有内容 -->
		<div id="app">
			<h4>{{msg}}</h4>
			<!-- v-bind只能实现数据的单向绑定，从m自动绑定到v -->
			<input type="text" v-blind:value="msg" style="width: 100%;" />
			<!-- 使用v-model指令，可以实现表单元素和model中数据的双向绑定-->
			<!-- 注意：v-model只能运用在表单元素中 -->
			<!-- input（radio,text,address,email...） select   checkbox   textarea -->
			<input type="text" v-model="msg" style="width: 100%;" />
		</div>
		
		<script>
			//2、创建一个vue的实例
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'大家都是好学生'
				},
				methods:{}
			})
			
		</script>

11、案例：简易计算机

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 1、导入vue.js包 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 将来new的Vue实例，会控制这个元素中的所有内容 -->
		<div id="app">
			<input type="text" v-model="n1" />
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2" />
			
			<input type="button" value="="  @click="calc"/>
			
			<input type="text" v-model="result" />
		</div>
		
		<script>
			//2、创建一个vue的实例
			var vm = new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					result:0,
					opt:'+'
				},
				methods:{
					calc(){//计算器算数方法
					// 	switch(this.opt){
					// 		case '+':
					// 		this.result=parseInt(this.n1)+parseInt(this.n2)
					// 		break;
					// 		case '-':
					// 		this.result=parseInt(this.n1)-parseInt(this.n2)
					// 		break;
					// 		case '*':
					// 		this.result=parseInt(this.n1)*parseInt(this.n2)
					// 		break;
					// 		case '/':
					// 		this.result=parseInt(this.n1)/parseInt(this.n2)
					// 		break;
					// 	}
					
					//投机取巧方式，正式开发少用
					var codeStr = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
					this.result = eval(codeStr)
					}
				}
			})
			
		</script>
	</body>
</html>