版本:1.0
教程推荐:https://laravist.com/series/vue-js-1-0-in-action-series
官方教程:https://cn.vuejs.org/guide
个人感觉真的很好用,有些功能如果用原生js来写的话会非常麻烦,用vue.js真的很方便,真的是一个很有潜力的框架,而且2.0也要来了~

下面代码的具体效果:http://demo.laji.blog/study/vuejs
数据双向绑定,循环输出数据/渲染列表

<div id="demo" class="container">
    <h3 v-if="iftitle">数据双向绑定</h3>
    <input type="text" class="form-control" v-model="test">
    <h3>循环输出数据/渲染列表</h3>
    <ul>
        <li v-for="person in persons">{{person.name}}({{person.sex}},{{person.age}})</li>
    </ul>
</div>
var demo = new Vue({
    el:'#demo',
    data:{
        iftitle:true,
        test:'Hello World',
        persons:[
            { name:'张三',age:18,sex:'男' },
            { name:'李四',age:25,sex:'女' },
            { name:'王五',age:40,sex:'男' }
        ]
    }
});

处理用户输入/事件["v-on:"可以用"@"来简写]

<div id="demo2" class="container">
<h3>处理用户输入/事件["v-on:"可以用"@"来简写]</h3>
    <input type="text" class="form-control" v-model="name" v-on:keyup.enter="addName">
    <button class="btn btn-block btn-success" v-on:click="addName">添加名字</button>
    <ul>
        <li v-for="name in names"><span>{{name}}</span> <button @click="removeName($index)">删除</button></li>
    </ul>
</div>
var demo2 = new Vue({
    el:'#demo2',
    data:{
        name:'',
        names:['张三','李四','王五']
    },
    methods:{
        addName:function () {
            if(this.name.trim()){
                this.names.push(this.name);
                this.name = '';
            }
        },
        removeName:function (index) {
            this.names.splice(index,1)
        }
    }
});

数据排序[升序降序]

<div id="demo3" class="container">
<h3>数据排序[升序降序]</h3>
    <table class="table table-striped">
        <thead>
            <tr>
                <th><a href="javascript:;" v-on:click="sortBy('name')">姓名</a></th>
                <th><a href="javascript:;" v-on:click="sortBy('age')">年龄</a></th>
                <th><a href="javascript:;" v-on:click="sortBy('sex')">性别</a></th>
            </tr>
        <tbody>
        </thead>
            <tr v-for="person in persons | orderBy sortKey order">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.sex}}</td>
            </tr>
        </tbody>
    </table>
</div>
var demo3 = new Vue({
    el:'#demo3',
    data:{
        sortKey: '',
        order: '',// 1升序 -1降序
        persons: [
            { name:'张三',age:18,sex:'男' },
            { name:'李四',age:46,sex:'女' },
            { name:'王五',age:40,sex:'男' },
            { name:'赵六',age:58,sex:'男' }
        ]
    },
    methods:{
        sortBy:function (sortKey) {
            if(this.order == '' || this.order == -1){
                //升序
                this.order = 1;
            }else{
                //降序
                this.order = -1;
            }
            this.sortKey = sortKey;
        }
    }
});

v-show['显示'或'隐藏/display:none'] 和 v-if['显示'或'代码块删除/消失']

<div id="demo4" class="container">
    <h3>v-show['显示'或'隐藏/display:none'] 和 v-if['显示'或'代码块删除/消失']</h3>
    <h4>可以审查元素观察一下~</h4>
    <h4>截断默认操作:</h4>
        <h5>1. @submit.prevent / v-on:submit.prevent</h5>
        <h5>2. function(e){ e.preventDefault() }</h5>
    <form action="post.php" @submit.prevent="test">
        <h5>v-show</h5>
        <input type="text" v-model="username"><span class="error" v-show="!username">  请输入用户名!</span><br/><br/>
        <input type="password" v-model="password"><span class="error" v-show="!password">  请输入密码!</span><br/>
        <h5>v-if</h5>
        <input type="text" v-model="username"><span class="error" v-if="!username">  请输入用户名!</span><br/><br/>
        <input type="password" v-model="password"><span class="error" v-if="!password">  请输入密码!</span><br/><br/>
        <input type="submit" v-show="username && password">
    </form>
