Vue.js中的下载和调用方式

更新时间：2022年11月19日 09:46:38 作者：盛世如恋

这篇文章主要介绍了Vue.js中的下载和调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一、在官网下载vue.js文件

下滑找到上图处，点击“开发版本”下载之后就会得到vue.js，将该文件放置在自己项目中。在创建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>

页面效果：

我们可以通过控制台修改字段的值从而会动态的修改页面的值!!!

通过需要调用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>

页面效果：

四、函数

Vue将函数放置在data对象同级的methods中。函数之间都是用逗号相隔。

可以用通过{{}}方式调用，如: {{函数名() }}

定义方式：

1.函数名: function(){

}

2.函数名(){

}

代码示例：

	<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>

页面效果：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现手机号码抽奖上下滚动动画示例
本篇文章主要介绍了vue实现手机号码抽奖上下滚动动画示例。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue中常用的缩写方式
这篇文章主要介绍了vue中常用的缩写方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3根据动态字段绑定v-model的操作代码
最近在学习vue技术，开发表格的时候，想把表格做成组件，那查询条件就需要动态生成，这就遇到一个问题，vue怎么动态给v-model变量值，本文通过实例代码给大家介绍，对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
2022-10-10
vue数据字典取键值方式
这篇文章主要介绍了vue数据字典取键值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue 中 extend 、component 、mixins 、extends 的区别
这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-12-12
使用van-picker 动态设置当前选中项
这篇文章主要介绍了使用van-picker 动态设置当前选中项方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue-devtools的安装与使用教程
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装与使用教程,需要的朋友可以参考下
2023-03-03
Vue中实现v-for循环遍历图片的方法
这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue路由传参页面刷新参数丢失问题解决方案
这篇文章主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中，需要前端调用后端api并进行内容显示，所以本文就介绍了Vue+SpringBoot前后端分离跨域问题，感兴趣的可以了解一下
2021-08-08