Vue学习1_通过vue框架提供的指令实现双向数据绑定,我们前端程序员只需要关心数据的业务逻辑-CSDN博客

本文链接：https://blog.csdn.net/weixin_43190282/article/details/114895712

vue.js：能够帮助我们减少不必要的DOM操作，提高渲染效率；在vue中，一个核心的概念，就是让用户不在操作DOM，释放了用户的双手，让程序员可以更多的时间去关注业务逻辑。

双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】

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

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

MVC 是后端的分层开发概念；
MVVM 是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM 把前端的视图层，分为了三部分 M(Model)、V(View)、VM(ViewModel)

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了 M、V 和 VM 。其中，VM 是 MVVM 思想的核心，因为 VM 是 M 和 V 之间的调度者。前端页面中使用 MVVM 的思想，主要是为了让我们开发者更加方便，因为 MVVM 提供了数据的双向绑定；注意：数据的双向绑定是由 VM 提供的；

Vue 指令：
v-text 与插值表达式的区别：
v-text 会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。

v-bind: 是 Vue 中提供的用于绑定属性的指令，缩写是 :
v-on: 是 Vue 中提供的用于事件绑定的指令，缩写是 @

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
Vue 指令之 v-on 和事件修饰符：

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

<div id="app">
	<!-- 注意：v-bind: 指令可以被简写成 :要绑定的属性 -->
	<!-- v-bind 中，可以写合法的JS表达式 -->
	<input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show">
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			mytitle: '这是一个自己定义的title'
		},
		methods: { // 这个methods属性中定义了当前Vue实例所有可用的方法
			show: function () {
				alert('Hello')
			}
		}
	})
</script>

Vue 指令之 v-model 和双向数据绑定v-model=""
使用 v-model 指令可以实现表单元素和 Model 中数据的双向数据绑定
注意：v-model 只能运用在表单元素中
比如：input select checkbox textarea

Vue 指令之 v-for：in 后面可以放普通数组、对象数组、对象，还可以放数字
注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<p v-for="count in 3">这是第 {{ count }} 次循环</p>

这是第 1 次循环

这是第 2 次循环

这是第 3 次循环

注意：在组件中，使用v-for循环的时候，或者在一些特许情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的字符串/数字类型 :key 值
注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="">
				<label>Id:
					<input type="text" v-model="id">
				</label>
				
				<label>Name:
					<input type="text" v-model="name">
				</label>
				
				<input type="button" value="提交" @click="add">
			</div>
			
			<!-- 注意：v-for 循环的时候，key 属性只能使用 number获取string -->
			<!-- 注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
			<!-- 在组件中，使用v-for循环的时候，或者在一些特许情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
			<p v-for="item in list" :key="item.id">
				<input type="checkbox"/>{{ item.id }} --- {{ item.name }}
			</p>
		</div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					list: [
						{ id: 1, name: '韩非子'},
						{ id: 2, name: '鬼谷子'},
						{ id: 3, name: '盖聂'},
						{ id: 4, name: '子羽'},
						{ id: 5, name: '张良'}
					]
				},
				methods: {
					add() {
						// this.list.push({id: this.id, name: this.name})
						this.list.unshift({id: this.id, name: this.name})
					}
				}
			})
		</script>
	</body>
</html>

v-if 和 v-show的区别：
v-if 的特点：每次都会重新删除或创建元素，有较高的切换性能消耗。
v-show 的特点：每次不会重新进行 DOM 的删除和创建操作，只是切换了元素的 display: none 样式，有较高的初始渲染消耗。
注意：如果元素涉及到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show。如果元素可能永远也不会被显示出来给用户看到，则推荐使用 v-if。

在 VM 实例中，如果想要获取 data 上的数据，或者想要调用 methods中的方法，必须通过 this.数据属性名或 this.方法名来进行访问，这里的 this，就表示我们 new 出来的 VM 实例对象。
注意：VM 实例会监听自己身上 data 中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从 data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染 DOM 页面】

走马灯例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>走马灯</title>
		<script src="./lib/vue.js"></script>
		<style type="text/css">
			h4 {
				color: red;
				border: 2px solid #827593;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="启动" @click="action"/>
			<input type="button" value="停止" @click="stop" />
			<h4>{{ msg }}</h4>
		</div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '本店今日商品大甩卖，全场五折，走过路过不要错过！',
					intervalID: null // 在data中定义 定时器Id
				},
				methods: {
					action() {
						// 开启定时器
						// 判断定时器是否已经开启,不能重复开启
						if (this.intervalID != null) return;
						this.intervalID = setInterval(() => {
							// 获取 第一个字符
							var start = this.msg.substring(0,1)
							// 获取 第一个字符后面的所有字符
							var end = this.msg.substring(1)
							// 重新拼接字符，并赋值给msg
							this.msg = end + start
						},400)
					},
					stop () {
						// 清除定时器
						clearInterval(this.intervalID)
						// 重新赋值给 intervalId 为null
						this.intervalID = null
					}
				}
			})
		</script>
	</body>
</html>