vue

初识 vue

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架 —— 它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

第一个 vue 程序

Hello vueJs

1
2
3
4
5
6
7
8
9
10
11
12
13
html
<div id="app">
  {{ message }}
</div>

<script>
    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

渲染列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>

处理用户输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
    new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

综上所述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html

<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
        data: {
        newTodo: '',
        todos: [
            { text: 'Add some todos' }
        ]
    },
    methods: {
        addTodo: function () {
        var text = this.newTodo.trim()
        if (text) {
            this.todos.push({ text: text })
            this.newTodo = ''
        }
        },
        removeTodo: function (index) {
        this.todos.splice(index, 1)
        }
    }
    })
</script>