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

目录
  • 一、在官网下载vue.js文件
  • 二、声明Vue对象
  • 三、Vue修饰符
    • 1. v-once
    • 2.v-pre
    • 3.v-html = "字段名" 和 v-text = "字段名"
  • 四、函数

一、在官网下载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>

页面效果：

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

赞 (0)

相关推荐

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • vue.js根据图片url进行图片下载

    vue.js根据图片url进行图片下载

    最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题: 这是后台返回来的json数据(防止泄露重要信息IP地址打码了): 我在html里的引用是这样的: <a @click="downCom" > 下载执照 <i class="icon-down"></i> </a>

  • vue.js 使用axios实现下载功能的示例

    本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(frame.a)和POST(form)请求具有如下特点: response会交由浏览器处理 response内容可以为二进制文件.字符串等 Ajax请求具有如下特点: response会交由Javascript处理 response内容仅可以为字符串 因此,Ajax本身无法触发浏览器的下载功能. Axi

  • VUE脚手架的下载和配置步骤详解

    VUE脚手架下载 1.第一步全局安装脚手架 cnpm i @vue/cli -g 2.第二步创建项目 创建文件夹,打开文件命令窗口 vue create 自己创建的项目名 3. 有两个选项,选择第二个,也就是自己选择配置 4. 选择自己需要的配置 5. 进行下一步,选择 Y 6. 选择自己的类型 7.选择.json类型 8.此处, 选择 N 下载完成 文件夹完成下载 最后把 文件跑起来 以上所述是小编给大家介绍的VUE脚手架的下载和配置详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,

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

    目录 一.在官网下载vue.js文件 二.声明Vue对象 三.Vue修饰符 1. v-once 2.v-pre 3.v-html = "字段名" 和 v-text = "字段名" 四.函数 一.在官网下载vue.js文件 点击前往官网下载  安装 — Vue.js 下滑找到上图处,点击“开发版本”下载之后就会得到vue.js,将该文件放置在自己项目中.在创建index.html导入vue.js. 二.声明Vue对象 格式: var app = new Vue( js

  • 如何在 Vue.js 中使用第三方js库

    在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • Vue.js中对css的操作（修改）具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

  • Vue.js 父子组件通信的十种方式

    面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳

  • Vue.js中的高级面试题及答案

    Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件. 单文件组件文件有三个部分,(模板.脚本和样式). vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取和处理每个人部分.该设置使我们可以使用 Vue 文件无缝编写程序. vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 webpack 加载器进行处理. 而且还允许还开发过程中进行热重装. 2.prop 如何指定其

  • Vue.js中的组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使

  • Vue.js中使用Vuex实现组件数据共享案例

    当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方

随机推荐