Vue的感觉

什么是Vue.js

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
• 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

• 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
  • 企业中，使用框架，能够提高开发的效率；

• 提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）

• 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

• 增强自己就业时候的竞争力
  • 人无我有，人有我优
  • 你平时不忙的时候，都在干嘛？

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

  • node 中的 express；

• 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

  • 1. 从Jquery 切换到 Zepto
  • 2. 从 EJS 切换到 art-template

简单介绍MVC、MVP、MVVM、MVPVM区别

• MVC
  View 持有了Controller，把事件传递给Controller，Controller 由此去触发Model层的事件，Model更新完数据（网络或者本地数据）之后触发View的更新事件

  
  

• MVP

  
  
  
  

  咋看一下MVP只是MVC的变更版，把C层替换成了P层，实则不是这样的，最根本的是添加了Presenter层。

  
  
  
  MVP其实是MVC的封装和演化，Controller被拆分，只用它处理View的点击事件，数据绑定，等处理，而View被拆分，更加专注于视图的更新，只做跟视图相关的操作，而Presenter被独立出来，用于沟通View和Model之间的联系，Model不能直接作用于View 的更新，只能通过Presenter来通知View进行视图的刷新，比如showLoading（），showEmpty()，showToast（）等等，这样View就完全被独立出来了，只是被动接受Presenter的命令，这样避免了View 有过多的逻辑处理，更加简单。Presenter持有了Model。Model 只用于处理跟数据获取相关的逻辑。

• MVVM
  又称状态机制，View和ViewModel 是进行绑定的，改变ViewModel 就会直接作用到View视图上，而View 会把事件传递给ViewModel,ViewModel去对Model进行操作并接受更新。

  
  

• MVPVM
  可以看到MVPVM 其实就是MVP的变种，加入了MVVM事件特性，增加了ViewModel，功能分类：
  View：只做视图更新操作
  Model: 只做数据处理，网络数据 、本地数据
  Presenter: 只做业务逻辑处理，View或者Model 事件分发
  ViewModel: 绑定View 和 Model，添加数据变更监视器

  
  

模板语法

• 插值
  插值是Vue用来实现使用数据绑定的一种方式,在Vue中常用的方式如下:

  • 文本插值
    使用"Mustache"语法(双括号 {{keyName}} 语法 直接输出与键名匹配的键值),实现文本插值对数据的基本绑定: 在解析过程中Mustache标签会被相应数据对象的属性的值替换,每当这个属性变化时它也会更新.

  • 原始HTML
    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令.

  • JavaScript表达式
    迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

• 指令
  指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

• 缩写
  v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application)时，v- 前缀也变得没那么重要了。

Vue的基本代码

    
    
    

    
    


    
    

        
       姓名： {{name}}
        
年龄：{{age}}
        
{{haha}}
        

        


        点我一下

        再点我试试

        
aaaaaaa

    

    
    

v-cloak 代码

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112

    
    
    
    

    
    


    
  


  

  

跑马灯效果

  
  
  
  
  
  



  
  

    
    

    
{{ msg }}

  

  

事件修饰符

v-model 指令的学习

  
  
  
  
  



  

    
{{ msg }}

    
    

    
    
    
    
  

  

简易的计算器

  
  
  
  
  



  

    

    
      +
      -
      *
      /
    

    

    

    
  

  

Vue中样式-class

  
  
  
  
  
  



  

    

    
    

    
    

    
    

    
    
这是一个很大很大的H1，大到你无法想象！！！


  

  

Vue中样式-style

  
  
  
  
  



  

    
    

    
这是一个h1
  

  

v-for循环普通数组

  
  
  
  
  



  

    

    
索引值：{{i}} --- 每一项：{{item}}

  

  

v-for循环对象数组

  
  
  
  
  



  

    
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
  

  

v-for循环对象

  
  
  
  
  



  

    
    
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
  

  

v-for迭代数字

  
  
  
  
  



  

    
    
    
这是第 {{ count }} 次循环
  

  

v-for循环中key属性的使用

  
  
  
  
  



  


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

      {{item.id}} --- {{item.name}}
    
  

  

v-if和v-show的使用

  
  
  
  
  



  


    
    

    
    

    
    

    
    
    
这是用v-if控制的元素
    
这是用v-show控制的元素