001 introduction to Vue

I. Introduction

Mainly through the following two tutorials to get started, one is the document, the second is the video (although it's for a fee, but if you can search, you can still find the free one)

The learning code is all here

Explain

  • Only record your own experience in the code and learning process

2. Introduction

2.1 Hello World

Requirement: set content hello world to div dynamically

2.1.1 js implementation

helloworld/index-js.html

<html>
    <body>
        <div id="app"></div>
        <script>
            var dom = document.getElementById('app')
            dom.innerHTML = 'hello world'
        </script>
    </body>
</html>

2.1.2 Vue implementation

helloworld/index.html

<html>
    <head>
      	<!-- https://vuejs.org/js/vue.js -->
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="app">{{content}}</div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    content: 'hello world'
                }
            })
        </script>
    </body>
</html>

Explain:

  • Introducing vue.js
  • div's id is declared as app
  • Initialize Vue, and the object properties passed in are el and data.
  • el binds dom objects and selects expressions through css
  • Data defines data objects and binds them in two directions

2.2 Todo List

Requirements: imitation http://todolist.cn/

2.2.1 jQuery implementation

A little.

2.2.2 Vue implementation

todolist/index.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="app">
            <!-- Template instruction, data bidirectional binding-->
            <input v-model="inputValue" type="text"/>
            <!-- Template instruction, binding event-->
            <button v-on:click="handleBtnClick">Submission</button>
            <ul>
                <!-- Label instruction, cyclic data -->
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

2.2.3 global components

todolist/index2.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">Submission</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list">
                </todo-item>
            </ul>
        </div>
        <script>
            // Global component
            Vue.component('TodoItem', {
                props: ['content'],
                template: '<li>{{content}}</li>'
            })

            var app = new Vue({
                el: '#root',
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        console.log(this.list)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

2.2.4 local components

todolist/index3.html

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">Submission</button>
            <ul>
                <todo-item v-bind:content="item" v-for="item in list">
                </todo-item>
            </ul>
        </div>
        <script>
            // Local components
            var TodoItem = {
                props: ['content'],
                template: "<li>{{content}}</li>"
            }

            var app = new Vue({
                el: '#root',
                components: {
                    TodoItem: TodoItem
                },
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        console.log(this.list)
                        this.inputValue = ''
                    }
                }
            })
        </script>
    </body>
</html>

2.2.5 transfer value from child component to parent component

todolist/index4.html

Click list item to delete the clicked list item

<html>
    <head>
        <script src='../vue.js'></script>
    </head>
    <body>
        <div id="root">
            <input v-model="inputValue" type="text"/>
            <button v-on:click="handleBtnClick">Submission</button>
            <ul>
                <todo-item
                    v-bind:content="item"
                    v-bind:index="index"
                    v-for="(item, index) in list"
                    @delete="handleItemDelete">
                </todo-item>
            </ul>
        </div>
        <script>
            // Local components
            var TodoItem = {
                props: ['content', 'index'],
                template: "<li v-on:click='handleItemClick'>{{content}}</li>",
                methods: {
                    handleItemClick: function() {
                        this.$emit("delete", this.index)
                    }
                }
            }

            var app = new Vue({
                el: '#root',
                components: {
                    TodoItem: TodoItem
                },
                data: {
                    list: [],
                    inputValue: ''
                },
                methods: {
                    handleBtnClick: function() {
                        this.list.push(this.inputValue)
                        this.inputValue = ''
                    },
                    handleItemDelete: function(index) {
                        this.list.splice(index, 1)
                    }
                }
            })
        </script>
    </body>
</html>

Join the knowledge planet, learn together, share together.

Tags: Front-end Vue git JQuery

Posted on Fri, 01 Nov 2019 19:48:33 -0700 by monkuar