一、Vue介绍
- Vue是一套构建用户界面的渐进式前端框架。
渐进式框架：简单的来说你可以将Vue作为你的应用一部分嵌入其中，代理更丰富的交互体验。就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性
- 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
- 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
- 特点
易用：在有HTMLCSSJavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。
二、Vue详解
- Vue是一套构建用户界面的渐进式前端框架。
- Vue的程序包含视图和脚本两个核心部分。
- 脚本部分
- Vue核心对象。
- 选项列表
- el：接收获取的元素。
- data：保存数据。
- methods：定义方法。
- 视图部分
- 数据绑定：{{变量名}}
三、入门案例
入门案例一：
使用步骤：
1. 下载和引入vue.js文件。
2. 编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。
<!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">{{msg}}</div>
</body>
<script src="js/vue.js"></script>
<script>// 脚本new Vue({el:"#div",data:{msg:"Hello Vue"}});
</script>
</html>入门案例二：
<!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 vm = new Vue({el:"#div",data:{name:"张三",classRoom:"班级1"},methods:{study(){alert(this.name + "正在" + this.classRoom + "好好学习!");}}});//定义打招呼方法function hi(){vm.study();}//定义修改班级function update(){vm.classRoom = "班级2";}
</script>
</html>四、入门案例总结
- Vue是一套构建用户界面的渐进式前端框架。
- Vue的程序包含视图和脚本两个核心部分。
- 脚本部分
- Vue核心对象。
- 选项列表
- el：接收获取的元素。
- data：保存数据。
- methods：定义方法。
- 视图部分
- 数据绑定：{{变量名}}
es6新语法：
定义变量：
var定义的变量具有作用域问题，以后不使用
let定义的变量没有作用域问题。
