vue插值表达式
本文要讲解的内容如下:
- 通过data提供数据
- 通过插值表达式显示数据
- vue开发者工具的安装与使用
vue通过data提供数据
vue中通过template可以提供模板,但是这样的数据是写死的。
vue是数据驱动的,应该如何提供数据,将来控制视图呢?
vue可以通过data提供数据
data必须是一个函数,并且返回一个对象,这个对象就代表vue提供的数据
<script>
export default {
data () {
return {
money: 100,
msg: 'hello'
}
}
}
</script>
通过插值表达式显示数据
插值表达式, 小胡子语法 mustach语法
{{ }}
作用: 使用 data 中的数据渲染视图(模板)
基本语法, {{表达式}}
在{{}}
中可以出现任意的表达式
<template>
<div class="app">
<div>{{ money }}</div>
<div>{{ msg }}</div>
<div>{{ obj.name }}</div>
<div>{{ msg.toUpperCase() }}</div>
<div>{{ obj.age > 18 ? '成年' : '未成年' }}</div>
</div>
</template>
查看效果
vue中插值表达式的注意点
(1) 使用的数据在 data 中要存在
<h1>{{ gaga }}</h1>
(2) 能使用表达式, 但是不能使用 if for等语句
<h1>{{ if (obj.age > 18 ) { } }}</h1>
(3) 不能在标签属性中使用
<h1 id="box" class="box" title="{{ msg }}"></h1>
安装vue开发者工具
为了方便调试vue应用,我们需要安装vue开发者工具插件
- 直接通过谷歌应用商店安装 需要梯子。
安装地址:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
- 通过极简插件下载插件,本地安装。 https://chrome.zzzmh.cn/index
(1)安装地址:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd
(2)点击谷歌浏览器右上角三个点 --> 更多工具 --> 扩展程序,把下载的ctx
文件拖拽到谷歌浏览器
- 验证开发者工具是否安装成功
打开vue运行的界面,按F12,在控制台中切换到 VUE 栏,就可以查看和修改vue的数据进行调试了
总结
- vue通过data提供数据,需要注意什么?
- vue通过插值表达式显示数据,在插值表达式中可以出现表达式吗?语句呢?
- 为什么要安装vue开发者工具?