今日份学习目标：
一、vue简介
问题：
Vue.js是什么？
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。
官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡
Vue呢，从大的角度思考就是将我们的传统开发模式颠覆掉了，传统模式呢是写完后端写前端，这样的话通常是一个人做，先得要有原型页先由前端工程师把这个写好，才能进行后台的编码工作；Vue大概是在2017-2018的时候火起来的，那个时候Vue有一个代名词是“前后端分离”，即使不知道前端是什么样的也可以进行后台的开发。
前后端分离：
1、约定数据交互格式 json
书籍查询 [{bid:1,bname:"西游记"},{bid:2,bname:"红楼梦"}]
订单查询 {oid:1,......[oiid,1,.....]}
2、优点：
前后端工程师可以并行开发，项目交付更快
3、专业的人做专业的事
二、Vue入门
1、导入js依赖
进入BootCDN进行下载 官网：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
但是由于我所用的HBuildeX的版本是2.0几的，而官网是3.0以上的，所以这里我们需要找到与自己相匹配的js版本 。
回车之后就会出现以下效果，如果没有出现以下效果，那么肯定就是错误的：
然后再选重地址栏这段路径放入代码里：https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js
放入代码块中：
CDN网站也有很多，比如：
同样的在代码块里面换成这个地址栏链接也是可以的
版本问题对于开发而言的影响是极大的，所以大家一定要细心选择版本！！！
2、定义vue所管理的边界
3、创建vue实例
4、挂载边界
代码块如图所示：
代码块展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>Vue入门</title>
</head>
<body>
<div id="app">
<!-- 定义边界 -->
{{msg}}
</div>
</body>
<script type="text/javascript">
/* 创建vue实例 */
new Vue({
el:'#app',
data(){
// 设置vue所管理的边界中可以使用的变量
return{
msg:'hello vue!!! 我是一杯咖啡.'
};
}
})
</script>
</html>
运行效果如下 ：
三、数据的双向绑定
数据的双向绑定是Vue的最大一个特色。
在数据边界里添加<input v-model="msg"/>
代码块展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>数据的双向绑定</title>
</head>
<body>
<div id="app"><!-- 数据边界 -->
<!-- 数据的双向绑定 -->
<input v-model="msg"/>
{{msg}}
{{msg}}
{{msg}}
</div>
</body>
<script type="text/javascript">
/* 创建vue实例 */
new Vue({
el:'#app',
data(){
// 设置vue所管理的边界中可以使用的变量
return{
msg:'hello vue!!! 我是一杯咖啡.'
};
}
})
</script>
</html>
运行结果展示：
注意：
如果写在数据边界外面的话是失效的，效果展示：
四、Vue事件
v-on:click 实现vue事件的属性
效果展示： 这个时候点击打印就可以弹出输入内容啦~
还有一个属性，也是实现同样的效果：
@click 实现vue事件的属性
在没有使用vue以前，实现一个弹幕发送的功能步骤：
①拿到弹幕对应的输入框dom对象
document.getElementById("inputId");
②拿到输入框dom对象的value值
var text = input.value;
③通过点击事件弹出输入框内容
alert(text)
五、Vue的生命周期 *****（2个面试题）
【生命周期运行图】 
1、所有钩子函数有哪些？
beforeCreate
created
beforeMount
mounted
beforeUpdate
Updated
beforeDestory
destoryed
2、Vue初始化默认会触发的钩子有哪些？
beforeCreate
created
beforeMount
mounted
3、而其他四个会在什么时候触发呢？
答案解析：
由于资源有限只能分为三张图进行展示：
当没有修改默认值的时候，是不会触发beforeUpdate与updated的，只有修改了默认值，才会触发，效果如下：
