vue练习

vue.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script src="js/vue.min.js"></script>
</head>
<body>
   <div id="app">{{ message }}</div>
   <div id="app-2">
       <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>
   </div>
   <div id="app-3">
       <p v-if="seen">现在你看到我了</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">逆转消息</button>
   </div>
   <div id="app-6">
       <p>{{ message }}</p>
       <input v-model="message">
   </div>
   <div id="app-7">
       <ol>
           
           <todo-item v-for="item in groceryList" v-bind:todo="item"
               v-bind:key="item.id">
           </todo-item>
       </ol>
   </div>

       var app2 = new Vue({
           el : '#app-2',
           data : {
               message : '页面加载于 ' + new Date().toLocaleString()
           }
       })

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

       var app4 = new Vue({
           el : '#app-4',
           data : {
               todos : [ {
                   text : '学习 JavaScript'
               }, {
                   text : '学习 Vue'
               }, {
                   text : '整个牛项目'
               } ]
           }
       })

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

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

       // 定义名为 todo-item 的新组件
       Vue.component('todo-item', {
           props : [ 'todo' ],
           template : '<li>{{ todo.text }}</li>'
       })

       var app7 = new Vue({
           el : '#app-7',
           data : {
               groceryList : [ {
                   id : 0,
                   text : '蔬菜'
               }, {
                   id : 1,
                   text : '奶酪'
               }, {
                   id : 2,
                   text : '随便其它什么人吃的东西'
               } ]
           }
       })
   </script>
</body>
</html>

猜你喜欢