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指令在表单、
它会根据控件类型自动选取正确的方法来更新元素。
对于单选按钮、复选框以及选择框的选项,v-model绑定的值通常是静态字符串(对于复选框也可以是布尔值)
但是有时候我们需要把值绑定到Vue实例的一个动态property上,这时候可以用v-bind实现,并且这个property的值可以不是字符串
例如:
vue_表单 input 元素:
消息是:{{message}}
textarea 元素:
{{message2}}
单个复选框:
多个复选框:
选择的值为:{{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的知识就简单的介绍到这里,如有出错的或者借鉴不妥的地方,还望指出。
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
