vue-初级上手-vue概念-什么是vue-vue快速上手-学生上手vue-f

本文出处

本文总结于《vue.js权威指南》-ISBN:978-7-121-28722-0

什么是vue？为什么选择它？

vue是一个库，他并不是一个框架，但是由于使用广泛，有的人口误或理解错误，逐步将其误解为框架

库是将代码集合成的一个产品，供程序员调用。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

框架则是为解决一类问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。

框架和库的比较可以想像为:假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便

vue拥有以下特点

轻量

vue算是前端库里体积非常小的存在，且其不依赖其他基础库

数据绑定

其双向绑定的特性避免了繁琐的数据监听-更新机制，在绘制强交互界面非常方便、简单

插件化

vue核心库并不包含Router（路由），AJAX（接口），但是这些功能可以通过插件加载到vue上

易于上手

vue的语法简单，方便初级前端上手实现

生态全面

截至目前，关于vue的生态是比较全面的，例如有饿了么团队维护的elementUI库

vue与其他框架区别

angularJs(angular1)

相同点

• 都支持指令
• 都支持过滤器
• 都支持双向绑定
• 都不支持低端浏览器

不同点

• angular学习成本高，上手较难，在 API 与设计两方面上 Vue.js 都比 AngularJS 简单得多，因此你可以快速地掌握它的全部特性并投入开发。
• angular对数据进行脏检查（它定时检查而不是直接监听属性变化），而vue是非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
• Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则，这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。

React

相同点

• react使用jsx语法，vue推崇编写vue文件，对文件内容有一定的约束，都是需要编译后使用
• 中心思想相同，都是组件开发，组件实例之间可以嵌套
• 都提供了合理的钩子函数
• 都不内置axaj，路由等功能到核心包
• 组件开发都支持mixins特性（vue2）

不同点

• react依赖Virtual DOM，对渲染结果进行脏检查，而vue使用DOM模板
• vue提供了指令、过滤器等，可以方便操作DOM

如何上手

安装（vue2）

script标签

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

ES Modules

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.js'
</script>

npm

# 最新稳定版
$ npm install vue

快速上手

<div id="root">
	<div>{{text}}</div>
</div>
  const vm = new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: { 
                text: 'Hello World'
            }
        });