VueDemo 记录

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


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


<div id="app-2">
    <span v-bind:title="message">
        Test!
    </span>
</div>

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

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

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

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


<!--
        
-->

<script type="text/javascript">

var ms = "hello";

var app = new Vue({
  el: '#app',
  data: {
    message: ms
  }
})


var app2 = new Vue({
  el:'#app-2',
  data: {
    message:'demo'
  }
})


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


var app4 = new Vue({
    el:'#app-4',
    data: {
        todos: [
            {text: 'aaa'},
            {text: 'bbb'},
            {text: 'ccc'}
        ]
    }
})


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


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

</script>