2-Vue核心技术
1. 模板语法
1.1 模板语法之插值语法
主要研究：{{这里可以写什么}}
- 在 data 中声明的变量、函数等都可以
- 常量都可以。
- 只要是合法的 javascript 表达式，都可以
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单. 如 Math 和 Date 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="app">
<h1>{{msg}}</h1>
<h1>{{sayHello()}}</h1>
<!-- 常量 -->
<h1>{{999}}</h1>
<h1>{{'Hello Vue!'}}</h1>
<h1>{{3.14}}</h1>
<!-- javascript表达式 -->
<h1>{{1 + 1}}</h1>
<h1>{{'Hello' + 'Vue'}}</h1>
<h1>{{'msg' + 1}}</h1>
<!-- 三目运算符 -->
<h1>{{gender ? '男' : '女'}}</h1>
<h1>{{number + 1}}</h1>
<h1>{{'number' + 1}}</h1>
<h1>{{msg.split('').reverse().join('')}}</h1>
<!-- 在白名单里面的 -->
<h1>{{Date}}</h1>
<h1>{{Date.now()}}</h1>
<h1>{{Math}}</h1>
<h1>{{Math.ceil(3.14)}}</h1>
</div>
<!-- Vue程序 -->
<script>
const myVue = new Vue({
el: "#app",
data: {
number: 1,
gender: true,
msg: "abcdef", // 为了方便沟通，以后我们把msg叫做变量。（这行代码就可以看做是变量的声明。）
sayHello: function () {
console.log("Hello Vue!");
},
},
});
</script>
</body>
</html>