目录
一、引言
二、演示效果
三、完整代码
一、引言
插值表达式 {{ }} 是一种Vue的模板语法
语法：{{ 表达式 }}
作用：利用表达式进行插值，渲染到页面中。
注意：
1. 表达式是可以被求值的代码，JS引擎会将其计算出一个结果。
2. 使用的数据必须存在于 (data)
3. Vue支持的是表达式，而非语句，比如：if for语句等等
4. 不能在标签属性中使用{{ }}插值，如<div class=''{{ msg }}"></div>
二、演示效果
三、完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Introduction</title></head><body><!-- 创建Vue实例，初始化渲染1. 准备容器(Vue所管理的范围)2. 引包（开发版本包/生产版本包 官网 当前学习引入开发版本即可）3. 创建实例4. 添加配置项 => 完成渲染--><div id="app"><!-- 这里作为编写一些用于渲染的代码逻辑 -->{{ msg }}<br>{{ msg + '加油，你是最棒的！' }}<br>{{ age + 2 }}<br>{{ username.toUpperCase() }}<br>{{ age >= 14 ? '少年' : '童年' }}<br>{{ favourite.sport }}</div><!-- 引入的时开发版本包 -包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({// 通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',// 通过data提供数据data: {msg: 'Hello 王哲晓',age: 31,username: 'wangzhexiao',favourite: {sport: '骑行 徒步',other: 'coding readBook'}}})</script></body>
</html>