VueJS（二）

最新推荐文章于 2024-03-12 16:12:37 发布

原创最新推荐文章于 2024-03-12 16:12:37 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VueJS 专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解Vue.js基础知识，包括插值与表达式、过滤器、指令与事件、计算属性及类与样式绑定等内容，帮助初学者快速掌握Vue.js核心概念。

今天将继续学习vue的基础知识

插值与表达式

使用{{ }}来显示绑定的数据，这一点和我之前学的AngularJS类似，不过ng首先你要创建ng-app对象

	<body>
		<div id="app">
			<span v-html="link"></span>
		</div>
		<script>
			var app= new Vue({
				el:'#app',
				data:{
					link:'<a href="#">这是一个</a>'
				}
			})
		</script>
	</body>

这样通过v-html可以直接输出渲染后的DOM
使用v-pre的话就是直接输出未编译的html，额，这个不编译指的是元素的值不替换，html渲染还是会进行的，用了v-html后，标签写的内容就直接会被无视，只显示=的内容渲染

过滤器
Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置

<body>
		<div id="app">
			{{date|formatDate}}
		</div>
		<script>
			var padDate = function(value){
				return value <10 ?'0'+value : value;
			};
			var app = new Vue({
				el:'#app',
				data:{
					date:new Date()
				},
				
				filters:{
					formatDate:function (value){
						var date = new Date(value);
						var year = date.getFullYear();
						var month =padDate(date.getMonth()+1);
						var day = padDate(date.getDate());
						var hours = padDate(date.getHours());
						var minutes = padDate(date.getMinutes());
						var seconds = padDate(date.getSeconds());
						return year +'-' +month +'-' +day +' ' +hours+ ":" +minutes +':' +seconds;
 					}
				},
				mounted:function (){
					var _this = this;
					this.timer = setInterval(function(){
						_this.date = new Date();
					},1000);
				},
				beforeDestroy :function(){
					if(this.timer){
						clearInterval(this.timer);
					}
				}
			})
		</script>

上面的代码，他在data后面加上formatData，然后在vue实例对象中添加filters，里面定义formatData，它里面这个是一个函数的形式，还有一个return的返回值，表示最终输出的格式

指令和事件
指令，指得过AngularJS吗？

前面已经接触了很多指令，都是v-开头，html、bind、if等
指令的主要职责就是当表达式的值改变的时候，将某些行为应用到DOM上，这个和ng还是有点区别的，ng我记得是为了在html中实现js的功能，所以大量应用指令

v-if 条件判断，配合一起用的还有v-else，这两个如果一起用的话，要注意两个元素之间是不能有其他元素的

v-bind 绑定，不多说

v-on 也是绑定，它用于绑定监听器，比如按钮

<button v-on:click = "handleClose">点击</button>

后面在vue实例中methods里面再写函数handleClose就可以搞定了

计算属性
vue的计算可以在实例中添加computed对象

class、style的绑定

<div :class="{'active':isActive}"></div>

类似这样的：class，绑定一个class对象，isActive的值是一个布尔值，true or false
active是一个类名，他的生效与否就取决于它冒号后面的值了

：class可以和普通的class=“ ”共存

：class后面还可以跟数组甚至三元表达式

使用style就直接绑定内联样式

：style=“{ ： }”
就里面的内容需要用花括号括起来，其他的和直接用没区别，额，还有一点是它可以：后面的具体样式可以用变量代替，然后再在vue的实例中data赋值就可以了。同样也可以以写成数组形式

内置指令
v-cloak
它不需要表达式，他会在vue实例结束编译的html元素移除，经常和css的display：none配合
可以起到防止闪动的效果

v-once
也不需要表达式
表示只渲染一次，第二次改变值就无效了