近来由于要重构APP项目，在对比了react和Vue，加上前期已经有了react开辟的履历，照样想尝试一下VUE，更小更便利的开辟体式格局。

1.vue 初始化装置官网供应的NPM要领

 $ npm install vue
 # 全局装置 vue-cli
 $ npm install --global vue-cli
 # 建立一个基于 webpack 模板的新项目
 $ vue init webpack my-project
 # 装置依靠，走你
 $ cd my-project
 $ npm run dev

2.初入Vue-demo

<div id="vue_det">
   <h1>site : {{site}}</h1>
   <h1>url : {{url}}</h1>
   <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
   var vm = new Vue({
       el: '#vue_det',
       data: {
           site: "菜鸟教程",
           url: "www.runoob.com",
           alexa: "10000"
       },
       methods: {
           details: function() {
               return  this.site + " - 学的不仅是手艺，更是妄想！";
           }
       }
   })
</script>

3.Vue-js 指令

• Vue.set 要领用来新增对象的属性

• • vue-html 模版指令 vue不是字符串模版衬着，所以须要用vue-html来衬着dom

    <div id="app">
     <div v-html="message"></div>
    </div> 
     <script>
        new Vue({
          el: '#app',
          data: {
            message: '<h1>菜鸟教程</h1>'
          }
        })
        </script>

  • v-bind HTML 属性中的值应运用 v-bind 指令（缩写体式格局 ：tile=’XXXX’）。 属性v-bind:title=’我是title属性’
• v-if v-else v-else-if 前提推断语句

• v-show 简朴语句 ，有缓存，假如是屡次操纵，发起用v-show

  • 一般来说，v-if 有更高的切换斲丧而 v-show 有更高的初始衬着斲丧。因而，假如须要频仍切换 v-show 较好，假如在运行时前提不大可能转变 v-if 较好。
• v-on 绑定事宜 缩写体式格局 @click:{{functionName()}}
• v-for 轮回迭代 for-in
• v-model用在表单控件上的，用于完成双向数据绑定，所以假如你用在除了表单控件之外的标签是没有任何效果的。

4.Vue.js 盘算属性

<div id="app">
 <p>原始字符串: {{ message }}</p>
 <p>盘算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {
   message: 'Runoob!'
 },
 computed: {
   // 盘算属性的 getter
   reversedMessage: function () {
     // `this` 指向 vm 实例
     return this.message.split('').reverse().join('')
   }
 }
})
</script>

我们能够运用 methods 来替换 computed，效果上两个都是一样的，然则 computed 是基于它的依靠缓存，只要相干依靠发作转变时才会从新取值。而运用 methods ，在从新衬着的时刻，函数总会从新挪用实行。
细致请参考

5.Vue.js 监听属性

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = val * 1000;
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一个实例要领
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 转变后挪用
    document.getElementById ("info").innerHTML = "修正前值为: " + oldValue + "，修正后值为: " + newValue;
})
</script>

细致参考

6.v-on事宜

.stop
.prevent
.capture
.self
.once
<!-- 阻挠单击事宜冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事宜不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符能够串连  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只要修饰符 -->
<form v-on:submit.prevent></form>
<!-- 增加事宜侦听器时运用事宜捕捉形式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事宜在该元素自身（而不是子元素）触发时触发还调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事宜只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

7 .自定义事宜 我们能够运用 v-on 绑定自定义事宜,

每一个 Vue 实例都完成了事宜接口(Events interface)，即：
运用 $on(eventName) 监听事宜
运用 $emit(eventName) 触发事宜

8. v-model 双向绑定修饰符

.lazy
在默许情况下， v-model 在 input 事宜中同步输入框的值与数据，但你能够增加一个修饰符 lazy ，从而转变为在 change 事宜中同步：

<!-- 在 "change" 而不是 "input" 事宜中更新 -->
<input v-model.lazy="msg" >
.number
假如想自动将用户的输入值转为 Number 范例（假如原值的转换效果为 NaN 则返回原值），能够增加一个修饰符 number 给 v-model 来处置惩罚输入值：

<input v-model.number="age" type="number">
这一般很有效，由于在 type="number" 时 HTML 中输入的值也总是会返回字符串范例。

.trim
假如要自动过滤用户输入的首尾空格，能够增加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">

入门文档