请问如何学习前端Vue框架?
1、Vue前端框架并不适合新手学习
Vue框架里使用了很多技术:HTML、CSS、JS基础、ES6、Webpack、npm工具等,现在市面上很多Vue教程都默许你已经掌握了这些知识,如果这些基础知识掌握不牢,那学习Vue框架的难度就较大。
2、Vue框架学习路径
Vue框架基础知识:插值表达式、数据绑定(v-html、v-text、v-bind、v-model)、事件绑定(v-on)、样式绑定、循环(v-for)、显示与隐藏(v-if、v-show)、过滤器(filters)、监听器(watch)、计算属性(computed)等;
组件:组件定义与使用、父子组件间的通信;
路由的使用:VueRouter;
网络请求:axios的使用;
状态管理(全局数据):Vuex;
Vue CLI脚手架的使用;以上知识掌握后就要多实践,找一个网页一步步去实践开发。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
在进行Vue项目开发过程中,我们可以通过script标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。并且通过new Vue()进行新建一个Vue的实例对象,其下有很多属性,包括el、data、methods、computed、watch等等,el为指向页面的节点元素,data存储数据,数据类型包括simple datatype(简单数据类型)以及complex datatype(复杂数据类型),用插值表达式{{}}显示,在插值显示的时候,不需要写上data,methods内存储方法,通过fn()的形式调用方法,computed内存储也是方法,但是其为计算数据,复杂逻辑的应该存储在computed中,计算属性是基于它们的依赖进行缓存的,由于computed带有一层缓存,所以只有在它的相关依赖发生改变时才会重新运行,而methods则是调用一次生成一次,computed中的方法调用时不需要加()的,watch为监听,监控,监听data中的属性值也可以监控对象,存在两个参数(currentValue当前值和prevValue之前值)。
在Vue中,html的任何属性都不能用{{}}(插值表达式)来进行设置,要用v-bind:来进行属性绑定,v-bind:可以简写为 :,当我们需要对事件进行监听的时候需要用v-on:来进行事件绑定,v-on:可以简写为@,v-once单次渲染,v-html渲染html,在input、select、textarea中我们可以用v-model:进行双向数据绑定,可以用v-for进行数据循环,v-if/v-else-if/v-else进行数据判断,利用v-show显示与隐藏DOM节点,在Vue中还存在很多修饰符如取消事件冒泡(.stop),回车键(.enter),空格键(.space),取消默认事件(.prevent)等等,可以对DOM设置ref属性进行本地指向,类似于id,当我们对一个对象进行v-for循环时要对该对象设置key值,起到标识唯一性,便于检测以及提高性能的作用。
在Vue的实例对象下面还存在很多钩子函数,总体分为三大块(创建、更新、销毁):
1、创建阶段,存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等钩子函数;
2、更新阶段,存在beforeUpdate(){}、updated(){}等钩子函数;
3、销毁阶段,存在beforeDestroy(){}、destroyed(){}等钩子函数;上述钩子函数不包括全部,一个生命周期内存在很多钩子函数,不能一一列举。
以上就是我对Vue基础知识技术的总结,Vue项目开发部分留待Vue项目开发技术总结。

