初识Vue.js

最新推荐文章于 2024-05-07 22:11:26 发布

relly0o

最新推荐文章于 2024-05-07 22:11:26 发布

阅读量440

点赞数 1

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42742520/article/details/104879491

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初识Vue.js

简介

简介

vue是一种专注于view+model的前端框架，优点在于简单易学，使用起来极为灵活，响应式数据变化，代码简洁方便，笔者在此记录学习内容。

使用Vue.js

Vue.js有多种安装方式，初学者的话建议在html文件中采用 script标签引入vue.js方式先做初步了解，开发工具首选HBuilderX；

<script src="js/vue.js" type="text/javascript" charset="utf-8"/>

创建Vue实例

var vm = new Vue({
			el: "#app",//指定某个标签元素
			data: {a:1}//数据绑定
		});

1、模板语法 - 插值

vue使用双大括号 { { a } } 的方式进行参数赋值：示例中div标签的文本内容就是1；

<div id="app"> {{ a }} </div>

<script type="text/javascript">
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: {a:1}//数据绑定
			});
</script>

当某个时期如果我们想要对a的值发生改变，可以使用vue的实例对象进行重新赋值，示例所示a的值发生变化为’test’，div中就会显示为test，这就是响应数据改变：

<div id="app"> {{ a }} </div>

<script type="text/javascript">
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: {a:1}//数据绑定
			});
	vm.a = 'test';//或vm.$data.a='test'
</script>

当然，如果我们对于标签下的某个值不想发生响应数据改变，可以再标签中添加v-once属性：

<div id="app" v-once> {{ a }} </div>//此时a的值永远是1

<script type="text/javascript">
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: {a:1}//数据绑定
			});
	vm.a = 'test';//或vm.$data.a='test'
</script>

vue再插值的时候也可以使用JavaScript表达式：

<div id="app"> 
	<p>{{ a }}</p> 
	<p>{{msg.split("").reverse().join("")}}</p>//调用字符串的一些方法
	<p>{{ok=='y'?'yes':'no'}}</p>//三元运算
	<p>{{ num+1 }}</p>//数据运算
</div>
<script type="text/javascript">
	var data = {
			a:1
			msg:'vue',
			ok:'y',
			num:111
	}
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: data//数据绑定
			});
	vm.a = 'test';//或vm.$data.a='test'
</script>

方法

vue实例对象有许多方法，大多都以 $符号开头，比如 v m .$ data，就是获取实例中绑定的数据对象，简单介绍一下 $w a t c h () 方法，$ watch()方法可以在指定某个数据发生改变时获取旧数据和新数据，同事可以执行某个函数，示例：

<div id="app"> {{ a }} </div>

<script type="text/javascript">
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: {a:1}//数据绑定
			});
	vm.a = 'test';//或vm.$data.a='test'
//此时a的值发生了改变
	vm.$watch("a", function(newValue, oldValue) {
		console.log(newValue + "----" + oldValue);//输出  test----1
	})
</script>

2、模板语法 - 指令

指令，是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

(1)、v-bind

v-bind指令是用于绑定元素中的参数，在某个元素中可以进行动态的切换属性或属性的值：

<div id="app"> 
	<p>{{ a }}</p>
	
	<a v-bind:[attr]="url">CSDN-专业的技术社区</a> //Vue实例在创建时会将参数的插入
</div>

<script type="text/javascript">
	var data = {
		a:1,
		attr:'href',
		url:'https://www.csdn.net/'
	}
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: data//数据绑定
			});
</script>

(2)、v-on

v-on指令是用于监听DOM中的事件，可以通过指定事件触发函数：

<div id="app"> 
	<p>{{ a }}</p>
	<div v-on:click="doSomething">//点击时控制台输出内容
		点击事件
	</div>
</div>

<script type="text/javascript">
	var data = {
		a:1,
	}
	var vm = new Vue({
				el: "#app",//指定某个标签元素
				data: data,//数据绑定
				methods:{
					doSomething:function(){
						console.log("触发doSomething事件");
					}
				}
			});
