vue学习--起步(二)

vue

回顾

上一篇中我们已经开始了第一个Hello Vue程序，今天我们会开始往其中添加一些更为有趣且实用的内容。从而对在vue情景下书写web程序的方式有个整体感性的认识。

声明式指令渲染(Declarative-Rendering)

上一篇中其实就已经有使用

<div id="app">
      {{ message }} // 文本插值--数据绑定最基础的形式
</div>

除了文本插值，我们也可以绑定某个元素属性：

代码

// HTML
<div id="app-2">
  <span v-bind:title="message">
    鼠标移过时提示一段文字信息(加载页面的时间)
  </span>
</div>

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

运行结果

在上述代码中我们用到了v-bind来绑定属性，在vue里称为指令，以v-为前缀标识。vue中还有很多类似的其它各种指令，运用于不同场景。

和"文本插值"一样，用v-bind绑定的数据也是响应式的，我们同样可以打开Console控制台修改"app2.message = 'some new message'"进行验证。

条件渲染

在vue中想要动态实现是否渲染某个元素，可以通过条件渲染轻松做到。

// HTML
<div id="app-3">
  <p v-if="seen">seen为true时渲染显示</p>
</div>

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

运行结果

同样的，打开Console控制台修改"app3.seen = false"，可以看到对应的元素将不再显示。

Tips:这个指令除了显示和隐藏元素外，通过搭配vue的过渡系统,可以实现各种transition effects。

列表渲染

和传统的模板引擎类似，vue的众多指令中提供了很方便的v-for指令用于列表数据的渲染。

<div id="app-4">
  <ol>
    <li v-for="item in list">
      {{ item.name }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    list: [
      { name: '小明' },
      { name: '小张' },
      { name: '小鹏' }
    ]
  }
})

运行结果

Tips:我们可以通过Console控制台修改app4.list.push({ name: '老王' }),观察html视图的变化。

处理用户操作

要让应用跑起来，必不可少的需要让用户和你的应用进行交互，vue中可以用v-on指令监听DOM事件，很方便的绑定事件处理器到一个方法。

<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('')
    }
  }
})

运行结果