VUE 入门基础(2)

 

二,起步

引用方式可以使用  vue-cli

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

    声明式渲染

    <div id="app">
          {{ message }}
      </div>
      var app = new Vue({
        el:'#app',
        data: {
          message:  'Hello Vue'
        }
      })

  在DOM元素上绑定属性 

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

        }

      })

  v-bind 属性被称为指令,指令带有前缀 v-,以表示他们是Vue.js 提供的特殊属性。

  条件与循环

  控制切换一个元素的显示也相当简单:

  <div id="app-3">

      <p v-if="seen">Now you see me</p>

  </div>

  var app3 = new Vue({

    el: '#app-3',

      data: {

        seen: true

      }

   })

 绑定数据到数组来渲染一个列表

  <div id="app-4>
    <ol>
      <li v-for="todo in todos">

        {{ todo.text }}

      </li>

    </ol>

  </div>

  var app4 = new Vue({

      el: '#app-4',

      data: {

        todos: [

          {text: 'Learn JavaScript'},

          {text: 'Learn Vue'},

          {text: 'Build something awesome'}

        ]

      }

    })

处理用户输入

  用v-on 指令绑定一个监听事件用于调用我们vue实例中定义的方法。

  <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.splict(' ').reverse().join(' ')
      }
    }
  })

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

 

posted @ 2016-12-21 17:26  柠檬先生  阅读(506)  评论(0编辑  收藏  举报