This article mainly introduces the sample code of three ways to use Vue to make a simple todo application. Xiaobian thinks it's very good. Now I'll share it with you and give you a reference. Let's follow Xiaobian to have a look
1. Reference vue.js
`<!DOCTYPE html>` `<html>` `<head>` `<script src=``"[http://vuejs.org/js/vue.js](http://vuejs.org/js/vue.js)"``></script>` `<meta charset=``"utf-8"``>` `<title>JS Bin</title>` `</head>` `<body>` `<iv id=``"root"``>` `<input type=``"text"` `v-model=``"inputValue"``>` `<button @click=``"handlerAdd"``>Submission</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. Global component registration
`<!DOCTYPE html>` `<``html``>` `<``head``>` `<``script` `src``=``"[http://vuejs.org/js/vue.js](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"``>Submission</``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` `},` `tmplate: '<``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 scaffold
`// Todo.Vue` `<template>` `<div>` `<input type=``"text"` `v-model=``"inputValue"``>` `<button @click=``"handlerAdd"``>Submission</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>`
The above is the whole content of this article. I hope it will help you in your study
This time I would like to recommend an exchange circle, which includes mobile application website development, css, html, webback, vue node angular and interview resources.
Students who are interested in web development technology are welcome to join us: 582735936. I welcome you, whether you are Xiaobai or Daniel. There is also a set of efficient learning routes and tutorials organized by Daniel to share with you for free, and update the video materials every day.
At last, I wish you all success in your studies as soon as possible, get a satisfactory offer, get a quick promotion and raise salary, and go to the top of your life.
