ES6入门（一）

let及块级作用域

在介绍 let 之前，先来详细了解一下 var 声明的变量。
注意：JavaScript 在函数（类）内部用 var 声明的变量在函数外面是不可访问的。即使用 var 操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说，如果在函数中使用 var 定义一个变量，那么这个变量在函数退出后就会被销毁，例如：

1
2
3
4
5
function test(){ 
  var message = 'hi'; // 局部变量 
} 
test(); 
alert(message); // 错误！

Read More

Vue 过渡&动画

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

  • 条件渲染 (使用 v-if)

  • 条件展示 (使用 v-show)

  • 动态组件

  • 组件根节点

    • Read More

    Vue之组件

    全局注册

    注册一个全局组件：Vue.component(tagName, options)

    1
    2
    3
    4
    Vue.component('my-component', {
    	// 选项
    })
    // 自定义标签的命名最好遵循 W3C 规则（小写，并且包含一个短杠）

    Read More

    Vue之表单输入绑定

    v-model 基础用法

    v-model 本质上是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

    注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。(一定要给初始值，否则不能实现双向绑定)

    Read More

    Vue之事件处理

    监听事件

    可以用 v-on 指令监听 DOM 事件来触发一些简单的 JavaScript 代码。

    1
    2
    3
    4
    <div id="example-1">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>

    1
    2
    3
    4
    5
    6
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })

    Read More