依乐祝

依乐祝

授之以鱼,不如授之以渔!右侧微信扫描二维码关注我们“DotNetCore实战”吧。另附.NET Core实战项目交流群:637326624 欢迎大家加群相互交流!

.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面

上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现。但是奈何Vue实现的SPA有一定的门槛,不太适合新手朋友,所以为了照顾大多数人,我准备还是采用asp.net core mvc+html+js+css+layui这个传统的技术栈来实现。但是,不管怎么说我还是会把Vue的基本使用给大伙介绍一下!
当然,如果这篇文章我也是抱着学习的态度跟大家一起来了解Vue的,如果你想通过这篇文章就能熟练的使用Vue那你就太天真了!目前,作为后端的我对Vue的掌握也仅仅停留在入门阶段。后期再带着大家一起把这个项目升级到Vue吧!

本篇文章已经收纳入《.NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划》另附上.NET Core实战项目交流群:637326624 有兴趣的朋友可以共同交流技术经验。
作者:依乐祝
原文地址:https://www.cnblogs.com/yilezhu/p/10035275.html

Vue是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
说白了Vue.js就是当下很火的一个JavaScript MVVM库(前端库)。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。
当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。

Vue.js的特点

  • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

  • 数据驱动: 自动追踪依赖的模板表达式和计算属性。

  • 组件化: 用解耦、可复用的组件来构造界面。

  • 轻量: 生产版本删除了警告后共30.90KB min+gzip,无依赖(2.5.17版本)。

  • 快速: 精确有效的异步批量 DOM 更新。

  • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

如何学习Vue.js

这里介绍几个比较好的Vue学习的网站,都是免费的!大伙可以跟着系统的学习下。毕竟我最开始也是看了下面的官方教程以及菜鸟教程里面的Vue教程的。
Vue的官方中文教程:https://cn.vuejs.org/v2/guide/index.html
Vue.js菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html
GitHub地址:https://github.com/vuejs/vue
Releases地址:https://github.com/vuejs/vue/releases

快速开始运行Vue.js

Vue的安装

这里需要注意的是Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。目前最新稳定版本是:2.5.17。目前就两种我认为常用的安装方式罗列如下:至于NPM以及CLI的方式我就不推荐了,专业的前端玩的东西我感觉高大上,懒得折腾。

  1. 直接下载并用