摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发

1，Vue基本语法和概念
2， 打包工具 Webpack , Gulp
3，实战操作

参考文献：
官网： https://cn.vuejs.org/v2/guide/
官方资料库： https://github.com/vuejs/awes...
全家桶： https://github.com/vuejs/vue-cli
Webpack全家桶文档： http://vuejs-templates.github...
Vue Router： https://router.vuejs.org/
Vuex： https://vuex.vuejs.org/
Vue-resource： https://github.com/pagekit/vu...
Element-UI： http://element.eleme.io/#/zh-CN

VUE.js前端框架（借助Wexx可以实现手机App开发）；React前端框架；

Vue.js是一套构造用户界面的框架，只关于视图层；

前端的主要工作室跟用户界面打交道，MVC中的V，实现界面效果；框架是为了提高开发效率；

在Vue中，一个核心的概念，就是让用户不在操作DOM元素，解放了用户的双手（帮助我们减少不必要的DOM操作，【双向绑定概念】通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不在关心DOM是如何渲染的了）

Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。

框架是一整套的解决方案；对项目的侵入性较大， 项目在进行中时，更作框架更换是不可取的；

库（插件）：库是提供某一个小功能，对项目的侵入性较小，如果某个库无法满足开发需求，则可以很容易切换到其它库实现需求
-1. 从Jquery 切换到 Zepto
-2. 从EJS 切换到 art-template

MVC 是后端的分层开发概念；

MVVM 是端视图层的概念
MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M,V,VM三个页面
其中VM 是MVVM 思想的核心；因为VM是M 和V之间的调度者
前端页面中使用MVVM的思想，主要是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定（由VM提供的）

现在官网下载VUE

在编辑器中导入

    
    
    
    
    
    



    
    
    

        
{{ msg }}
    

    

v-cloak 能够解决 插值表达式闪烁的问题

v-text 会覆盖元素中原本的内容，但是插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空.

v-html 可以解析表达式中的

等html标签

v-bind的使用

用于绑定属性的指令,例如给input标签下的 title 绑定 属性show ，使得鼠标放置在按钮时呈现show中的内容

鼠标放置在按钮时，将显示“这是一个自己定义的titile”

var vm = new Vue({
      el: "#app",
      data: {
        msg: "123",
        msg2: "
哈哈，我是一个大大的H1， 我大，我骄傲
",
        show: "这是一个自己定义的title"
      },

ps. v-bind 中，可以写合法的JS表达式，因此可以在后面添加表达式，比如v-bind:title="show+"123"";
注意： v-bind: 指令可以被简写为 :要绑定的属性

  :title="show+"123"";

v-on指令定义Vue中的事件

在不操作DOM的情况下，实现事件绑定机制

ps. 同样的 v-on 可以简写为 @

methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        zxc: function () {
          alert("Hello")
        }
      }

跑马灯效果制作

难点：

多次点击"启动"时，需要多次点击"停止"

注意局部变量的访问问题

当点击"启动"时将定时器定义为null，再次点击无效,将"停止"定义为null，再次点击无效果

分析：

 1. 给 【浪起来】 按钮，绑定一个点击事件   `v-on`   @
 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；
 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；

  

    
    

    
{{ msg }}

  

  

.self 只当事件在该元素本身（比如不是子元素）触发回调
只能放在元素本身；当下面代码中的.self放在input当中时，依旧会发生冒泡事件

    

            

.once 事件只触发一次
只触发一次事件处理函数
腾讯网

v-model和数据双向绑定
v-bind只能实现数据的单线绑定，从M层绑定到V层；
v-model 只能用在表单元素中
其中包括：input(redio,text.address,email...) select checkbox textarea

  
{{ message }}
  

var app6 = new Vue({
  el: "#app-6",
  data: {
    message: "Hello Vue!"
  }
})
通过双向绑定完成--计算器Demo
定义3个input标签text属性，1个select标签
  

    

    
      +
      -
      *
      /
    

    

    

    
  

在data下定义事件，初始化值。可以选用switch做判断循环；也可以使用 eval方案（该方法可直接判断加减乘除符号）
  
在Vue中使用样式（绑定HTML CSS Class）
以下例子将的将于此代码，为方便理解在此展示出来
  

  

ps.传统实现方式：  
这是一个邪恶的H1



第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定
这是一个邪恶的H1


在数组中使用三元表达式

当flag为真时，执行active样式，否则不执行
 
这是一个邪恶的H1


在数组中使用 对象来代替三元表达式，提高代码的可读性


当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖

这是一个邪恶的H1
可以在class中直接写，也可以将对象写在data中，直接引用其属性.
 
这是一个很大很大的H1，大到你无法想象！！！

在Vue中使用样式（内联样式）
直接在元素上通过 :style 的形式，书写样式对象
这是一个善良的H1
将样式对象，定义到 data 中，并直接引用到 :style 中
data: {
        h1StyleObj: { color: "red", "font-size": "40px", "font-weight": "200" }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中：
这是一个善良的H1
在 :style 中通过数组，引用多个 data 上的样式对象
在data上定义样式：
data: {
        h1StyleObj: { color: "red", "font-size": "40px", "font-weight": "200" },
        h1StyleObj2: { fontStyle: "italic" }
}
在元素中，通过属性绑定的形式，将样式对象应用到元素中：
这是一个善良的H1

Vue指令v-for和key

ps.在使用2.X以上的版本时，key属性是必须有的
循环普通数组
 

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

 


循环对象数组

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

 

循环对象
 

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

 

迭代数子
  

    
    
    
这是第 {{ count }} 次循环
  

  
Vue中 v-for 中的key属性


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

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



    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    

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


v-if 和 v-show



    
    

    
    

    
    

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