zoukankan      html  css  js  c++  java
  • 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!'
        }
      })
  • 相关阅读:
    怎样解决:未找到路径“……”的控制器或该控制器未实现 IController?
    错误:org.springframework.jdbc.support.SQLErrorCodesFactory
    springbean的生命周期
    注解到处excel
    nio读取文件,输出文件
    AtomicReference
    唯一id
    hashmap1.7的死锁模拟
    数组模拟stack
    环形队列
  • 原文地址:https://www.cnblogs.com/nmxs/p/6208442.html
Copyright © 2011-2022 走看看