Vue.js_认识_简单介绍

相信很多小伙伴都已经听说过前端的三大框架vue,angular,react;目前来说,这三大框架是现在非常流行的,但是在很多情况,我们会纠结于使用哪个框架比较好一些,所谓的“好一些”是指什么呢?也就是说,选择“好一些”的判断标准是什么呢?

(1)这个框架的使用场景:

           根据项目是否适用于Web端还是原生的APP,或者快速搭建一个小型项目等等。

(2)可复用的组件:

           框架中组件的复用性能够很大程度上减少了代码量,也方便了也方便了维护和管理。

(3)该框架能够解决什么问题:

           选择框架还是主要要看它的优势和劣势有哪些。

           Vue优点:

                      1.轻量级框架

                      2.双向数据绑定

                      3.简单,官方文档很清晰,比angular简单易学

                      4.快速,异步处理方式更新DOM

                      5.组合,用解耦的、可复用的组件组合应用程序

                      6.强大,表达式无需声明依赖的可推导性

                      7.对模块友好,不强迫你所有的代码都遵循angular的各种规定,使用场景更加灵活

           Vue缺点:

                      1.新生儿,没有angular那么成熟

                      2.不支持IE8

           Angular优点:

                      1.良好的应用程序结构

                      2.双向数据绑定

                      3.可嵌入、注入和测试

                      4.模板功能强大丰富,自带了极其丰富的angular指令

                      5.是一个比较完善的前端框架,包含服务、模板、数据双向绑定、路由、依赖注入等等

                      6.自定义指令可以在项目中多次使用

           Angular缺点:

                      1.入门容易,深入后概念很多,学习中比较难理解

                      2.文档实例很少,理解起来很难

                      3.对IE6/7兼容不算特别好,需要自己使用jQuery来解决一些需求

           React优点:

                      1.声明式设计,react采用声明范式,可以轻松描述应用。

                      2.高效,react通过对DOM的模拟,最大限度的减少与DOM的交互

                      3.灵活,可以和已知的库和框架很好的配合

                      4.速度快,在UI渲染过程中,react通过虚拟DOM中的微操作来实现对实际DOM的局部更新

                      5.跨浏览器兼容,虚拟DOM帮助我们解决了跨浏览器问题,提供了标准化的API

           React缺点:

                      1.react本身只是一个“V”,并不是一个完整的框架,所以如果是大型的项目想要一套完整框架的话,基本上都需要加上ReactRouter和Flux才能写大型应用

(4)框架的生态系统:

           是否有繁荣的生态系统提供我们学习使用

(5)跨平台性:

           是否需要同时支持移动端和PC端

 

文章采取:

(1)链接:怎样在vue,angular,react快速选择一个合适的框架(猛码象)

(2)链接:web前端三大主流框架那个适合前端开发?


总之呢,具体使用哪种框架还是需要和自己项目相匹配,能够更好地符合自己需求和目标。合适是最大的标准。

好了,言归正传,我的主要目的是简单介绍一下新生儿——Vue.js。

希望不足的地方还请多多指教。

(1)什么是Vue.js

           Vue.js是一个构建数据驱动的web界面库,技术上,它重点集中在MVVM模式中的ViewModel层,Vue.js的目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

           Vue.js的核心是是一个响应式的数据绑定系统,它让数据与DOM保持同步变得简单。

           Vue.js的核心库只关注视图层,不仅容易上手,还便于与第三方库或其他项目整合。

(2)创建一个Vue实例

           var vm = new Vue({

           el:''#app'',

           data:{},

           create:{加载完成之前执行,执行顺序:父组件--子组件},

           mounted:{加载完成后执行。执行顺序:子组件--父组件},

           methods:{事件方法执行},

           watch:{监听一个值的变化,然后执行相对应的函数},

           computed:{是计算属性,也就是依赖其他的属性计算所得出最后的值}

           })

           生命周期图:

生命周期示意图
标题

 

(3)表单输入绑定

           基础用法,可以使用v-model指令在表单

单个复选框:

多个复选框:


选择的值为:{{checkedNames}}
选中的值为:{{picked}}选择的网站是:{{selected}}

 (4)组件

           组件是可以复用的Vue实例,并且带有名字,我们可以通过new Vue创建的Vue根实例中,把这个组件作为自定义元素来使用。

           一个组件的data选项必须是一个函数,因此,每个实例可以维护一份被返回对象的独立的拷贝。

           组件有两种注册类型:全局注册和局部注册。

           详细的组件知识请看另一篇文档:Vue.js_组件_认识和理解

例如:


vue_组件

{{total}}

(5)自定义指令

           除了核心功能默认内置的指令(v-model)和(v-show),Vue也允许注册之定义指令。

           一个指令定义对象可以提供如下几个钩子函数:

           (1)bind:只调用一次,指令第一次绑定到元素师调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
           (2)inserted:被绑定元素插入父节点时调用(父节点存在即可调用。不必存在于document中)。
           (3)update:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
           (4)componentUpdated:被绑定元素在模板完成一次更新周期时调用。
           (5)upbind:只调用一次,指令与元素解绑时调用。

钩子函数参数:
el:指令所绑定的元素可以用来直接操作DOM
binding:一个对象。包含以下属性:
    name:指令名,不包括v-前缀
    value:指令的绑定值,例如:v-my-directive='1+1',value的值是2
    oldValue:指令绑定的前一个值,仅在update和componentUpdate钩子中可用。无论值是否改变都可用
    expression:绑定值的表达式或变量名。例如v-my-directive='1+1',expression的值是'1+1'。
    arg:传给指令的参数,例如v-my-directive:foo,arg的值是:"foo"
    modifiers:一个包含修饰符的对象。例如v-my-directive.foo.bar,修饰符对象modifiers的值是{foo:true,bar:true}
    vnode:Vue编译生成的虚拟节点。
    oldVnode:上一个虚拟节点,仅在update和componentUpdate中可用。

例如:


vue_自定义指令

页面载入时,input元素自动获取焦点:

vue的知识就简单的介绍到这里,如有出错的或者借鉴不妥的地方,还望指出。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部