Vue

最近因为公司整体业务方向调整，项目组频繁波动 ～ ～ ～ ，经过了慎重的考虑，我们决定要用Vue来代替原有
的Angular2技术栈，我们这些老油条是无所谓的，什么轮子都能跑，但是Angular2不适合新人，学习曲线太陡
峭，不利于新人培养，以此为背景，我将记录下这一段的学习历程

1.怎么学

一贯的原则都是先上官网，直接撸，顺便记录下，好做培训官网地址

2.DEMO

从官网上直接找的一个DEMO，其实就是展示一个字符串
<div id="app">{{ message }}</div>
    var app = new Vue({
      el: '#app',
      data: { message: 'Hi!' }
    });
之前也有接触过EmberJS和Angular1,Angular2，大致看了一下，有太多的似曾相识

3.一点交互

一个系统与用户的交流是非常重要的，那么我们就在DEMO的基础上来添加一些交互
<div id="app" @click="resetMessage" >{{ message }}</div>
    var app = new Vue({
      el: '#app',
      data: { message: 'Hi!' },
      methods: { resetMessage(){ this.message = '我被点击了';}}
    });
@click就是我们所添加的第一个交互，完整的写法是这样的＝> v-on:click = “resetMessage”, 当Div被点击的时候，
我们改变页面上的message,怎么样是不是很简单，于此相同的我们也有一些其他的原生DOM事件，比如：click,
hover,mouseEnter,mouseOut,focus,keyUp,keyDown,change… ，那么这个v-on到底是什么呢，就是Vue自身提供
指令集中的一个

4.指令

官方的API给出了14个指令，v-text,v-html,v-show,v-if,v-else,v-else-if…我们挑几个看一下，还是那段DEMO
v-text很明显就可以看到是做什么的，用来展示信息。不多说
<div id="app" v-text="message" ></div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: 'Hi!' }
        });
v-html 其实就是更新元素的innerHtml,不会作为Vue模板进行编译
<div id="app" v-html="message" ></div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: 'Hi!' }
        });
v-show && v-if(v-if v-else-if v-else) 展示与隐藏
两者是有区别的,v-show是控制DOM的display属性,而v-if是直接创建或销毁组件或者模板
<div id="app" v-if="message" ></div>
    <div id="app" v-show="message" ></div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: true }
        });
v-for列表渲染
<div id="app"><span  v-for="m in message" :key="m">{{m}}</span></div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: [1,2,3] }
        });
v-model绑定在组件,select,输入框上,双向绑定
<input id="app" v-model="message">
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: '' }
        });
v-once适合用于提升性能,只渲染一次,重新渲染的时候会视为静态内容,不进行编译渲染
<div id="app" v-once>{{message}}</div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: '不变' }
        });
v-bind动态绑定属性
<div id="app" v-bind:title = "message">{{message}}</div>
    <div id="appDemo" >{{ message }}</div>
        var app = new Vue({
          el: '#app',
          data: { message: 'title' }
        });
v-pre(跳过编译) v-cloak(最后编译)
<div id="app" v-pre>{{message}}</div>
    <div id="app" v-clock>{{message}}</div>