摘要：改变其中的任何一层，另外一层都会改变。插值相信你也注意到了，通过的形式就能取到的值，并与进行绑定。中改变中的值时相应也改变了中的，从而也得到改变。上面的代码改为这样则不会随着数据的改变而更新。顾名思义，用于条件判断，和是一对。

什么是Vue.js

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7

准备

我推荐使用sublime text作为编辑器，关于这个编辑器可以看我这篇文章。在package control中安装

Vuejs Snippets

Vue Syntax Highlight

推荐使用npm管理,新建两个文件app.html,app.js,为了美观使用bootstrap，我们的页面模板看起来是这样:

    
    
    



    

        

            
Vue demo
            

            .......
            
        
    

安装

使用npm安装：

npm install vue

当然你也可以在github上clone最新的版本并作为单文件引入，或者使用CDN:

http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js

HelloWorld

动手写第一个Vue.js 应用吧。
app.html:

    
{{message}}
    

app.js:

new Vue({
    el:"#app",
    data: {
        message:"hello vue.js."
    }
});

创建Vue实例

在使用Vue.js之前，我们需要先像这样实例化一个Vue对象：

new Vue({
   el:"#app"
});

双向数据绑定

就像HelloWorld展示的那样，app.html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变。

插值

相信你也注意到了，通过{{value}}的形式就能取到value的值，并与value进行绑定。HelloWorld中改变input中的值时相应也改变了app.js中的message，从而{{message}}也得到改变。上面的代码改为这样：

{{*message}}

则message不会随着数据的改变而更新。同时还支持一些简单的表达式：

{{message + "vue is awesome"}}
{{ message.split("").reverse().join("") }}

常用的指令 v-model

v-model可用于一些表单元素,常见的input,checkbox,radio,select:

  A
  B
  C



Selected: {{ selected | json }}

v-for

列表渲染在实际开发中非常常见，vue.js使用v-for这个指令就能完成，v-for取代了1.0以前版本中的v-repeat。在app.js中准备一些数据:

new Vue({
        el: "#app",
        data: {
            book: {
                id: 0,
                author: "",
                name: "",
                price: ""
            },
            books: [{
                id: 1,
                author: "曹雪芹",
                name: "红楼梦",
                price: 32.0
            }, {
                id: 2,
                author: "施耐庵",
                name: "水浒传",
                price: 30.0
            }, {
                id: "3",
                author: "罗贯中",
                name: "三国演义",
                price: 24.0
            }, {
                id: 4,
                author: "吴承恩",
                name: "西游记",
                price: 20.0
            }]
        }
 })

在data里我们设置了两个数据book和book[] books，在app.html中我们只要这样就能获取到数据了:

 
   {{book.id}}
   {{book.name}}
   {{book.author}}
   {{book.price}}

如果你比较细心的话，在数据还未加载完时是会有闪烁的情况出现，解决方法也很简单，使用v-cloak,然后定义css:

 [v-cloak] { display: none }

v-on

vue.js通过v-on完成事件处理与绑定，比如为一个button绑定click事件，我们就可以这么写:

doSomething

也可以缩写:

doSomething

我们需要为v-on传入事件参数,然后在vue的实例中声明doSomething这个方法就可以调用了:

new Vue({
  el: "#app",
  methods: {
    doSomething: function () {
      /...../
    }
  }
})

接着上面书的例子，我们用v-model绑定form：

   

     
添加书籍
     

           书名
           
     
     

            作者
            
     
     

              价格
              
      
      添加
    

在app.js中增加我们的addBook方法:

 methods: {
        addBook: function() {
            //计算书的id
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            //将input中的数据重置
            this.book = "";
        }
    }
    

我们再健全一下功能，增加一个删除按钮:

删除

delBook方法：

  delBook:function(book){
       this.books.$remove(book);
  }

vue.js为数组扩展了$remove方法，查找并删除我们作为参数传递过去的book。

v-if/v-else/v-show

顾名思义，v-if用于条件判断，和v-else是一对。用法也很简单，下面的代码是将id为偶数的操作按钮换个样式:

这里用到了