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值
//必须书写this
console.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
