Vue的介绍与使用
1.Vue的介绍
内容讲解
【1】Vue介绍
1.vue属于一个前端框架，底层使用原生js编写的。主要用来进行前端和后台服务器之间的一个交互。
2.Vue是一套构建用户界面的渐进式前端框架。
“渐进式框架”简单的来说你可以将Vue作为你的应用一部分嵌入其中，代理更丰富的交互体验。就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。
【2】Vue好处
大部分时间关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
MVC:
model, 模型层
view, 视图层 在vue中视图就是我们之前学习的html标签
controller 控制层
【3】Vue特点
特点
易用：在有HTML,CSS, JavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb运行大小、超快虚拟DOM、最省心的优化。
内容小结
1.Vue好处：我们只需要关注视图。操作的代码都是在基于视图来操作。
2.Vue特点：易用 灵活 性能高
3.大部分关注视图：html标签。
4.vue中还具有脚本，就是创建的vue对象，在vue对象中书写一些关于vue的js代码
2.Vue的快速入门
1.基础入门案例1
内容讲解
【1】需求：快速搭建Vue的运行环境，在div视图中获取Vue中的数据
【2】实现步骤：
1.导入vue.js脚本
2.书写代码：
视图：我们主要关注视图。html+css
脚本：vue的代码，书写数据。
3.将课下资料中的素材导入工程中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><!--需求：快速搭建Vue的运行环境，在div视图中获取Vue中的数据--><!--在vue中html标签称为视图--><div id="myDiv">div1{{msg}}</div>
</body>
<!--导入的vue的js库-->
<script src="js/vue.js"></script>
<script>//创建vue对象let ve = new Vue({//表示vue作用的视图是div标签，根据id选择器来控制视图el:"#myDiv",//vue中书写的数据data:{msg:"黑马程序员"}});
</script>
</html>
内容小结
1.Vue使用的基本步骤
1.导入vue的js库
2.编写视图即html标签
3.在script标签内部创建Vue对象即脚本
2.Vue的基本结构
1.视图：html标签，我们可以在视图中通过插值表达式😗*{{vue中data中的key}}**获取vue的数据
2.脚本：
let 对象名 = new Vue({//表示vue作用的视图是div标签，根据id选择器来控制视图//el是element的缩写，表示作用的视图，通过选择器来获取要作用哪个视图，选择器和之前学习的css选择器一致//id选择器：#id属性名 class类选择器：.class类的属性值 el:"#myDiv",//vue中书写的数据//在data中以key:value形式来书写数据，然后在视图中可以通过插值表达式{{key}}获取---{{msg}}data:{msg:"黑马程序员"}});
2.基础入门案例2
内容讲解
【1】需求：点击按钮标签执行vue中的函数输出vue中data的数据
【2】实现步骤：
1.导入vue.js脚本
2.书写代码：
视图：我们主要关注视图。html+css
脚本：vue的代码，书写数据，定义函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div"><div>姓名：{{name}}</div><div>班级：{{classRoom}}</div><button onclick="hi()">打招呼</button><button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>//脚本let ve = new Vue({//1.vue作用的视图el:"#div",//2.vue的数据data:{name:"锁哥",classRoom:"黑马136"},//3.定义vue中的函数methods:{//如下是vue中定义函数的写法，如果在vue中(脚本和视图)调用vue中的函数：直接函数名//但是如果在vue外部调用必须加vue对象名：vue对象名.函数名(实参)vueHi:function () {//这里的this表示整个vue对象相当于ve//this.name就是获取data中的name值//必须书写thisconsole.log('姓名:' +this.name);},//在定义函数,省略了function关键字vueUpdate(){//修改classRoom的值this.classRoom = '312教室';}}});///下面的两个js函数和vue没有任何关系，就是普通的js函数/////在vue外部创建hi函数function hi() {// console.log('hi....');//调用vue中的ve.vueHi();}//在vue外部创建update函数function update() {// console.log('update....');ve.vueUpdate();}</script>
</html>
内容小结
1.vue的整体格式：
let 对象名 = new Vue({//作用的视图el:"视图的选择器",//数据data:{key:value,key:value,....},//函数methods:{//定义函数函数名:function(){},//简写格式函数名(){}}
});
2.如果我们在其他地方调用vue中的函数格式：
vue对象名.函数名();
3.vue中的注意事项：this
this在vue表示当前vue对象。建议加this