vue遵循MVVM模式，编码简洁, 体积小, 运行效率高, 移动/PC端开发，借鉴angular的模板和数据绑定技术，借鉴react的组件化和虚拟DOM技术。
vue包含一系列的扩展插件(库):
* vue-cli: vue脚手架
* vue-resource(axios): ajax请求
* vue-router: 路由
* vuex: 状态管理
* vue-lazyload: 图片懒加载
* vue-scroller: 页面滑动相关
* mint-ui: 基于vue的组件库(移动端)
* element-ui: 基于vue的组件库(PC端)
简单的引入使用vue方法<script src="...dist/vue.js"></script>

<div id="app">  {{ message }} </div>这里是文本插值，用声明的变量代替即可
var vm = new Vue({   //new一个实例
  el: '#app',   //挂载位置
  data: {
    message: 'Hello Vue!'
  }
})

还有v-text和v-html
<p v-html="ht"></p>
//这里会把ht声明的html代码块渲染出来，里面不能再加别的了。
<span v-text="name"></span><span>你好</span>
//把声明的name内容渲染到第一个span里面，同样里面不能再加别的。

v-bind

用于给元素绑定属性，v-bind:属性名="表达式"

<p v-bind:title="title">看title</p>
<p v-bind:title="1*6" v-html="ht"></p>
<p v-bind:title="1*6" >{{name}}</p>
<p v-bind:title="title" >{{name}}</p>
<p v-bind:a="title" >{{name}}</p>
属性名可以是声明的变量，可以是表达式
后面的表达式可以是声明的变量，也可以是表达式

v-on

用于绑定事件方法
v-on:事件名=“函数方法表达式”

<input type="text" v-on:input="change"/>
methods:{
       change(){   console.log("gaibianle");  }
        }

<p>{{fn()}}</p>   //页面加载即执行，会打印123
fn(){   console.log(123);   }  //methods里面定义的方法
方法中的this都指向实例vm
<button @click="doThis"></button>//简写模式，v-on:简写为@

v-model双向数据绑定

<input type="text" v-model="name">
<p>{{name}}</p>
<input type="text" v-model.lazy="msg">//懒惰模式

数据双向绑定，可以使用在<input><select><textarea>上
支持的修饰符有.lazy懒惰模式 .number允许数字 .trim去除空格

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

<span v-once>This will never change: {{msg}}</span>
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>

v-for渲染列表指令

语法v-for="item in list"，需要生成几个li，就把作用到li上

list:["leo","momo","miaov","zhangsen"],//定义一个数组list或obj对象
obj:{
        a:1,
        b:2,
        c:3
       }
<ul><li v-for="(value,index) in list">第{{index+1}}个是{{value}}</li></ul>
//将list内容渲染到li上，可以没有index下标。
<ul><li v-for="(value,key,index) in obj">第{{index+1}}个{{key}}--{{value}}</li></ul>
//也可以遍历obj对象，注意参数顺序
下面是一个简易留言板，一个input下面一个ul li
data:{
      list:[        
          {id:001,
           val:"今天心情真不错。"},
          {id:002,
           val:"今天心情糟糕透了！"}
            ],
//预定义一个list，里面是一个对象，对象里包含id和留言内容
           shuru:"",
//预定义一个空的输入字段，用v-model和input绑定
        },
        methods:{
            send(){
                this.list.push({
                    id:Date.now(),
                    val:this.shuru
                });
                this.shuru=""
            }
        }
//点击发送发生事件，将input内输入的数据this.shuru用push到list数组最后面，
//注意写法格式，id用时间戳，val:this.shuru，最后将输入内容清空

v-if和v-show

当需要频繁切换显示隐藏时用v-show，减少页面渲染造成的资源浪费。

<input type="checkbox" v-model="check">
<p v-if="check">if</p>
<p v-show="check">show</p>
check:true//给一个默认true，点击选择按钮更改真假，同时控制下面元素的显示。

1). el

指定dom标签容器的选择器
Vue就会管理对应的标签及其子标签

2). data

对象或函数类型
指定初始化状态属性数据的对象
vm也会自动拥有data中所有属性
页面中可以直接访问使用
数据代理: 由vm对象来代理对data中所有属性的操作(读/写)

3). methods

包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx

4). computed

在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
包含多个方法的对象
对状态属性进行计算返回一个新的数据, 供页面获取显示
一般情况下是相当于是一个只读的属性
利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
如何给对象定义get/set属性
在创建对象时指定: get name () {return xxx} / set name (value) {}
对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})

5). watch

