【前端框架】vue~数据与方法

最新推荐文章于 2022-06-21 15:17:11 发布

不务正业的野猴子

最新推荐文章于 2022-06-21 15:17:11 发布

阅读量254

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/quan20111992/article/details/105449994

版权

前端框架专栏收录该内容

6 篇文章 2 订阅

订阅专栏

【前端框架】vue~动态赋值
 【前端框架】vue~条件判断与遍历
上面两节内容涉及的操作都是在<template></template>标签内，用于数据显示。这节我们将了解这些数据在哪里定义。

本文以【前端框架】vue~hello world中的项目进行演示

一个.vue文件有三部分组成，如图(1)，分别是template、script、style，我们的关注重点主要集中在template、script这两部分，而我们的数据就在script部分中。
在这里插入图片描述

图(1)

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)

数据

vue的实例中有一个data属性，是vue 实例的数据对象，其类型可以为Object或Function，在定义组件的时候该data属性只能是Function类型

实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。

效果一：在data中定义一个Object类型的对象，并在该对象中设置属性，我们将在页面展示该属性值

在index.html文件中使用{{ }}在界面显示test

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>firstvue</title>
</head>

<body>
  <div id="app">{{content}}</div>
</body>

</html>

修改main.js文件添加我们希望在index.html中替换{{test}}的数据

import Vue from 'vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  data: {
    content: 'test'
  }
})

在这里插入图片描述

图(2)

效果二：在data中定义一个Function类型的对象，并在该对象中返回一个对象，我们将在页面展示该对象中的属性值

我们在【前端框架】vue~hello world一节中新建的HelloVue页面就是这样实现的

<template>
	<div id="vue">
		Hello Vue.js! {{message}}
	</div>
</template>

<script>
export default {
	name: 'HelloVue',
	data() {
		return {
			message: '吃饭'
		}
	}
}
</script>

在这里插入图片描述

图(3)

方法
在编写代码的时候我们通常将处理逻辑放在方法中去实现，vue实例有一个methods属性，我们可以在这个属性中定义方法

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

效果一:实现按钮切换

在【前端框架】vue~条件判断与遍历一节中我们曾实现登录成功后需要显示退出按钮，未登录时需要显示登录按钮的逻辑
在这里插入图片描述

图(4)

在这里插入图片描述

图(5)

页面元素与方法关联是通过事件绑定，图(4)中我们通过@click将signIn()与按钮的单击事件绑定。

事件绑定的两种写法：

v-on: 指令
v-on指令的简写形式@

<input type="button" name="signIn" value="登录" @click="signIn" />
<input type="button" name="signIn" value="登录" v-on:click="signIn" />

不务正业的野猴子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端框架】vue~数据与方法

【前端框架】vue~动态赋值【前端框架】vue~条件判断与遍历上面两节内容涉及的操作都是在<template></template>标签内，用于数据显示。这节我们将了解这些数据在哪里定义。本文以【前端框架】vue~hello world中的项目进行演示一个.vue文件有三部分组成，如图(1)，分别是template、script、style，我们的关注重点主要集中在...
复制链接

扫一扫

专栏目录