假期无聊，就想着学点东西，害怕之后的大作业做不出来。写个博客记录一下学习。
我没有安装vue，我目前采用的是CDN
也就是在js或者html文件中插入一下代码：
<!-- 引入包，使用的是开发版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>然后跟写了第一个实例代码，基本上就是vue最基本的操作。
<!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>Document</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ count }}</p>
</div>
<!-- 引入包，使用的是开发版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 一旦引入的vue 的核心包，在全局环境，就有了vue构造函数
const app = new Vue({
//通过el去配置选择器，指定VUE控制的是哪个盒子
el: '#app',
//通过data属性，来配置数据
data: {
msg: 'hello vue',
count: 100
}
})
</script>
</body>
</html>今天下午学习了几个基本指令
v-html: 改变innerHTML的值
v-show:通过设置css的display来实现元素的显示与隐藏
v-if：条件显示
v-else和v-else-if：与v-if连用
v-on：设置绑定事件。缩写为@
v-bind：设置标签的src、title等属性，使得其可变。缩写为：
v-for：循环多次渲染整个元素，经常和数组一起使用
语法：v-for = “(item, index) in 数组” : key = “item.id” (key很重要，基本必须使用)
v-model: 给表单元素使用，实现双向数据绑定。
