Vue笔记二

将进酒策舟

Vue.js计算属性
      计算属性关键词: computed，计算属性在处理一些复杂逻辑时是很有用的
      示例1:<div id="app">
                  {{ message.split('').reverse().join('') }}
                </div>
       示例2:<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>
    computed vs methods:
        我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，
        只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行.
    computed setter
        computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ;
        示例3:var vm = new Vue({
              el: '#app',
                data: {
          name: 'Google',
                x: 'zzzzzzz'
                   },
              computed: {
              site: {
                 // getter
              get: function () {
               return this.name + ' ' + this.x
                                },
                           // setter
       set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
                  }
             }
          }
     })
      // 调用 setter， vm.name 和 vm.zzz 也会被对应更新
      vm.site = '菜鸟教程';
      document.write('name: ' + vm.name);
      document.write('<br>');
      document.write('url: ' + vm.url);
Vue.js监听属性
       示例:
            <div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
             </div>
           <script type = "text/javascript">
               var vm = new Vue({
                     el: '#app',
                       data: {
                                  counter: 1
                                  }
                                  });
               vm.$watch('counter', function(nval, oval) {
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
                       });
                 </script>
Vue.js样式绑定
         Vue.js class:
             class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性,
             Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组.
         class属性绑定：为 v-bind:class 设置一个对象，从而动态的切换 class；
                  示例1:
                            <div v-bind:class="{ active: isActive }"></div>
                  示例2:
                               <div class="static"
                                  v-bind:class="{ active: isActive, 'text-danger': hasError }">
                                </div>
         数组语法:把一个数组传给 v-bind:class
                   示例1:
                             <div v-bind:class="[activeClass, errorClass]"></div>
         Vue.js style(内联样式):
                 在 v-bind:style 直接设置样式；
                      示例1：
                                 <div id="app">
                     <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
                                 </div>
Vue.js事件处理器
               事件监听可以使用 v-on 指令：
                 示例1：
                         <div id="app">
                     <button v-on:click="counter += 1">增加 1</button>
                      <p>这个按钮被点击了 {{ counter }} 次。</p>
                           </div>
                         <script>
                              new Vue({
                                el: '#app',
                                    data: {
                                 counter: 0
                                        }
                                       })
                            </script>
          事件修饰符:
              Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
               Vue.js通过由点(.)表示的指令后缀来调用修饰符
                   .stop
                   .prevent
                   .capture
                   .self
                   .once
                 
           按键修饰符
            Vue 允许为 v-on 在监听键盘事件时添加按键修饰符；
              
           记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名；
              
              全部的按键别名：
                 .enter
                 .tab
                 .delete (捕获 "删除" 和 "退格" 键)
                 .esc
                 .space
                 .up
                 .down
                 .left
                 .right
                 .ctrl
                 .alt
                 .shift
                 .meta