Vue.js实战 学习笔记 一（初识Vue.js）

官方文档中介绍：渐进式技术栈（渐进式即可以阶段性地使用Vue，或者可以在使用jQuery的同时，部分模块上使用Vue，而不是像Angular一样一用就是全部使用）

在设计上，使用MVVM（Model-View-View-Model）模式，即当View变化时会更新Model，Model变化View也随之改变（双向绑定）

　　传统前端模式（万精油模式）:jQuery + SeaJS(RequireJS) 模块化脚本 + artTemplate 前端模板，分离数据与HTML + Gulp 合并压缩代码

　　当项目扩大，出现复杂的业务时，传统模式的效率和开发成本无法满足需求

或者从个人理解来说：在简单的项目，如介绍页面等，使用jQuery会更加高效，当项目操作复杂，如管理页面等，使用Angular/React/Vue更高效满足需求

在之前的自整理随笔中写到过，jQueru为对DOM的操作，而Vue的MVVM模式使得只关心数据，DOM层会由Vue自动，如下：

　　在数据量大时，jQuery会变得难以维护（需要同时关注DOM和数据）

<!--jquery写法-->
<div id="app">
    <button v-if="show" v-on:click="chick">chick</button>
</div>

<script>
    $("button").click(function () {
        console.log("chick")
        $("button").hide();
    });
</script>

<!--vue写法-->
<div id="app">
    <button v-if="show" v-on:click="chick">chick</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            show: true;
        }
        methods: {
            chick: function () {
                console.log("chick")
            }
        }
    })
</script>

另一个书上给出的例子如下

在使用jQuery时，使用循环判断次数，然后插入DOM元素

<div id="app">
    <ul>
    </ul>
</div>

<script>
    for (i = 0; i <= data.length; ++i) {
        $("#app> ul").append("<li>" + data[i] + "</li>")
    }
</script>

在使用Vue时，只需一行<li>，循环的事情交给Vue

<div id="app">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            books: [
                {  name: '《Vue.js实战》' },
                {  name: '《JavaScript语言精粹》' },
                {  name: '《JavaScript高级程序设计》' },
            ]
        }
    })
</script>