Vue插值表达式
插值表达式的语法形式
{{表达式}}
1.作用：利用表达式进行插值，渲染到页面中
表达式：是有数据的代码，js引擎能识别并且计算出结果的
2.注意事项：
（1）使用的数据必须存在（2）支持的是表达式，而非语句，比如if，for... （3）不能在标签属性中使用{{}}插值
3.特别使用：
表达式可以在{{}}中进行拼接以及其它的方式进行渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue实例</title>
</head>
<body>
<!---创建Vue实例，初始化渲染1.准备容器(Vue所管理的范围)2.引包（开发版本包/生产版本包）3.创建实例4.添加配置项=>完成渲染
--><!---1.准备容器--><div id="app"><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><!---这里的toUpperCase()可以令msg这个数据进行大写-->><p>{{msg+shuju_two}}</p><!--这里我将msg和shuju_two这两个数据进行拼接-->><p>{{people.name}}</p><!---这里测试在data中来锁定数据里面包含的数据能否渲染--><p>{{people.name+'是'+people.xingqu+'青年'}}</p></div><!--2.引入开发版本包--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//引入核心包以后，在全局环境中就有了Vue构造函数//3.创建实例const app = new Vue({//这里通过el配置标签 el:'#app',//通过data提供数据来渲染标签data:{msg:'Hello Word',shuju_one:66666,shuju_two:'v我五十吃麦当当',age:18,people:{name_one:'gogo俊',xingqu:'爱好打瓦'}}})</script>
</body>
</html>
效果图如下：
