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每次都执行，是个方法。

posted @   coderElian  阅读(43)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示