vue2.0.js

 数据的渲染、数据同步  组件化、模块化 路由    ajax  数据流

Vue.js学习资源 

      中文官网：http://cn.vuejs.org/             源码：http://github.com/vuejs/vue  官方工具：http://github.com/vuejs 官方论坛：http://forum.vuejs.org/

vue实例对象：

 1.el:装载在页面的位置    2.template:html片段(我们使用的模板) 
 3.data:数据通过data对象载入  4.components:在根组件中引入其他子组件

一般的vue中只有一个根组件，通过new Vue()来注册；
组件中的data要避免直接引用赋值，要用function来实现，不要直接进行引用赋值(會互相影响)

Vue实例对象中的template属性与组件指令是同等的效果。
vue基本概念：

全局api：extand、component                       实例选项：el、template，data，componnets

实例属性、方法：$data、$on（都是带$符的）            指令：v-html、v-on（都是以v-开头的）       内置组件：<keep-alive></keep-alive>（可直接使用）

      

 

data里面的数据会被带到实例对象里面。  可通过  var a=new Vue(data:{apple}) 
a.apple访问。

https://www.cnblogs.com/caizhenbo/p/6418291.html  vue实例的生命周期

全局注册子主件是通过Vue.component()来实现的；但是一般不用全局注册，只需要在根节点中加入components参数.

    即便可以通过  <my-header></my-header> 调用此组件。

   

 内置组件： 

主组件的使用

                    

               h-->是一个参数，用于渲染的内置方法，将App组件渲染到绑定的元素中，或者页面中。

               在{{      }} 可以写js表达式

                     v-for数组  对象  子组件

   

   index---代表下标

                       　　 数组

     

                                       对象

  《====》 

   效果是组件的内容被渲染了好几遍。

   组件的作用是传值

　　　　　　　　  组件

　　　　　　　　　　　　　列表数据的同步更新

          

       触发列表的更新（只有这几个可以触发对象数组的data里的值的更新）

  直接复制列表,或者更改数组的长度不会更新。可以通过Vue.set来实现列表更新的效果。

 　　　　　　　　　Vue标签属性以及条件渲染 （http://www.cnblogs.com/xueweijie/p/6856095.html（v-bind的使用））

      

   与本身存在的class不冲突，并存          

   

   

   

     ：title=“obj” data: { obj: obj} 结果title="[object Object]" 返回对象的toString方法 

v-bind:title="arr"   arr: [1, 2, 3]  结果 arr="1,2,3"     它将返回和执行 arr.join(',') 相同的结果

                        事件绑定
1，内置事件绑定  

2，自定义事件绑定（子组件向外触发的自定义事件----》emit()触发事件，可传参数）

    父级
  子级（子组件向外触发的自定义事件，可传值）
 　　　　　　　　　　　　　　表单事件绑定（v-model数据双向绑定）
 
  myVal:[],这里存放的是input的value值
  myVal:'',这里存放的是单选input的value

    myVal:‘’,这里放的是select 的 input的value值（默认为空初始值）可以设置 myVal:'1'

||
 

    v-model-lazy: 表示内容输入完成点击回车或者失去焦点时数据才进行更新； 取代 input 监听 change 事件

    v-model.number  输入数字时，将内容类型设置为数字型；

   v-model.trim="show"：将输入内容前后的空格去除

       　　　　　　计算属性和数据监听

computed计算属性会被缓存，它会根据被调用的属性进行更新 computed中的属性同data中定义的属性，可以直接访问。

      （过滤掉数字）

可以通过调用方法（methods） 及时更新    Date.now()

watch数据监听，多用于数据需要增删改查     

计算属性的优点：可以直接根据data的属性动态的更改（data中myValue的值变化会同步反映到计算属性里）（计算属性会缓存所依赖的那个值，直到那个值发生变化，否则不会重新取值）

方法的优点：调用方法的时候才会更新，即使data中myValue的值没有变化，调用时依然会去重新取值

 this.data中的数据    this.methods中的方法
　　　　　　　　　　　　　　　　　　　　组件之间的通信
1，父组件如何渲染子组件的内容  引入--->注册---> 使用该组件（组件名标签   eg:<com-a ：link-m=" ">）
<<<======>>>>   

           (可动态引入组件)

2,父组件向子组件传递信息通过props  子组件向父组件信息通过 $emit() 
            (父组件向子组件传递的信息   在子组件中写props)

注意pros的名字需要加单引号     在子组件template使用（使用必须驼峰，不能中线命名）

 （父）    
        （动态属性传递）

 （父）   （子）
  

（父组件向子组件传递模板（插槽）--->子组件中使用<slot></slot>）

（子组件向父组件传递信息---》emit()触发事件，可传参数）（参考事件绑定2   @my-event） 

      　　　　　　　　　　　　   过渡动画
   

 

1，css过渡  
  left  right定位的值不会被transition：接受，可通过transform实现 。  
    (key区分标签，否则显示有问题)

    transtion的mode 

2.js过渡----->  v-bind:css="false"可以免于css的过渡的影响

   

   
引入jQuery（调用动画animate（）方法，el是dom  done参数是enter与leave函数中必须的） jquery获取dom元素执行操作

  　　　　　　　　　　　　　　自定义指令
   （局部自定义指令）    （全局自定义指令） 

                      bind：将我们的元素绑定到指令上，只执行一次  el：代表绑定的元素。binding.value表示的是使用了指令元素的指令的值

 

　　  先执行bind 后执行inserted  

                                插件
1,安装    保存到package.json中2，main.js中引用 

3， 注册   
4，实例化，并在跟组件中引用   （Vue-resource的使用  http://blog.csdn.net/u013778905/article/details/54235906）

                                         单文件组件
1，单文件组件即  .vue组件。其中。vue组件中有（<template>   <script>  <style>）
2,单文件组件的实现是基于webpack+vue-loader。

 参考知识

 github for windows

MobaXterm

https://segmentfault.com/u/fishenal

bootstrap 布局模板

 http://blog.csdn.net/qq_34543438/article/details/72868546?locationNum=3&fps=1    vue 项目的目录结构以及说明

 

模拟数据：（Mock模拟数据）

https://blog.csdn.net/qq_34645412/article/details/78833860