什么是Vue.js?
Vue.js是前端的主流框架之一
Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于第三方库即有项目整合(Vue有配置的第三方类库,可以整合起来做大型项目的开发),下一节我们讲解百度地图用Vue的方式引入。
前端的主要工作:主要负责MVC中的V这一层,主要工作就是和界面打交道,来制作页面效果
什么是MVC、MVVM ?
后端(Java Python Node c#)中的mvc与前端mvvm之间的区别:
mvc是后端的分层开发概念
mvvm是前端视图层的概念,主要关注于视图层分离,也就是说:mvvm把前端的视图层,分为三部分:model,view,vm viewmodel
『View』:视图层(UI 用户界面) 『ViewModel』:业务逻辑层(一切 js 可视为业务逻辑) 『Model』:数据层(存储数据及对数据的处理如增删改查)
简述 MVVM
- MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
- 在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
- ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
Vue的简介
声明式渲染 Declarative Rendering
组件系统 Components
vue返回的是一个对象
vue是一个mvvm的框架
Vue是vue的实例,这个实例存在计算机中,主要干俩大事:1、绑定事件;2、dom检测
Vuejs是封装的一个类
Vue全家桶包括
- 客户端路由 Vue-router
- 大规模状态管理 Vuex
- 构建工具 Webpack/Vue-cli
- 服务端通信 Axios
Vue.js 的优点
- 简单轻巧,功能强大,拥有非常容易上手的 API;
- 可组件化 和 响应式设计;
- 实现数据与结构分离,高性能,易于浏览器的加载速度;
- MVVM 模式,数据双向绑定,减少了 DOM 操作,将更多精力放在数据和业务逻辑上
Vue的基础语法介绍
- v-model:主要是在表单元素的双向数据绑定中使用。比如文本框、下拉框、单选、复选、textarea等等。因为v-model是双向绑定的,所以文本框输入以后,模型也会发生改变。反之模型改变了文本框也会改变。
- v-text:主要用于文本的渲染。和{{}}功能一样。但是{{}}在第一次页面Vue木没有初始化完成时,会显示{{}}字符。故文本渲染多用v-text。
- v-html: 则会以html的方式把内容载入到界面中
- v-show:控制显示隐藏。不用艺v-if,使用v-show的情况下,dom是存在的。v-show通过指定CSS样式给元素添加display block或者display none进行控制。
- v-if:控制显示隐藏。如果if不成立,则整个dom不进行渲染,即不存在。
- v-bind:绑定属性。给一个dom元素添加属性。比如:在做图片的渲染过程中,如果图片的src地址是动态的,那么就可以利用v-bind去绑定src属性来实现src的赋值。
- v-for:循环。主要用于表格<li> 标签,去循环一个数组。
- v-on:事件绑定。(v-on:同等于@)
- filter : 过滤器。格式化数据。如后台返回金额19数字。页面显示:¥19.00元。
- component :组件。在做单页面过程中使用多些。把每一个网页做成多个组件然后拼接。起到组件复用。如页面头部底部和轮播等。
这个语言既然是归在编程语言这一类,那我就按照前端框架Vue来解答。
01 Vue是什么
在前端工程化之后,最有名的有三个前端框架:React、Angular、Vue,我一向推荐先学习Vue再学好其他,一方面是因为足够简单、轻量、配套工具齐全;另一方面,是因为这个东西跟微信小程序很像,而且美团还开源了mpvue,意味着你甚至可以直接使用Vue来开发小程序。等于说,你学会了Vue,不仅学会了前端,还学会了微信小程序,一举两得,岂不美哉?
02 Vue好用吗
Vue当然好用,现在越来越多的大公司已经将Vue用于生产环境了,github上现在也已经有数以万计的跟Vue有关的开源项目了。
那Vue好用在哪呢? 如果你学前端,那你肯定学过经典的div+css+js,Vue的好用之处大概就是,用下来你发现,div还是那个div,css还是那个css,js也还是那个js,只是组织的方式和配合他们的工具不同而已。
既然说Vue工具齐全,那我这里简单列举几个常用的工具吧:
-
vue-router:用于配置单页面应用的组件和映射,使用的方式和ui-router类似,支持嵌套路由,正则匹配路由,参数传递,history模式
-
vuex:一个专门为Vue应用设计的 状态管理模型和库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更
-
element:饿了么出品,基于VUE的组件库,开箱即用。
除了上述之外,还有webpack、axios、node等等工具可以用,且关于Vue的官方和非官方文档都很丰富,完全可以快速上手。
本文来自投稿,不代表天一生活立场,如若转载,请注明出处:http://tiyigo.com/phone/20670.html