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

文章目录

• 
  
  
  
  • 认识Vuejs
    
  • 
    
    
    
    • 为什么学习Vuejs
      
    • 简朴认识一下Vuejs
      
       
    
  • Vuejs安装方式
    
  • 
    
    
    
    • CDN引入
      
    • 下载和引入
      
    • NPM安装管理
      
       
    
  • Vuejs初体验
    
  • 
    
    
    
    • Hello Vuejs
      
    • Vue列表展示
      
    • 案例：计数器
      
       
    
  • Vuejs的MVVM
    
  • 
    
    
    
    • Vue中的MVVM
      
    • 
      
      
      
      • View层：
        
      • Model层：
        
      • VueModel层：
        
         
      
      
    
  
  

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

复制代码

• 创建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]
3.                 +        -   
4.         

复制代码

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