Vue官网：Vue教程
介绍
Vue：（读音/Vju:/, 类似于view），是一套用于构建用户界面的渐进式JavaScript框架。
何为渐进式？声明式渲染-》组件系统-》客户端路由-》集中式状态管理-》项目构建
Vue的优点：
- 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
- 灵活：可以在一个库和一套完整框架之间自如伸缩
- 高效：20kb运行大小，超快模拟DOM
引入Vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue的安装，参考官网：Vue安装
基本使用
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ msg }} </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:'Hello Vue' } }) </script> </html>
解析：
1. 实例参数分析
- el:元素的挂载位置（值可以是CSS选择器或者DOM元素）
- data:模型对象（值是一个对象）
2. 插值表达式用法
- 将数据填充到HTML标签中（用法：{{ msg }}）
- 插值表达式支持基本的计算操作（如：{{ 1 + 2 }}）
3. Vue代码运行原理分析
- 概述编译过程的概念（Vue代码-》原生语法）
Vue语法--(通过 Vue框架)-->原生代码
总结
Vue的基本使用步骤
- 需要提供标签用于填充数据；
- 引入Vue.js库文件；
- 使用Vue语法实现功能；
- 把vue提供的数据填充到标签里