03-vue基础-插值表达式

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开发者工具？