请选择 进入手机版 | 继续访问电脑版

Vue笔记一——Vue安装与体验

[复制链接]
听见深浅 发表于 2021-1-1 17:48:11 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
文章目录



认识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引入

你可以选择引入开辟情况版本照旧生产情况版本
  1. [/code] [size=4]下载和引入[/size]
  2. 我们可以通过在官网直接右键选择链接另存为,将文件下载下来。
  3. [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]
  4. [url=https://vuejs.org/js/vue.js]开辟情况[/url]
  5. [url=https://vuejs.org/js/vue.min.js]生产情况[/url]
  6. [size=4]NPM安装管理[/size]
  7. 后续我们通过webpack和CLI的使用,我们使用该方式。
  8. [size=5]Vuejs初体验[/size]
  9. [size=4]Hello Vuejs[/size]
  10. 我们来做简朴的体验
  11. [code]            01-HelloVuejs    {{message}}
  12.         
复制代码


  • 创建Vue对象的时候,传入了一些options:{}

    • {}中包罗了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很显着,我们这里是挂载到了id为app的元素上。
    • {}中包罗了data属性:该属性中通常会存储一些数据。

      • 这些数据可以是我们直接界说出来的,好比像上面这样。
      • 也可以是来自网络,从服务器加载的。


  • 欣赏器执行代码流程

    • 执行的13行显示出对应的HTML。
    • 执行19行代码创建Vue实例,而且对原HTML举行剖析和修改。




  • 这种编程模式属于声明式编程,我们可以不用更改界面,只改变数据,来体验一下Vue的响应式:

Vue列表展示

  1.             02-vue列表展示            
  2. [list]            
  3. [*]{{item}}        
  4. [/list]   
  5.         
复制代码



  • 现在我们来展示一个更加复杂的数据:数据列表

    • 好比我们现在从服务器申请过来一个列表。
    • 希望展示到HTML中。

  • HTML代码中,使用v-for指令。

    • 该指令反面会详细教学,这里先学会使用。

  • 而且,更重要的是,它照旧响应式的,也就是说当我们数组中的数据发生改变时,界面会自动改变。依然让我们实验下:

案例:计数器



  • 现在,我们来实现一个小的计数器

    • 点击+计数器+1
    • 点击-计数器-1

  • 这里,我们有用到了新的指令和属性

    • 新的属性methods,该属性用于在Vue对选中界说方法。
    • 新的指令:@click,该指令用于监听某个元素的点击事件,而且需要指定当发生点击时,执行的方法(通常是methods中界说的方法)

  1.             03-vue案例-计数器            [size=5]当前数据:{{counter}}[/size]
  2.                 +        -   
  3.         
复制代码

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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )