Meet Vue

• Vue Author: you Yuxi
  Vue (pronunciation / vju) ː/， Similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from bottom to top. Vue's core library only focuses on view layers, which is not only easy to start, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with modern tool chains and various supporting class libraries, Vue can also provide drivers for complex single page applications.
• environment

 - <!-- Development environment version with helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Production environment version, optimized size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Entry program

<!--quick get start-->
    <h2 id="app">{{msg}}</h2>
    <script>
    //Declarative rendering: data and DOM have been correlated, and everything is responsive.
        let app = new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            }
        });
    </script>

instructions

• v-bind:
  The v-bind attribute is called an instruction. Directives are prefixed v-, indicating that they are special attributes provided by Vue. As you may have guessed, they will apply special responsive behavior on the rendered DOM. Here, the instruction means: "keep the href attribute of this element node consistent with the go property of the Vue instance".

<!--  v-bind Properties of binding elements  -->
    <a id="app2" v-bind:href="go">Baidu</a>
    <script>
        let app2 = new Vue({
            el: "#app2",
            data: {
                go: 'https://www.baidu.com/'
            }
        });
    </script>

• v-if v-else-if v-else

<!-- Select operation v-if  v-else v-else-if -->
    <div id="app4">
        <p v-if="flag === 'A'">A</p>
        <p v-else-if="flag === 'B'">B</p>
        <p v-else>C</p>
    </div>
    <script>
        new Vue({
            el: "#app4",
            data: {
                flag: "A"
            }
            }
        );
    </script>

• v-for

<!--Cycles and conditions-->
    <div id="app3">
        <li v-for="(item,index) in items">{{index}}:{{item.msg}}</li>
    </div>
    <script>
        let app3 = new Vue({
            el: "#app3",
            data: {
                items: [
                    {msg: "A"},
                    {msg: "B"},
                    {msg: "C"},
                ]
            }
        });
    </script>

• The v-on instruction adds an event listener through which to call the methods defined in the Vue instance:

<!--Event binding-->
    <div id="app5">
        <button v-on:click="app5()">click</button>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el: "#app5",
            data: {
                msg: 0,
            },
            methods: {
                app5: function () {
                    this.msg++;
                }
            }
        });
    </script>

• Bidirectional binding of v-model form data

<!--Form data processing, two-way binding-->
    <form id="app6">
        name:<input type="text" v-model="name" placeholder="Please enter your name..."><span>{{name}}</span><br/>
        password:<input type="password" v-model="password"  placeholder="password..."><span>{{password}}</span><br/>
        <textarea v-model="text"></textarea><span>{{text}}</span><br/>
        <input type="radio" value="male" v-model="disabled" checked="checked" >
        <input type="radio" value="female" v-model="disabled" ><span>{{disabled}}</span><br/>
        <input type="checkbox" v-model="choose" value="a">a
        <input type="checkbox" v-model="choose" value="b">b
        <input type="checkbox" v-model="choose" value="c">c<span>{{choose}}</span><br/>
        <select v-model="on">
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
        </select><span>{{on}}</span>
    </form>
    <script>
        new Vue({
            el: "#app6",
            data: {
                name: "",
                password: "",
                text: "",
                disabled: "male",
                choose: [],
                on: ''
            }
        });
    </script>

• With the v-once instruction, you can also perform one-time interpolation. When the data changes, the content at the interpolation will not be updated.
• v-bind abbreviation

<!-- Complete grammar -->
<a v-bind:href="url">...</a>

<!-- abbreviation -->
<a :href="url">...</a>

<!-- Abbreviations for dynamic parameters (2.6.0+) -->
<a :[key]="url"> ... </a>

• v-on abbreviation

<!-- Complete grammar -->
<a v-on:click="doSomething">...</a>

<!-- abbreviation -->
<a @click="doSomething">...</a>

<!-- Abbreviations for dynamic parameters (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Component application construction

Component system is another important concept of Vue because it is an abstraction that allows us to build large applications using small, independent and usually reusable components. When you think about it, almost any type of application interface can be abstracted into a component tree:

<!--assembly-->
    <div id="app7">
        <zyx v-for="num in numbers" v-bind:value="num"></zyx>
    </div>
    <script>
    //Customize components, add names, and create templates
        Vue.component('zyx',{
            props: ['value'],
            template: '<p>{{value}}</p>'
        });
        new Vue({
            el: "#app7",
            data:{
             numbers: [1,2,3,4,5],
            }
        });
    </script>

Vue instance

Each Vue application starts by creating a new Vue instance with the Vue function:

var vm = new Vue({
  // option
})

Although it does not fully follow the MVVM model, Vue's design is also inspired by it. Therefore, the variable name VM (short for ViewModel) is often used in documents to represent Vue instances.

Official website

The following figure shows the life cycle of an instance

Calculation properties

<div id="app9">
        <p>{{test1()}}</p>
        <p>{{test2}}</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app9",
            data: {
                message: "zyx"
            },
            methods: {
                test1: function () {
                    return Date.now();
                }
            },
            computed: {
              test2: function () {
                  return Date.now();
              }
            }
        });
    </script>

Define the same function as a method rather than a calculated property. The final results of the two methods are exactly the same. However, the difference is that the calculated attributes are cached based on their responsive dependencies. They are re evaluated only when the relevant responsive dependencies change. This means that as long as the message has not changed, multiple accesses to the reversedMessage calculation property will immediately return the previous calculation result without executing the function again.

Custom event content distribution

<!--slot plug-in unit-->
<div id="app10">
    <z>
        <zyx-title slot="zyx-title" v-bind:title="title"></zyx-title>
        <zyx-items slot="zyx-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="toRemove(index)" :key="index"></zyx-items>
    </z>
</div>
<script>
    Vue.component("z",{
        template: '<div><slot name="zyx-title"></slot><ul><slot name="zyx-items"></slot></ul></div>'
        //Custom components and slot
    });
    Vue.component("zyx-title",{
        props: ['title'],
        //props: [] value can be passed in
        template: '<div>{{title}}</div>'
    });
    Vue.component("zyx-items",{
        props: ['item'],
        template: '<li>{{item}}<button v-on:click="remove">delete</button></li>',
        methods: { //Define event distribution
            remove: function (index) {
                this.$emit('remove',index)
            }
        }
    });
    new Vue({
        el: "#app10",
        data: {
            title: 'hobby',
            items: ['Basketball','Basketball*2','Basketball*3']
        },
        methods: {
            toRemove: function (index) {
                this.items.splice(index,1);
            }
        }
    });
</script>

axios

Vue. JS version 2.0 recommends using axios to complete ajax requests.

Axios is a Promise based HTTP library that can be used in browsers and node JS.

<!--axios Implement asynchronous updates-->
    <div id="app8" >
        <p v-for="site in info.sites">{{site.name}}:{{site.info}}</p>
    </div>
    <script>
        new Vue({
            el: "#app8",
            data(){
                return {
                    info: {
                        name: null,
                        sites: [
                            {
                                name: null,info: null
                            }
                        ]
                    }
                }
            },
            mounted(){
                axios.get('data.json').then(response => (this.info=response.data)).catch(function (error) {
                    alert(error);
                });
            }
        });
    </script>