Vue instructions Daquan~~~

Yes, there are a lot of vue instructions to use here~

1. Simple vue application

Vue is an mvvm framework, why is it called mvvm?

Model is responsible for data storage,

View is responsible for the display of the page

Model View

Responsible for business logic processing, view display after data processing

The role of MVVM is that the business logic code and the view code are completely separated, and their respective responsibilities are clearer~

<body>
     <!--v--> in mvvm
    <div id="app">
        {{val}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        //This is the vm in mvvm
        var vm=new Vue({
            el: '# app',
           //This is m in mvvm 
            data:{
                val: 'hello'
            }
        })
    </script>

</body

2.v-text

 <div id="app" v-text="val"> 
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        // This is the vm in mvvm 
        var vm= new Vue({
            el: ' #app ' ,
            // this is m in mvvm 
            data:{
                val: ' hello '
            }
        })
    </script>

view:

The v-text here is text-biased, if you change val:'Hello' to val:'<p style="color:red">Hello</p>'

view is

So the next step is to introduce v-html

3.v-html

<body>
    <!--v--> in mvvm
    <div id="app" v-html="val"> 
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        // This is the vm in mvvm 
        var vm= new Vue({
            el: ' #app ' ,
            // this is m in mvvm 
            data:{
                val:'<p style="color:red">你好</p>'
            }
        })
    </script>
</body>

view:

v-text is to display everything in the form of text, and v-html can parse the tags inside~

4 v-cloak

Usually our data is rendered with {{}}, so what is the difference between such rendering and v-html and v-text?

In the case that the network is not available, we use the form of {{}} to render the flash {{}}, and then the data will appear, so you can put this instruction on the parent element of the label to be rendered, and remember to write the style. display:none of course you can put it on the label of the scope defined by vue at the beginning

 <style>
        [v-cloak]{
          display: none  
        }
    </style>
</head>
<body>
    <!--v--> in mvvm
    <div id="app" v-cloak>
        {{val}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        // This is the vm in mvvm 
        var vm= new Vue({
            el: ' #app ' ,
            // this is m in mvvm 
            data:{
                val: ' hello '
            }
        })
    </script>

</body>

5.v-for

 <div id="app">
        <div v-for="(el,index) in dataList">
            <p>Name:{{el.name}}</p>
            <p>Age:{{el.age}}</p>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // This is the vm inside mvvm 
        var vm = new Vue({
            el: ' #app ' ,
             // this is m in mvvm 
            data: {
                val: ' hello ' ,
                dataList:[
                    {
                        name:'jack',
                        age:18
                    },
                    {
                        name:'rose',
                        age:17
                    }
                ]
            }
        })
    </script>

The things to note here are:

Usually add:

    <div v-for="(el,index) in dataList" :key="index" >
            <p>Name:{{el.name}}</p>
            <p>Age:{{el.age}}</p>
        </div>

:key="index" or if there is an id in el, you can write :key="el.id" to distinguish each list, because the whole list is rendered when rendering, and this is only used for replacement, or local changes

6.v-on

 <div id="app">
         <button type= " button " v-on:click= " clickMe() " >Click me if you love me</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        // This is the vm in mvvm 
        var vm= new Vue({
            el: ' #app ' ,
            // this is m in mvvm 
            data:{
                val: ' hello '
            },
            methods:{
                clickMe(){
                     alert(this.val)
                }

            }
        })
    </script>

v-on:click="clickMe()" Shorthand: click="clickMe()" is fine. 
The this here represents vm, and you can use vm.val directly to get the same 
view:

7.v-if

<body>
    <!--v--> in mvvm
    <div id="app">
        <p  v-if="val=='你好'">
            Good boy
        </p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script >
        // This is the vm in mvvm 
        var vm= new Vue({
            el: ' #app ' ,
            // this is m in mvvm 
            data:{
                val: ' hello '
            }
        })
    </script>

</body>

view:

The difference between v-if and v-show, v-show is just hidden, v-if is the direct element disappears...

Vue instructions Daquan~~~

Guess you like