版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82154172
说明：若是想直接开发，可跳过此篇博客。
一、官网资料
二、Vue 介绍
1、基本介绍【官网介绍】
Vue 是一套用于构建用户界面的渐进式JavaScript 框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
2、作用
简单说就是，动态构建用户界面。
三、 Vue的特点
1、遵循MVVM模式
理解Vue的MVVM
2、编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
3、它本身只关注UI, 可以轻松引入vue插件或其它第三库开发项目
四、Vue扩展插件介绍
| 插件名称 | 描述 |
|---|---|
| vue-cli | vue脚手架 |
| vue-resource(axios) | ajax请求 |
| vue-router | 路由 |
| vuex | 状态管理 |
| vue-lazyload | 图片懒加载 |
| vue-scroller | 页面滑动相关 |
| mint-ui | 基于vue的UI组件库(移动端) |
| element-ui | 基于vue的UI组件库(PC端) |
五、快速入门案例
1、基本使用
Vue使用步骤如下:
1)引入vue.js
2)创建一个挂载对象
3)创建vue的实例
4)传入配置对象
代码实例：
<head>
<meta charset="UTF-8">
<title>vue快速入门案例</title>
<!--vue使用步骤:
1.引入vue.js
2.创建一个挂载对象
3.创建vue的实例
4.传入配置对象
-->
</head>
<body>
<!--2.创建一个挂载对象-->
<div id="app">
<input type="text" v-model="msg">
<!--4.传入配置对象-->
<p>{{msg}}</p>
</div>
</body>
<!--1.引入vue.js-->
<script src="js/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<script>
const data = {
msg: "Hello vue!"
}
// 3.创建vue的实例
const vm = new Vue({
el: "#app",
data: data
})
console.log(vm.msg)
</script>测试：
2、使用vue开发者工具调试