vue 学习笔记

1、v-bind
v-bind:title="message"
将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

2、 Vue 组件
定义

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)

引用

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

3、动态参数
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus

4、计算属性缓存 vs 方法
使用computed属性，直接写属性名称；
使用methods方法，直接写方法名称（注意括号）。

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

界面代码

<div id="demo">
    <div>computed:{{ fullName }}</div>
    <div>methods:{{ fullName2() }}</div>
 </div>

JS代码

<script>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  methods: {
    fullName2: function () {
      return this.firstName + ' ' + this.lastName
    }
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
</script>