包含多个属性监视的对象
分为一般监视和深度监视
    通过vm对象的$watch()或 watch 配置来监视指定的属性
    当属性变化时, 回调函数自动调用, 在函数内部进行计算
    通过 getter/setter 实现对属性数据的显示和监视
    计算属性存在缓存, 多次读取只执行一次 getter 计算
    xxx: function(value){}
    xxx : {
        deep : true,
        handler : fun(value)
    }
另一种添加监视方式: vm.$watch('xxx', function(value){})

4. 过渡动画

利用vue去操控css的transition/animation动画
模板: 使用<transition name='xxx'>包含带动画的标签
css样式
    .fade-enter-active: 进入过程, 指定进入的transition
    .fade-leave-active: 离开过程, 指定离开的transition
    .xxx-enter, .xxx-leave-to: 指定隐藏的样式
编码例子
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity .5s
    }
    .xxx-enter, .xxx-leave-to {
      opacity: 0
    }
    
    <transition name="xxx">
      <p v-if="show">hello</p>
    </transition>

5. 生命周期

vm/组件对象
生命周期图
主要的生命周期函数(钩子)
    created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)
    beforeDestroy(): 做一些收尾的工作

6. 自定义过滤器

对需要显示的数据进行格式化后再显示
    moment.js库的使用

<p>{{date | geshi}}</p>
Vue.filter("geshi",function (val) {
        return moment(val).format("YYYY-MM-DD HH:mm:ss");
    });

2). 编码

1). 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })
2). 使用过滤器
    <div>{{myData | filterName}}</div>
    <div>{{myData | filterName(arg)}}</div>
        过滤器对要显示的数据进行特定格式化后再显示
        并没有改变原本的数据, 可是产生新的对应的数据

7. vue内置指令

v-text/v-html: 指定标签体
    * v-text : 当作纯文本
    * v-html : 将value作为html标签来解析
v-if v-else v-show: 显示/隐藏元素
    * v-if : 如果vlaue为true, 当前标签会输出在页面中
    * v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
    * v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for : 遍历
    * 遍历数组 : v-for="(person, index) in persons"   
    * 遍历对象 : v-for="value in person"   $key
v-on : 绑定事件监听
    * v-on:事件名, 可以缩写为: @事件名
    * 监视具体的按键: @keyup.keyCode   @keyup.enter
    * 停止事件的冒泡和阻止事件默认行为: @click.stop   @click.prevent
    * 隐含对象: $event
v-bind : 强制绑定解析表达式  
    * html标签属性是不支持表达式的, 就可以使用v-bind
    * 可以缩写为:  :id='name'
    * :class
      * :class="a"
        * :class="{classA : isA, classB : isB}"
        * :class="[classA, classB]"
    * :style
        :style="{color : color}"
v-model
    * 双向数据绑定
    * 自动收集用户输入数据

<style> [v-clock] display:none; </style>
<p v-clock>{{msg}}</p>

事件修饰符,按键修饰符

<h2>1. 绑定监听</h2>
<button v-on:click="test1">Greet</button>
<button @click="test1">Greet2</button>
<button @click="test2($event, 'hello')">Greet3</button>

<h2>2. 事件修饰符</h2>
<!-- 阻止事件默认行为 -->
<a href="http://www.baidu.com" @click.prevent="test3">百度一下</a>
<!-- 停止事件冒泡 -->
<div style="width: 200px;height: 200px;background: red" @click="test4">
  <div style="width: 100px;height: 100px;background: green" @click.stop="test5"></div>
</div>

<h2>3. 按键修饰符</h2>
<input @keyup.8="test6">
<input @keyup.enter="test6">

ref获取dom节点

<div ref="pp">这是一段话</div>
<button type="primary" @click="changeMsg">点击</button>
methods:{
        changeMsg(){
          this.$refs.pp.innerHTML="修改了"
        }
      }

9，v-for的使用

基础使用
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
v-for 还支持一个可选的第二个参数为当前项的索引
<ul>
  <li v-for="(item, index) in items">
     {{ index }} - {{ item.message }}
  </li>
</ul>
也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法
<div v-for="item of items"></div>
你也可以用带有 v-for 的 <template> 标签来渲染多个元素块
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

对象迭代 v-for，通过一个对象的属性来迭代。
<ul>
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

对象迭代 v-for也可以提供第二个的参数为键名
<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

对象迭代 v-for第三个参数为索引：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

例子：
<ul>
       <li v-for="(value,key,index) in list" :key="index">
            {{index}}——{{key}}——{{value}}
       </li>
</ul>
结果如下
0——name——张三
1——age——26

整数迭代 v-for，v-for 也可以取整数。
<div>
  <span v-for="n in 10">{{ n }}</span>
</div>
结果：1 2 3 4 5 6 7 8 9 10