<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>介绍vue</title>
</head>
<body>
<div id="app">
<!-- vue是声明式的渲染，用双大括号调用,data中的数据会被通过双花括号调用 -->
<p>{{num}}</p>
<!-- 标签内也可以写表达式,num大于10 显示10，否则显示num -->
<p>{{ num > 10 ? 10 : num}}</p>
<p>{{ num || ‘you‘}}</p>
<!-- v-html 指令渲染 会被解析为自定义属性-->
<p v-html = ‘num‘></p>
<p v-if = ‘num ===2‘>if</p>
<p v-else>else</p>
<!-- v-if 控制要不要创建这个节点，v-show控制要不要显示这个节点 display : none-->
<!-- else和if 会自动互斥，else 会自动match最近的if -->
<p v-else>another else</p>
<p v-show = ‘true‘>23333</p>
<p v-show = ‘false‘>404</p>
</div>
<!-- 在#app中的内容才会被承认vue语法，没有连接到vue原型 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
const app = new Vue({
el : ‘#app‘,
data : {
num: 2
}
});
</script>
</body>
</html>
