vue.js学习

vue核心就是组件，一个组件可以分为数据和视图，数据绑定，数据更新时，视图也会自动更新。在视图中又可以绑定一些事件，它们触发methods里指定的方法，从而可以改变数据、更新视图。

示例1，用2个大括号直接取vue实例中的message值：
<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

示例2，用指令获取绑定值：
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

vue对象

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

vue常用属性：

var vm = new Vue({
    el:'dom id',
    data:{key:value},
    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
    },
    methods: {
      //方法描述
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }，

})

vue常用指令：
v-if：

    <p v-if="seen">现在你看到我了</p>

v-for：

    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>

     var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>

    <div v-for="(value, key) in object">
      {{ key }}: {{ value }}
    </div>

    <div v-for="item in items" :key="item.id">
      <!-- 内容 -->
    </div>

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

new Vue({el:'#range'})

v-bind：

<a v-bind:href="url">...</a>可缩写为<a :href="url">...</a>

v-on：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<a v-on:click="doSomething">...</a>可缩写为<a @click="doSomething">...</a>

v-model：表单输入绑定，你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<input type="checkbox" id="checkbox" v-model="checked">

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

template标签使用

template标签不会显示在浏览器中，例如

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

组件：

定义一个叫todo-item组件：
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>lili-{{ todo.text }}</li>'
})
使用组件：
<div id="app-8">
    <ol>
        <!--
              现在我们为每个 todo-item 提供 todo 对象
              todo 对象是变量，即其内容可以是动态的。
              我们也需要为每个组件提供一个“key”，稍后再
              作详细解释。组件可以复用，可以有多个todo-item
        -->
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>
绑定数据：
var app8 = new Vue({
    el: '#app-8',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜0' },
            { id: 1, text: '奶酪1' },
            { id: 2, text: '随便其它什么人吃的东西2' }
        ]
    }
})

数组更新检测

1、修改自身：

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
   示例：
   example1.items.push({ message: 'Baz' })
2、返回修改后的值
filter(), concat() 和 slice()
示例：
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength