当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 使用Vue做一个简单的todo应用的三种方式的示例代码

使用Vue做一个简单的todo应用的三种方式的示例代码

2018年11月04日  | 移动技术网IT编程  | 我要评论

上海不夜城地址,游山西村,悠季瑜伽视频

1. 引用vue.js

<!doctype html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>js bin</title>
</head>
<body>
 <div id="root">
  <input type="text" v-model="inputvalue">
  <button @click="handleradd">提交</button>
  <ul>
   <li 
     v-for="(item,index) of lists" 
     :key="index" 
     @click="handlerdel(index)"
    >
    {{item}}
   </li>
  </ul>
 </div>
 
 <script>
  new vue({
   el: '#root',
   data: {
    inputvalue: '',
    lists: []
   },
   methods: {
    handleradd: function() {
     this.lists.push(this.inputvalue);
     this.inputvalue = '';
    },
    handlerdel: function(index) {
     this.lists.splice(index, 1);
    }
   }
  });
 </script>
</body>
</html>

2. 全局组件注册

<!doctype html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>js bin</title>
</head>
<body>
 <div id="root">
  <input type="text" v-model="inputvalue">
  <button @click="handleradd">提交</button>
  <ul>
   <todo-item
    v-for="(item,index) of lists"
    :content = "item"
    :index = "index"
    :key = "index"
    @delete="handlerdel"
   >
   </todo-item>
  </ul>
 </div>
 
 <script>
  vue.component('todoitem', {
   props: {
    content: string,
    index: number
   },
   template: '<li @click="handlerclick">{{content}}</li>',
   methods: {
    handlerclick: function(){
     this.$emit('delete', this.index);
    }
   }

  });

  new vue({
   el: '#root',
   data: {
    inputvalue: '' ,
    lists: []
   },
   methods: {
    handleradd: function() {
     this.lists.push(this.inputvalue);
     this.inputvalue = '';
    },
    handlerdel: function(index) {
     this.lists.splice(index,1);
    }
   }
  });
 </script>
</body>
</html>

3. vue-cli脚手架

// todo.vue

<template>
 <div>
  <input type="text" v-model="inputvalue">
  <button @click="handleradd">提交</button>
  <ul>
   <todo-item
    v-for="(item,index) of lists"
    :key="index"
    :content="item"
    :index="index"
    @delete="handlerdel"
   ></todo-item>
  </ul>
 </div>
</template>

<script>
import todoitem from './components/todoitem'

export default {
 data () {
  return {
   inputvalue: '',
   lists: []
  }
 },
 methods: {
  handleradd () {
   this.lists.push(this.inputvalue)
   this.inputvalue = ''
  },
  handlerdel (index) {
   this.lists.splice(index, 1)
  }
 },
 components: {
  'todo-item': todoitem
 }
}
</script>

<style>

</style>
// todoitem.vue

<template>
 <li @click="handlerclick" class="item">{{content}}</li>
</template>

<script>
export default {
 props: ['content', 'index'],
 methods: {
  handlerclick () {
   this.$emit('delete', this.index)
  }
 }
}
</script>

<style scoped>
 ul,li {
  list-style: none;
 }
 .item {
  color: blueviolet;
 }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网