Vue.js之入门

1.What is Vue.js?

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

 

2.引入

 

<script src="https://unpkg.com/vue/dist/vue.js">

在页面文件头加入上述代码，即可将Vue.js引入

 

 

3、声名式渲染

1）

 

<div id="app">
  {{ message }}
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})；
</script>

 

这时候页面就会出现：

 

Hello Vue

 

注意：js代码必须在div的后面，否者js无法找到相应的节点对象，出现报错。

2）

 

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})；

当我们将鼠标放置于文段上面，就会出现相应的时文字。

 

4、条件与循环

1）

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})；

加入我们将seen中设置为fasle，文字就会消失。

 

2）

<div id="app-4">
  <ol>
    <li v-for="e in List">
      {{ e.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    List: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
});

效果：

 

Learn JavaScript
Learn Vue
Build something awesome

 

5、处理用户输入

1）通过v-on 来进行用户页面交互

 

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

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})；

我们会发现，点击按钮后，文字会反转。主要是因而调用js方法，改方法使其返回。

 

2）Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。

 

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

通过上述代码，在input输入的信息都会显示在<p>标签中。

6、总结：

Vue.js是一个非常好的框架，使数据与视图之间的交互变得更加容易，能较少程序员在实现细节上的思考，更加专注地编写业务逻辑代码。

虽然上述代码只是官方例子照搬，但融入了个人的理解与描述，相对只是简单学习，这种方式有更加深刻的印象。同时，当我们忘记的时候，我们可以翻看博客，温故知新。

Reference:
[1] 介绍, http://doc.vue-js.com/v2/guide/