腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue.js中的下載和調(diào)用方式

更新時(shí)間：2022年11月19日 09:46:38 作者：盛世如戀

這篇文章主要介紹了Vue.js中的下載和調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、在官網(wǎng)下載vue.js文件

點(diǎn)擊前往官網(wǎng)下載安裝 — Vue.js

下滑找到上圖處，點(diǎn)擊“開發(fā)版本”下載之后就會(huì)得到vue.js，將該文件放置在自己項(xiàng)目中。在創(chuàng)建index.html導(dǎo)入vue.js。

二、聲明Vue對(duì)象

格式：

var app = new Vue( json對(duì)象);

如:

var app = new Vue({
el: "#id",?????//html中需要雙向綁定的id名稱???element的縮寫
data:{
???????message:"zhangsan",??????//字段名: 值
????????????????}
?????})

這里注意一下語法格式，傳入的是js對(duì)象。每個(gè)key : value 之間需要用 , 來連接，不然會(huì)報(bào)錯(cuò)的。

代碼示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script>
			const app = new Vue({
				el:"#app",  //#id
				data:{
					message:"zhangsan",
					age:10
				}
				
			});
			
		</script>
	</body>
</html>

Mustache 插值語法 {{字段名}}

在雙向綁定下的id標(biāo)簽下的子標(biāo)簽都可以通過{{ 字段名 }}來訪問Vue對(duì)象的值。在頁面上使用會(huì)自動(dòng)替換為字段名的值的文本。

例如：

在{{}}內(nèi)可以進(jìn)行字符串拼接，但變量名會(huì)在data內(nèi)尋找是否存在，如果不存在不會(huì)自動(dòng)同步vue中的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div >{{message+age}}</div>
			<div >{{message}}-{{age}}</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",  //#id
				data:{
					message:"zhangsan",
					age:10
				}
				
			});
			
		</script>
	</body>
</html>

頁面效果：

我們可以通過控制臺(tái)修改字段的值從而會(huì)動(dòng)態(tài)的修改頁面的值!!!

通過需要調(diào)用Vue內(nèi)的某個(gè)字段，可以用vue字段名.$data.字段名來訪問或者修改。因?yàn)槊恳粋€(gè)字段都放在data對(duì)象內(nèi)，之所以要加上$，是為了防止污染命名。
當(dāng)我們從控制臺(tái)修改message字段的值,頁面也會(huì)自動(dòng)更新。

控制臺(tái)輸入：

頁面顯示：

三、Vue修飾符

1. v-once

使{{}}內(nèi)的值不能被修改

按照上述代碼，我們進(jìn)行稍作修改。

<div v-once>{{message+age}}</div>
<div >{{message}}-{{age}}</div>

示例：我們通過控制臺(tái)修改message的值。

2.v-pre

{{}}將不會(huì)被Vue替換，直接會(huì)顯示{{字段}}的文本

按照上述代碼，我們進(jìn)行稍作修改。

<div v-pre>{{message+age}}</div>
<div >{{message}}-{{age}}</div>

效果展示：

3.v-html = "字段名" 和 v-text = "字段名"

v-html = '"字段名"將字段名對(duì)應(yīng)的值替換成html解析。v-text = '"字段名"將字段名對(duì)應(yīng)的值替換成文本解析。

代碼示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div >{{thtml}}</div>
			<div v-text="thtml">1</div>
			<div v-html="thtml">2</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",  //#id
				data:{
					message:"zhangsan",
					age:10,
					thtml:"<span style='color:red'>哇哦</span>"
				}
				
			});
			
		</script>
	</body>
</html>

頁面效果：

四、函數(shù)

Vue將函數(shù)放置在data對(duì)象同級(jí)的methods中。函數(shù)之間都是用逗號(hào)相隔。

可以用通過{{}}方式調(diào)用，如: {{函數(shù)名() }}

定義方式：

1.函數(shù)名: function(){

}

2.函數(shù)名(){

}

代碼示例：

	<body>
		<div id="app">
			<div >{{getMessage()}}</div>
			<div >{{getAge()}}</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",  //#id
				data:{
					message:"zhangsan",
					age:100
				},
				methods:{
					getMessage:function(){
						return this.message;
					},
					getAge:function(){
						return this.age;
					}
				}
				
			});
			
		</script>
	</body>

頁面效果：