demo/demo2.html

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="Vue-2.0.0.js"></script>
    <style type="text/css">
    .content {
        position: relative;
        width: 960px;
        height: auto;
        margin: 0 auto;
        padding: 20px 0;
    }
    
    fieldset {
        position: relative;
        display: block;
        margin-bottom: 20px;
    }
    </style>
</head>

<body>
    <div class="content">
        <!-- ============================================ -->
        <!-- 前言 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>前言</legend>
            <p>在demo1中提到，思考的问题列表中，在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 [API 文档](<a href="https://vuefe.cn/api/">https://vuefe.cn/api/</a>)中查看。</p>
        </fieldset>
        <!-- ============================================ -->
        <!-- Vue 实例 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>Vue 实例</legend>
        </fieldset>
        <!-- ============================================ -->
        <!-- 实例生命周期 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>实例生命周期</legend>
        </fieldset>
        <!-- ============================================ -->
        <!-- 计算属性 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>计算属性</legend>
            <p>computed: 就是这个鬼东西。</p>
            <script type="text/javascript">
            var vm = new Vue({
                // el: '#example',
                data: {
                    message: 'Hello'
                },
                computed: {
                    // a computed getter
                    reversedMessage: function() {
                        // `this` points to the vm instance
                        return this.message.split('').reverse().join('')
                    }
                }
            });

            console.log(vm.reversedMessage) // -> 'olleH'
            vm.message = 'Goodbye'
            console.log(vm.reversedMessage) // -> 'eybdooG'
            console.log(vm.message) // -> 'eybdooG'
            </script>
            <p>
                计算属性里面有个 —计算缓存— 的概念；什么意思呢？？计算缓存、计算缓存、计算缓存..... 名副其实就是对原数据本来需要计算的过程缓存起来，就是把结果缓存起来，如果相关依赖的数据没更变，则不必再计算一直，直接给出结果；放心这计算属性自带 getter 功能的，会监听相关依赖的数据的。
            </p>
            <p>
                其实实例化还提供另一个方法：methods。这个东东顾名思义就是方法的意思；说白了就是个函数； 如果有对数据操作的话，每次调用都要跑一次，跟上面的计算缓存就不一样了。
            </p>
            <p>
                那竟然计算属性自带 getter 的功能，那 Vue 里面提供了 watch 的方法，怎么个区分？</p>
            <p>
                说白了简单的计算集合的东西就放计算属性里面，如果要调用方法或者大一点的逻辑就使用了 watch了，去看$watch API吧；暂且这样理解。</p>
            <p>
                除了计算属性本身提供了 getter 方法，如果你想要 setter 方法，你可以定义啊。</p>
        </fieldset>
        <b>思考：<br />
           到目前为止你会发现实例化中的data、methods、computed下的数据直接暴露在实例化对象下了，已经把这三个东东忽略掉了，为啥为什么呢？？？
        </b>
        <br />
        <br />
        <br />
        <!-- Class 与 Style 绑定 -->
        <h2>Class 与 Style 绑定</h2>
        <!-- ============================================ -->
        <!-- 操作class -->
        <!-- ============================================ -->
        <fieldset>
            <legend>操作class</legend>
            <p>v-bind:class</p>
            <p>v-bind:class="{ active: isActive, 'text-danger': hasError }"</p>
            <p>你也可以直接绑定数据里的一个对象：</p>
            <p>v-bind:class="classObject"</p>
            <p>渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式.</p>
            <p>也可以定义数组：</p>
            <p>v-bind:class="[activeClass, errorClass]"</p>
            <p>v-bind:class="[isActive ? activeClass : '', errorClass]"</p>
            <p>v-bind:class="[{ active: isActive }, errorClass]"</p>
        </fieldset>
        <!-- ============================================ -->
        <!-- 绑定内联样式 -->
        <!-- ============================================ -->
        <fieldset>
            <legend>绑定内联样式</legend>
            <p>v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：</p>
            <p>v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
            <p>直接绑定到一个样式对象通常更好，让模板更清晰.</p>
            <p>也可以是数组.</p>
            <p>对于一些CSS样式，Vue会主动补全前缀，尤其是CSS3的特性.</p>
        </fieldset>
        <!-- 条件渲染 -->
        <h2>条件渲染</h2>
        <!-- ============================================ -->
        <!-- v-if v-else v-show -->
        <!-- ============================================ -->
        <fieldset>
            <legend>v-if v-else v-show</legend>
            <p>
                因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个
                template 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。</p>
            <p>
                不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。注意 v-show 不支持 template 语法。</p>
            <p>
                可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”,</p>
            <p>
                v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。</p>
            <p>
                将 v-show 用在组件上时，因为指令的优先级 v-else 会出现问题。用另一个 v-show 替换 v-else,双层使用就是加个 ‘！’的符号就行了。</p>
            <p>
                在切换 v-if 块时， Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。 v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。</p>
        </fieldset>
        <!-- 列表渲染 -->
        <h2>列表渲染</h2>
        <!-- ============================================ -->
        <!-- v-for -->
        <!-- ============================================ -->
        <fieldset>
            <legend>v-for</legend>
            <p>
            	我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
            </p>
            <p>
            	在 v-for 块内部，我们有完全访问父作用域的属性。 v-for 还支持一个可选的第二个参数为当前项的索引
            </p>
            <p>
            	v-for="(item, index) in items" <br />
            	{{ parentMessage }} - {{ index }} - {{ item.message }}
            </p>
            <p>
            	你也可以用 of 替代 in 作为分隔符，所以它是最接近 JavaScript 迭代器的语法：v-for="item of items"
            </p>
            <p>
            	组件 和 v-for
            </p>
            <p>
            	props
            </p>
            <p>
            	没那么简单...
            </p>
            <p>重塑数组</p>


        </fieldset>

        <b>
        	思考：<br />
        	所有上面学的东西，一旦加上组件了，一旦嵌套了，一旦和模板一起还有和JavaScript本身的解析一直吗？
        </b>

    </div>
</body>

</html>