vuejs学习笔记

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var vm = new Vue({
      // 选项
    })

每个 Vue 实例都会代理其 data 对象里所有
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// … 反之亦然
data.a = 3
vm.a // -> 3 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如： var data = { a: 1 } var vm = new Vue({ el: ‘#example’, data: data }) vm.$data === data // -> true
vm.$el === document.getElementById(‘example’) // -> true //$watch 是一个实例方法
vm.$watch(‘a’, function (newVal, oldVal) {
// 这个回调将在 vm.a 改变后调用
})
实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：
var vm = new Vue({
data: {
a: 1
},
created: function () {
// this 指向 vm 实例
console.log(‘a is: ’ + this.a)
}
})
// -> “a is: 1”
也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

{{}} :数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
Message: {{ msg }}
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

v-once :指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
This will never change: {{ msg }}

v-html :双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。

v-bind :Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：

v-if :指令将根据表达式 seen 的值的真假来移除/插入

元素

Now you see me

n :修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

    <div id="example-1">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })

许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。
示例：

    <div id="example-2">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
      el: '#example-2',
     data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
         // `this` 在方法里指当前 Vue 实例
         alert('Hello ' + this.name + '!')
         // `event` 是原生 DOM 事件
         alert(event.target.tagName)
       }
     }
    })
    // 也可以用 JavaScript 直接调用方法

内联处理器
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })

特殊变量 $event 有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量$event 把它传入方法：

    <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
    // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
          }
    }

事件修饰符
.stop
.prevent
.capture
.self
.once
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

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

Message is: {{ message }}

复选框
多个勾选框，绑定到同一个数组：

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    new Vue({
     el: 'divID',
      data: {
        checkedNames: []
      }
    })

单选按钮

    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>

 One 
 Two 
Picked: One

选择列表
动态选项，用 v-for 渲染：


{{ option.text }}


Selected: {{ selected }}
new Vue({
el: ‘…’,
data: {
selected: ‘A’,
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ }
]
}
})

属性绑定
但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框:
<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

单选按钮:
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

<select v-model="selected">
   <!-- 内联对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

修饰符:
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

    <div id="example">
      <div>A custom component!</div>
    </div>

    var data = { counter: 0 }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{{ counter }}</button>',
      data: function () {
        return data
      }
    })
    new Vue({
      el: '#example-2'
    })