腳本之家服務器常用軟件

快捷導航

Vue.js中的下載和調用方式

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

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

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

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

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

二、聲明Vue對象

格式：

var app = new Vue( json對象);

如:

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

這里注意一下語法格式，傳入的是js對象。每個key : value 之間需要用 , 來連接，不然會報錯的。

代碼示例：

<!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標簽下的子標簽都可以通過{{ 字段名 }}來訪問Vue對象的值。在頁面上使用會自動替換為字段名的值的文本。

例如：

在{{}}內可以進行字符串拼接，但變量名會在data內尋找是否存在，如果不存在不會自動同步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)的修改頁面的值!!!

通過需要調用Vue內的某個字段，可以用vue字段名.$data.字段名來訪問或者修改。因為每一個字段都放在data對象內，之所以要加上$，是為了防止污染命名。
當我們從控制臺修改message字段的值,頁面也會自動更新。

控制臺輸入：

頁面顯示：

三、Vue修飾符

1. v-once

使{{}}內的值不能被修改

按照上述代碼，我們進行稍作修改。

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

示例：我們通過控制臺修改message的值。

2.v-pre

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

按照上述代碼，我們進行稍作修改。

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

效果展示：

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

v-html = '"字段名"將字段名對應的值替換成html解析。v-text = '"字段名"將字段名對應的值替換成文本解析。

代碼示例：

<!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對象同級的methods中。函數(shù)之間都是用逗號相隔。

可以用通過{{}}方式調用，如: {{函數(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>

頁面效果：