</script>

当事件需要在特定时间发生改变，如点击事件触发完毕，同时元素需要绑定鼠标移出事件，vue可以做到动态改变属性的方式，更换事件：

<div id="app"> 
	<p>{{ a }}</p>
	<div v-on:[event]="doSomething(value)">
		点击事件
	</div>
</div>
<script type="text/javascript">
	var data = {
		a:1,
		event:'click',
		value:1
	};
	var vm = new Vue({
				el:'#app',
				data:data,
				methods:{
					doSomething:function(i){
						if(i==1){
							console.log("触发点击事件");
							this.event="mouseout";
							this.value=2;
						}else{
							console.log("触发鼠标移出事件");
						}
					}
				}
			});
</script>

另外，v-bind和v-on因使用的比较频繁，官方设定的缩写的方法：

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

(3)、v-if

v-if指令，是根据条件判断是否显示该元素：

<div id="app">
	<p v-if="test">这里可以看到哦</p>
</div>

<script>
	var data ={
		test:true
	};
	var vm = new Vue({
		el:"#app",
		data:data
	});			
</script>

3、class和style绑定

class样式可以在元素里根据参数进行动态绑定，绑定方式有两种：

	<style>
		.box{
			background-color: beige;
		}
		.font{
			color:red;
		}
	</style>
	
	<body>
		<div id="app">
			<!-- 第一种 -->
			<div v-bind:class="{'box':isbox,'font':isfont}">
				hello,vue!!!
			</div>
			<!-- 第二种 -->
			<div v-bind:class="[isbox?'box':'',false?'font':'']">
				hello,vue!!!
			</div>
		</div>
		
		<script>
			var data ={
				isbox:true,
				isfont:true
			};
			var vm = new Vue({
				el:"#app",
				data:data
			});			
		</script>
	</body>

style内联样式

		<div id="app">
			<!-- 第一种 -->
			<div v-bind:style="{color:redColor,fontSize:size}">
				hello,vue!!!
			</div>
			<!-- 第二种 -->
			<div v-bind:style="[styleObject]">
				hello,vue!!!
			</div>
		</div>
		
		<script>
			var data ={
				redColor:'red',
				size:'20px',
				styleObject:{
					color:'blue',
					fontSize:'15px',
				}
			};
			var vm = new Vue({
				el:"#app",
				data:data
			});			
		</script>

4、条件渲染

（1）v-if、v-else-if、v-else

v-if等指令，是根据条件判断是否显示该元素，与JavaScript的if else表达式相同：

<div id="app">
	<div>
		<p v-if="test==1">v-if</p>
		<p v-else-if="test==2">v-else-if</p>
		<p v-else>v-else</p>
	</div>
</div>

<script>
	var data ={
		test:1
	};
	var vm = new Vue({
		el:"#app",
		data:data
	});			
</script>

（2）v-show

v-show也可以做条件渲染，与if-else不同的是，他只是将页面的标签元素hidden，并未正去除：

<div id="app">
	<div>
		<p v-show="test==1">hello,vue!!!</p>
	</div>
</div>
<script>
	var data ={
		test:2
	};
	var vm = new Vue({
		el:"#app",
		data:data
	});			
</script>

此时的P标签被隐藏，从控制台中可以看到：
在这里插入图片描述

5、列表渲染

v-for，遍历数组或map数据，list是数组，map是json数据，

<ul id="app">
	<li v-for="item,index in list" :key="index">
		{{ index }}----{{ item.msg }}----{{ item.r }}
	</li>
	<li v-for="value,key in map" :key="key">
		{{ key }}----{{ value }}
	</li>
</ul>
<script>
	var data ={
		list:[
			{msg:'a',r:'tt'},
			{msg:'b',r:'dd'}
		],
		map:{
			m1:"m1",
			m2:"m2",
			m3:"m3",
			m4:"m4"
		}
	};
	var vm = new Vue({
		el:"#app",
		data:data
	});			
</script>

6、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

到这里