vue框架教程-20
刘耀文的大沙雕
钟意阿满
解析如何学习Vue框架快速入门
学习前端框架 Vue 的步骤如下：
了解 Vue 框架的基本概念和特点。了解 Vue 框架的基本架构和工作原理，包括 Vue 的视图层渲染、数据绑定、组件化和路由等功能。
学习 Vue 框架的基本语法和使用方法。包括 Vue 的模板语法、组件定义、数据绑定、事件处理、路由使用等。
学习 Vue 框架的高级功能。包括 Vuex 状态管理、Vue Router 路由、Vue Server Renderer 服务端渲染等。
学习 Vue 框架的实战应用。通过实战项目，加深对 Vue 框架的理解和应用能力。
学习时间的安排可以根据个人的学习能力和进度进行调整，但是一般来说，学习 Vue 框架的基本概念和语法可以在一周左右的时间内完成。如果想要学习 Vue 的高级功能和实战应用，则可能需要更长的时间。
建议在学习 Vue 框架时，能够结合官方文档和一些教程进行学习，并尝试自己动手写一些简单的代码来练习。通过实际操作和练习，能够更快地掌握 Vue 框架的知识和技能。
抱起亚轩找小葵
什么是vue框架？
Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前，最好先学习一下这些知识。由于Vue的中文文档比较完善，所以这里只介绍Vue框架的一些核心概念，详细的使用方法还得查看官方文档。
Vue的中文文档可以查看https://cn.vuejs.org/v2/guide/installation.html 。
Vue路由功能需要导入vue-router，它的中文文档可以查看https://router.vuejs.org/zh-cn/ 。
Vue的状态管理功能需要使用vuex，它的中文文档可以查看https://vuex.vuejs.org/zh-cn/ 。
如果需要更多Vue资料，可以查看awesome-vue，列举了很多Vue资源。
当然最简单和直接的还是看视频，到百度网盘上面搜索下，慕课网的vue2.0从基础到实践是我感觉非常好的一套视频，你对着做下，或者找个项目边做边学，能很快提高，另外iview是一个很不错的东西，等你学会了vue的基本应用，研究下iview封装好的component，就能作出很漂亮的网页了。
大圣杰锅是
什么是vue
是一套构建用户界面的渐进式（用到哪一块就用哪一块，不需要全部用上）前端框架，Vue 的核心库只关注视图层。
vue的兼容性
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
vue学习资源
vue.js中文官网：http://cn.vuejs.org/。
vue.js源码：https://github.com/vuejs/vue。
vue.js官方工具：https://github.com/vuejs。
vue.js官方论坛：forum.vuejs.org。
对比其他框架-React
React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统。
都有支持native的方案，React的RN，vue的Wee下。
都支持SSR服务端渲染
都支持props进行父子组件间的通信。
性能方面：React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。
不同之处就是：
数据绑定方面，vue实现了数据的双向数据绑定，react数据流动是单向的。
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制。
state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理（如果要操作直接this.xxx）
组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件。
对比其他框架-angular
在性能方面，这两个框架都非常的快，我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话，你可以参考这个第三方跑分。单就这个跑分来看，Vue 似乎比 Angular 要更快一些。
在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此，一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。
灵活性：Vue 相比于 Angular 更加灵活，Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范，但也有开发者喜欢更灵活自由的方式。
vue.js的核心特点—响应的数据绑定。
传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑。
响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中。
<template>。
<div id="app">。
{{ message }}。
</div>
</template>。
<script>
export default {。
name: 'app',
data () {
return {
message: 'Welcome to Your Vue.js App'。
}
}
</script>。
<style>
</style>
vue.js的核心特点—可组合的视图组件。
一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成。
vue中实现组件引入示例
第一步：import导入需要引入的组件文件；
第二步：注册组件；
第三步：在需要引入组件的文件中加上组件标签（这个标签的标签名就是注册的组件名字，多个单词的和这里有xx-xx的形式）
需要注意的是：组件可以嵌套引入，也就是说组件可以引入其他组件。
首先创建一个组件，用于被引入的组件，组件名字叫Hello.vue。
————————————————
版权声明：本文为CSDN博主「胡椒粉0121」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
小韩在追星
小韩在追星