文章目录
认识Vuejs
为什么学习Vuejs
- 大概你的公司正要将原有的项目使用Vue举行重构。
- 也大概是你的公司的新项目决定使用Vue的技能栈。
- 固然,如果你现在正在换工作,你会发现招聘前段的需求中,10个有8个都对Vue有或多或少的要求。
- 固然,最为学习者我们知道Vuejs现在非常火,可以说是前端必备的一个技能。
简朴认识一下Vuejs
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
- 渐进式意味着你可以将Vue作为你应用的一部门嵌入此中,带来更丰富的交互体验。
- 大概如果你希望将更多的业务逻辑使用Vue实现,那么Vue的焦点库以及其生态系统。
- 好比Core+Vue-router+Vuex,也可以满意你各种各样的需求。
与别的大型框架差别的是,Vue 被设计为可以自底向上逐层应用。Vue 的焦点库只关注视图层,不光易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库联合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
- Vue有许多特点和Web开辟中常见的高级功能。
- 解耦视图和数据
- 可复用组件
- 前端路由技能
- 状态管理
- 虚拟DOM
- 不需要一个个影象,以后逐步体会。
- 学习Vuejs的前提?
- 从零学习Vue开辟,并不需要你具备其他类似Angular、React,甚至是jQuery的履历。
- 但是你需要具备一定的HTML、CSS、JavaScript基础。
Vuejs安装方式
使用一个框架,我们第一步要做什么呢?安装下载它
安装Vue的方式有许多:
CDN引入
你可以选择引入开辟情况版本照旧生产情况版本。
- [/code] [size=4]下载和引入[/size]
- 我们可以通过在官网直接右键选择链接另存为,将文件下载下来。
- [align=center][img]https://img-blog.csdnimg.cn/20201231151334426.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center[/img][/align]
- [url=https://vuejs.org/js/vue.js]开辟情况[/url]
- [url=https://vuejs.org/js/vue.min.js]生产情况[/url]
- [size=4]NPM安装管理[/size]
- 后续我们通过webpack和CLI的使用,我们使用该方式。
- [size=5]Vuejs初体验[/size]
- [size=4]Hello Vuejs[/size]
- 我们来做简朴的体验
- [code] 01-HelloVuejs {{message}}
-
复制代码
- 创建Vue对象的时候,传入了一些options:{}
- {}中包罗了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很显着,我们这里是挂载到了id为app的元素上。
- {}中包罗了data属性:该属性中通常会存储一些数据。
- 这些数据可以是我们直接界说出来的,好比像上面这样。
- 也可以是来自网络,从服务器加载的。
- 欣赏器执行代码流程:
- 执行的13行显示出对应的HTML。
- 执行19行代码创建Vue实例,而且对原HTML举行剖析和修改。
- 这种编程模式属于声明式编程,我们可以不用更改界面,只改变数据,来体验一下Vue的响应式:
Vue列表展示
- 02-vue列表展示
- [list]
- [*]{{item}}
- [/list]
-
复制代码
- 现在我们来展示一个更加复杂的数据:数据列表。
- 好比我们现在从服务器申请过来一个列表。
- 希望展示到HTML中。
- HTML代码中,使用v-for指令。
- 而且,更重要的是,它照旧响应式的,也就是说当我们数组中的数据发生改变时,界面会自动改变。依然让我们实验下:
案例:计数器
- 现在,我们来实现一个小的计数器
- 这里,我们有用到了新的指令和属性
- 新的属性methods,该属性用于在Vue对选中界说方法。
- 新的指令:@click,该指令用于监听某个元素的点击事件,而且需要指定当发生点击时,执行的方法(通常是methods中界说的方法)
- 03-vue案例-计数器 [size=5]当前数据:{{counter}}[/size]
- + -
-
复制代码
Vuejs的MVVM
Vue中的MVVM
什么是MVVM呢?
View层:
- 视图层;
- 在我们前端开辟中,通长就是DOM层;
- 主要的作用是给用户展示各种信息;
Model层:
- 数据层;
- 数据大概是我们固定的死数据,更多的是来自服务器,从网络上请求下来的数据;
- 在前面的盘算器案例中,就是方法二中抽取出来的obj固然,内里的数据大概没有这么简朴;
VueModel层:
- 视图模子层;
- 视图模子是View和Model沟通的桥梁;
- 一方面实现了Data Binding(数据绑定);将Model的改变实时的反应到View中;
- 另一方面实现了DOM Listener(DOM监听),当DOM发生一些事件(点击、滚动、touch等)时,可以监听到。并在需要的情况下改变对应的Data;
- 计数器的MVVM
- 我们的计数器中就有严格的MVVM思想
- View依然是我们的DOM
- Model就是我们抽离出来的obj
- ViewModel就是我们创建的Vue对象实例
- 它们之间如何工作呢?
- 首先ViewModel通过Data Binding让obj中的数据实时在DOM中显示。
- 其次ViewModel通过DOM Listener来监听DOM事件,而且通过methods中的操纵,来改变obj中的数据。
- 有了Vue资助我们完成VueModel层的任务,在后续开辟,我们就可以专注于数据的处理惩罚,以及DOM的编写工作了。
来源:https://blog.csdn.net/weixin_46351593/article/details/112012377
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |