I am familiar with JS. Learning VUE V2 is also to expand the technical aspects and apply it in web and mobile terminals. The code examples can be found on the official website

Small white learning Vue series directory

  • 1. Introduction
  • Learn Vue 2. Instruction
  • 3. Bind Class and Style
  • Vue 4. Conditional rendering and list rendering


Basic usage

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <! Import VUE resources -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! -- the Vue. Js v2.6.12 -- -- >
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <hr/>

    <div id="app2">
        <! -- v-bind:attribute="property" v-bind:title="message" -->
        <span v-bind:title="message">Hover for a few seconds to see the prompt for dynamic binding here!</span>
    </div>
    <hr/>

    <div id="app3">
        <! -- v-if="booleanProperty" v-if="visible" -->
        <p v-if="visible">You see me now</p>
        <button v-on:click="show">Show/Hide</button>
    </div>
    <hr/>

    <div id="app4">
        <! -- for (todo in todos) {<li>{{todo.text}}</li>} loop to generate <li></li> elements can be in the browser console, type app4.todos.push({"text": }) insert a new element -->
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    <hr/>

    <div id="app5">
        <! -- V-model directive to implement bidirectional binding between form input and application state -->
        <p>{{ message }}</p>
        <input v-model="message" />
    </div>
    <hr/>

</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app'.data: {
            message: 'Hello Vue! '}})var app2 = new Vue({
        el: '#app2'.data: {
            message: 'Page loaded at:' + new Date().toLocaleString()
        }
    })

    var app3 = new Vue({
        el: '#app3'.data: {
            visible: true
        },
        methods: {
            show: function () {
                this.visible = !this.visible // Instance internal methods that access instance properties}}})var app4 = new Vue({
        el: '#app4'.data: {
            todos: [{"text": "Learn JavaScript" },
                { "text": "Learn Vue.js" },
                { "text": "Develop a Big Project"},]}})var app5 = new Vue({
        el: '#app5'.data: {
            message: "huangjian"}})</script>

</html>
Copy the code

Custom Components

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <ol>
            <todo-item
                    v-for="todo in todos"
                    v-bind:todo="todo"
                    v-bind:key="todo.id"
            ></todo-item>
        </ol>
    </div>
</body>

<script type="text/javascript">
    // Custom Vue components (must be used in Vue before they can be rendered)
    Vue.component("todo-item", {
        props: ["todo"].template: "<li>{{ todo.text }}</li>"
    })

    var app1 = new Vue({
        el: "#app1".data: {
            todos: [{id: 0.text: 'To-do List 1' },
                { id: 1.text: 'To-do List 2' },
                { id: 2.text: 'To-do List 3' },
                { id: 3.text: 'To-do List 4'},]}})</script>

</html>
Copy the code

Today’s summary

Five instructions:

V-bind :attribute=”property” Binds the property attribute of the Vue instance to the attribute attribute of the element

V-if =”booleanProperty” Whether the element is’ inserted ‘or’ removed ‘depends on the booleanProperty property of the Vue instance

The func method of the Vue instance responds to the element’s onclick event

V -for=”item in Object “loops through the generated element component

V-model =”property” implements bidirectional binding between the form value and the Vue instance’s property property