Gather ye rosebuds while ye may

快速上手Vue

    前端
  1. 一个html，一个例子
  2. 从new Vue()和el开始
  3. v-model双向绑定
  4. v-on响应事件
  5. v-for和列表
  6. 计算属性

这篇文章的目的是让你快速上手Vue。
如果你想知道Vue是什么，请看Vue的官方文档。
官方文档中的入门已经写得足够好了，这里只是其他几个例子而已。
本篇中用到的例子来自于 Vue.js - Getting Started，coligo - VueJs: The Basics，tutorialzine - 5 Practical Examples For Learning Vue.js和我自己。
顺便提一句，中文的「Vue入门」类型的文章真是少，上面几个写的很可以了。

一个html，一个例子

如果你是照着官方文档，从npm install -g vue-cli一步一步来，相信你的第一个例子会通过npm run dev开始。
这样做的话你的调试会变得异常方便：有webpack，JSlint，同步刷新等等。
但是这篇文章中的所有例子都只需要创建一个新的html，没有src，package.js，不用npm，直接拖到浏览器中就可以运行。
毕竟Vue.js是js，快速上手Vue要快速上手。
首先准备一个html文件

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
  <style>body{text-align:center}</style>
</head>
<body>
  hello world!
</body>
</html>

对于下面的例子你要做的就是复制-粘贴-拖到浏览器里。

从new Vue()和el开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>

  <div id="example1">
    {{ message }}
  </div>
  
  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
  <!-- vue.js 的加载视情况而定，可以用NPM，Bower，这里使用了国内的CDN -->
  <script type="text/javascript">
  
    new Vue({
      el: '#example1',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    
  </script>
</body>

v-model双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>

  <div id="example2">
    <input type="text" v-model="greeting">
    <p>{{ greeting }}</p>
  </div>

  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
  <script>

  new Vue({
    el: '#example2',
    data: {
      greeting: 'Hello VueJs!'
    }
  });

</script>
</body>

请尝试将 div > p 中的{{ greeting }}改为{{ $data }}，{{ $data | json }}，{{ $data.greeting }}试试看。

v-on响应事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>

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

  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
  <script>
  
    new Vue({
      el: '#example3',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('');
        }
      }
    });
    
  </script>
</body>

请尝试将 button 中的v-on:click改为@click看看效果。

v-for和列表

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
<body>

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

  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
  <script>

    new Vue({
      el: '#example4',
      data: {
        todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue.js' },
        { text: 'Build Something Awesome' }
        ]
      }
    });

  </script>

</body>

请尝试在 li 中添加{{ $index }}看看效果。

计算属性

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

  <div id="example5">
    <input type="number" v-model="x">
    <p>result: {{ doubleX }}</p>
  </div>

  <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
  <script>
    new Vue({
      el: '#example5',
      data: {
        x: 1
      },
      computed: {
        doubleX: function(){
          return this.x*2;
        }
      }
    });
  </script>

</body>

请尝试将computed关键字改为methods，然后将{{ doubleX }}改为{{ doubleX() }}方法。

差不多就这几个简单点。
以上

页阅读量:  ・  站访问量:  ・  站访客数: