【前端框架】vue~动态赋值
【前端框架】vue~条件判断与遍历
上面两节内容涉及的操作都是在<template></template>
标签内,用于数据
显示。这节我们将了解这些数据在哪里定义。
本文以【前端框架】vue~hello world中的项目进行演示
一个.vue
文件有三部分组成,如图(1),分别是template
、script
、style
,我们的关注重点主要集中在template
、script
这两部分,而我们的数据就在script
部分中。
所有的 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'
}
})
效果二:在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>
方法
在编写代码的时候我们通常将处理逻辑放在方法中去实现,vue
实例有一个methods
属性,我们可以在这个属性中定义方法
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
效果一:实现按钮切换
在【前端框架】vue~条件判断与遍历一节中我们曾实现登录成功后需要显示退出按钮,未登录时需要显示登录按钮的逻辑
页面元素与方法关联是通过事件绑定,图(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" />