</div>
var demo4 = new Vue({
    el: '#demo4',
    data:{
        username: '',
        password: ''
    },
    methods:{
        test:function () {
            alert('233');
        }
    }
});

Vue.js组件化,代码重用

<div id="demo5" class="container">
    <h3>Vue.js组件化,代码重用</h3>
    <div id="likesORdislikes">
        <counter heading="赞同" color="green"></counter>
        <counter heading="反对" color="red"></counter>
    </div>
    <template id="counter-template">
        <h4>{{ heading }}</h4>
        <button class="btn" @click="count += 1" style="background: {{ color }}; width: 80px">{{ count }}</button>
    </template>
</div>
Vue.component('counter',{
    template:'#counter-template',
    props:['heading','color'],
    data:function () {
        return { count:0 };
    }
});

var demo5 = new Vue({
    el:'#demo5'
});

computed(返回计算(判断)过后的数据)

<div id="demo6" class="container">
    <h2>computed</h2>
    <h4>用户等级:{{ level }}</h4>
    <h4>用户名:{{ username }}</h4>
    用户经验值:<input type="text" v-model="experience"> [100:初级,200:中级,300:高级]<br/><br/>
    FirstName:<input type="text" v-model="firstname">&nbsp;
    LastName:<input type="text" v-model="lastname">
</div>

var demo6 = new Vue({
    el: '#demo6',
    data:{
        experience:110,
        firstname:'Marvin',
        lastname:'Jackson'
    },
    computed:{
        level:function () {
            if(this.experience < 100){
                return '初级会员';
            }else if( this.experience>=100 && this.experience < 200){
                return '中级会员';
            }else if( this.experience >= 200 ){
                return '高级会员';
            }else{
                return '未获取到用户等级';
            }
        },
        username:function () {
            return this.firstname + ' ' + this.lastname;
        }
    }
});

v-on:class(:class) 和 代码重用 和 动态props

<div id="demo7" class="container">
    <h2>v-on:class(:class) 和 代码重用 和 动态props</h2>
    <div id="tasksListContainer">
        <Counter2 v-bind:list="tasks1">
        </Counter2>

        <Counter2 v-bind:list="tasks2">
        </Counter2>

        <Counter2 v-bind:list="[{something:'233333333',finish:true}]">
        </Counter2>
    </div>

    <template id="tasks-template">
        <h3>待办事项<span v-show="list.length">({{remaining}}/{{ list.length }})</span>:</h3>
        <div v-model="tasks"></div>
        <ul>
            <li v-for="task in list">
                <span v-bind:class="{'lineThrough':task.finish}" v-on:click="change(task)"><a href="javascript:;">{{ task.something }}</a></span>[<a href="javascript:;" v-on:click="deleteTask(task)">删除</a>]
            </li>
        </ul>
    </template>
</div>
Vue.component('Counter2',{
    template:'#tasks-template',
    props:['list'],
    methods:{
        change:function (task) {
            task.finish = !task.finish;
        },
        deleteTask:function (task) {
            this.list.$remove(task);
        }
    },
    computed:{
        remaining:function () {
            return this.list.filter(function (task) {
                return ! task.finish;
            }).length;
        }
    }
});

var tasksListContainer = new Vue({
    el:'#tasksListContainer',
    data:{
        tasks1:[
            {something:'交资料',finish:true},
            {something:'下午开会',finish:false},
            {something:'买洗衣粉',finish:false}
        ],
        tasks2:[
            {something:'交水电费',finish:false},
            {something:'充话费',finish:true},
            {something:'买饲料',finish:false}
        ]
    }
});

var demo7 = new Vue({
    el:'#demo7'
});