一个学习vue的例子

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <label for="r1">下载后删除</label><input type="checkbox" v-model="use" id="r1">

    <div v-bind:class="{'class1': use}">

      <h1>site : {{site}}</h1>

    </div>

    <h1>url : {{url}}</h1>

    <h1>Alexa : {{book}}</h1>

    <div id="app">

      {{5+5}}<br>

      {{ ok ? 'YES' : 'NO' }}<br>

      {{ message.split('').reverse().join('') }}

      <div v-bind:id="'list-' + id">菜鸟教程</div>

    </div>

    <div id="app">

      <p v-if="seen">现在你看到我了</p>

    </div>

    <p id="demo">这是一个段落</p>

    <button id="demo" type="button" onclick="document.getElementById('demo').innerHTML=Date()">显示日期</button>

    <pre><a v-bind:href="url">edgexfoundry社区</a></pre>

    <a v-on:click="doSomething">点这里</a>

    <form v-on:submit.prevent="onSubmit"></form>

    <p>{{ message }}</p>

    <button v-on:click= "reverseMessage" >反转字符串</button>

    <template v-if="ok">

      <h1>学些东西</h1>

      <p>学的不仅是技术，更是梦想！</p>

      <p>哈哈哈，打字辛苦啊！！！</p>

      <li v-for= "site in sites" :key="site.id">

        {{ site.name }}

      </li>

    </template>

    <div v-if="Math.random() > 0.5">

      Sorry

    </div>

    <div v-else>

      Not sorry

    </div>

    <ul>

      <li v-for="value in meizhou" :key="value.id">

        {{ value }}

      </li>

      <br>

      <br>

      <li v-for="(value, key, index) in object" :key="value.id">

        {{ index }}. {{ key }} : {{ value }}

      </li>

      <li v-for="(value, key) in meizhou" :key="value.id">

        {{ key }} : {{ value }}

      </li>

    </ul>

    <p>原始字符串: {{ message }}</p>

    <p>计算后反转字符串: {{ reversedMessage1 }}</p>

      千米 : <input type = "text" v-model = "kilometers">

      米 : <input type = "text" v-model = "meters">

    <p id="info"></p>

  </div>

</template>



<style>

.class1{

  background: #444;

  color: #eee;

}

</style>



<script type="text/javascript">

  import Vue from 'vue'

  var data = {site: '菜鸟教程', url: 'www.runoob.com', alexa: 10000}

  var vm = new Vue({

    el: '#hello',

    data: data

  })



  export default {

    name: 'hello',

    data () {

      return {

        site: '菜鸟教程',

        msg: '圣诞节快乐！',

        url: 'https://edgexfoundry.club/',

        book: 'turing',

        use: false,

        ok: true,

        message: 'RUNOOB',

        id: 1,

        seen: true,

        sites: [

          { name: 'Runoob' },

          { name: 'Google' },

          { name: 'Taobao' }

        ],

        meizhou: {

          name: '厄瓜多尔',

          url: 'http://www.runoob.com',

          slogan: '乌拉圭！'

        },

        kilometers: 0,

        meters: 0

      }

    },

    methods: {

        reverseMessage: function () {

            this.message = this.message.split('').reverse().join('')

        }

    },

    computed: {

    // 计算属性的 getter

        reversedMessage1: function () {

      // `this` 指向 vm 实例

            return this.message.split('').reverse().join('')

        }

    },

    watch: {

        kilometers: function (val) {

            // document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val

            this.kilometers = val

            this.meters = this.kilometers * 1000

        },

        meters: function (val) {

            // document.getElementById('info').innerHTML = '修改前值为: ' + this.kilometers + '，修改后值为: ' + val / 1000

            this.kilometers = val / 1000

            this.meters = val

        }

    }

  }

  document.write(data.alexa === 10000)

  vm.site = 'Runoob'

  document.write(data.site + '<br>') // Runoob

  document.write(vm.$data === data) // true

  document.write('<br>')

  document.write(vm.$el === document.getElementById('hello'))

// ……反之亦然

  data.alexa = 1234

  document.write(vm.alexa) // 1234

</script>