vue2.0教程

lilugirl

发布于 2019-05-28 11:20:45

8370

发布于 2019-05-28 11:20:45

文章被收录于专栏：前端导学

第一步永远是下载 vue.js

或者使用CDN <script src="https://unpkg.com/vue/dist/vue.js"></script>

第一节简单的数据绑定

vue的初始化
el 和 data的用法
v-for的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    todo list

  <ul>
    <li v-for="todo in todos">{{todo.title}}</li>
  </ul>
  </div>

  <script>
     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit'},
           {id:2,title:'my to do lsit2'}
         ]
       }
     });
  </script>
</body>
</html>

第二节含form表单的双向绑定

v-bind的用法
v-model的用法
v-on的用法
methods的用法
computed的用法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
  .completed{
    color:green;
    text-decoration:line-through;

  }
  .btn-danger{
    background:yellow;
  }
  .btn-success{
    background:green;
  }
  </style>
</head>
<body>
  <div id="app">
    <h1>my todo list {{todoCount}}</h1>

  <ul>
    <li v-for="(todo,index) in todos" v-bind:class="{'completed':todo.completed}">{{todo.title}} <button v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed? 'btn-danger':'btn-success']">{{todo.completed? 'undo':'complete'}}</button>  <button v-on:click="deleteTodo(index)">delete</button></li>
  </ul>
  <form v-on:submit.prevent="addTodo(newTodo)">
    <input type="text" v-model="newTodo.title">
    <button type="submit">add</button>
  </form>
  </div>

  <script>
     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit',completed:false},
           {id:2,title:'my to do lsit2',completed:true}
         ],
         newTodo:{id:null,title:''}
       },
       computed:{
         todoCount(){
           return this.todos.length;
         }
       },
       methods:{
         addTodo(newTodo2){
           this.todos.push(newTodo2);
           this.newTodo={id:null,title:'',completed:false}
         },
         deleteTodo(index){
           this.todos.splice(index,1);
         },
         toggleCompletion(todo2){
           todo2.completed=!todo2.completed;
         }
       }
     });
  </script>
</body>
</html>

第三节组件的使用

Vue.component的定义和使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <style>
  .completed{
    color:green;
    text-decoration:line-through;

  }
  .btn-danger{
    background:yellow;
  }
  .btn-success{
    background:green;
  }
  </style>
</head>
<body>
  <div id="app">
    <h1>my todo list {{todoCount}}</h1>

   <todo-items :todos="todos"></todo-items>
   <todo-form :todos="todos"></todo-form>

  </div>
 <script type="text/x-template" id="todo-items-template">
   <ul>
     <li v-for="(todo,index) in todos" v-bind:class="{'completed':todo.completed}">{{todo.title}} <button v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed? 'btn-danger':'btn-success']">{{todo.completed? 'undo':'complete'}}</button>  <button v-on:click="deleteTodo(index)">delete</button></li>
   </ul>
 </script>

 <script type="text/x-template" id="todo-form-template">

   <form v-on:submit.prevent="addTodo(newTodo)">
     <input type="text" v-model="newTodo.title">
     <button type="submit">add</button>
   </form>

 </script>

  <script>
     Vue.component('todo-items',{
       template:'#todo-items-template',
       props:['todos'],
       methods:{

         deleteTodo(index){
           this.todos.splice(index,1);
         },
         toggleCompletion(todo2){
           todo2.completed=!todo2.completed;
         }
       }
     });

     Vue.component('todo-form',{
       template:'#todo-form-template',
       props:['todos'],
       data(){
         return {
            newTodo:{id:null,title:''}
         }
       },
       methods:{
         addTodo(newTodo){
           this.todos.push(newTodo);
           this.newTodo={id:null,title:'',completed:false}
         }

       }

     });

     new Vue({
       el:'#app',
       data:{
         message:'hello world',
         todos:[
           {id:1,title:'my to do lsit',completed:false},
           {id:2,title:'my to do lsit2',completed:true}
         ],

       },
       computed:{
         todoCount(){
           return this.todos.length;
         }
       }

     });
  </script>
</body>
</html>