Javascript

vue基本语法

本文主要是介绍vue基本语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • 插值语法
  • 绑定语法
  • 计算属性

插值语法

  • Mustache（双括号语法）
<div id="app">
	<h2>{{message}}</h2>
	<h2>{{message}},Tolerate!</h2>
	<h2>{{firstName + lastName}}</h2>
	<h2>{{firstName + ' ' +lastName}}</h2>
	<h2>{{firstName}} {{lastName}}</h2>
	<h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			firstName : 'kobe',
			lastName : 'bryant',
			counter : 100
		}
	})
</script>
  • v-once指令
<div id="app">
	<!-- 某些情况下，并不希望数据跟着改变 -->
	<h2 v-once>{{message}}</h2>
</div>
  • v-html指令
<div id="app">
	<!-- 有时候后台返回的我们url直接是一个带标签的链接等，我们希望直接将其解析成html文本 -->
	<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			url : '<a href="https://www.baidu.com">百度一下</a>'
		}
	})
</script>
  • v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>
<!-- 延时加载数据的时候会先将{{message}}渲染出来，并不美观，联合style使用v-cloak会不显示 -->
<div id="app" v-cloak>
	{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
	setTimeout(function (){
		const app = new Vue({
			el : "#app",
			data : {
				message : "你好"
			}
		})
	}, 1000)
</script>
</body>
</html>

绑定语法

  • v-bind指令：动态绑定属性

    • 比如动态绑定a元素的href属性

    • 比如动态绑定img元素的src属性

    • 动态绑定某些类、样式等

    • 缩写：:

基本使用：

<div id="app">
	<img v-bind:src="imgUrl">
	<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			imgUrl : 'https://cn.vuejs.org/images/logo.svg',
			aHref : "https://www.baidu.com"
		}
	})
</script>

操作对象：

<!-- 使用方法 -->
<!-- 和普通类同时存在，并不冲突，都为true会有三个类 -->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">HelloWorld</h2>
<!-- classes是一个计算属性，可以放在method或者computed中 -->
<h2 class="title" :class="classes">HelloWorld</h2>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.active {
			color: red;
		}
		.line {
			color: blue;
		}
	</style>
</head>
<body>

<div id="app">
	<h2 :class="{active:isActive, line:isLine}">{{message}}</h2>
	<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			isActive : true,
			isLine : false
		},
		methods : {
			btnClick : function () {
				this.isActive = !this.isActive;
				this.isLine = !this.isLine
			}
		}
	})
</script>
<!--
<div id="app">
	<h2 :class="classes()">{{message}}</h2>
	<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		data : {
			message : "你好",
			isActive : true,
			isLine : false
		},
		methods : {
			btnClick : function () {
				this.isActive = !this.isActive;
				this.isLine = !this.isLine
			},
			classes : function () {
				return {active: this.isActive, line : this.isLine}
			}
		}
	})
</script>    
-->
</body>
</html>
  • 动态绑定style
<div id="app">
	<!--<h2 :class="key(类名 .class): value(boolead值)">{{message}}</h2>-->
	<!--<h2 :class="key(属性名): value(属性值)">{{message}}</h2>-->
	<h2 :style="{fontSize: '50px'}">{{message}}</h2>
</div>

注:这里的值必须加双引号，才能解析成字符串，包括所有vue的值，都要这样操作，否则会找到data中的变量去

计算属性

  • 某些情况下，我们需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示

    • 比如firstName和lastName两个变量，我们需要完整的展示
    • 如果多个地方都需要完整的名称，我们需要写多个{{firstName}} {{lastName}}

  • 可以将上面代码转换成计算属性：

    • 计算属性是写在实例的computed选项中的：
<div id="app">	
<h2>{{getFullName()}}</h2>	
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js">
</script><script>	
const app = new Vue({		
el : "#app",		
data : {			
firstName : 'Kobe',			
lastName : 'Bryant'		
},		
methods : { 
// 用方法实现			
getFullName() {				
return this.firstName + ' ' + this.lastName			
}		
},		
computed : { 
// 计算属性实现			
fullName : function () {				
return this.firstName + ' ' + this.lastName			
}		
}
	
})
</script>

注：调用计算属性的时候只计算一次，有缓存，而方法每次都要重新计算

  • 计算属性的getter方法和setter方法
<script>
computed : {
  fullName : {
    // 一般不需要使用set方法，所以只使用简写方式，只读属性
    set : function(newValue) {
        const names = newValue.split('  ');
        this.firstName = name[0];
        this.lastName = name[1];
    },
	get : function() {
		return firstName + ' ' + lastName
	}
  }
}
</script>

  • computed和methods的对比

    computed相当于给属性创建get方法，只要值没改变，下次调用这个属性的时候就不会执行。

    methods每次都执行，是个方法。

这篇关于vue基本语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航