Vue學習一：{{}}html模板使用方法

時間 2020-06-15

原文原文鏈接

本文爲博主原創，未經容許不得轉載：html

　　以前自學了vue，在項目中應用了vue，因爲是第一次使用，感受很是強大，使用也很是方便，趁有時間，總結一下vue學習過程當中vue

各個指令的使用方法，只要掌握了vue的指令，就能熟練使用vue。app

如下爲HTML模板{{ }}的使用方法：函數

<!DOCTYPE html>
<html lang="zh">
<head>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
    <body>
        <div id="app" >
            <!--
                {{ }}爲HTML模板，用於輸出對象屬性和函數返回值，
                裏面不只能夠寫js變量，
                還能夠寫一些簡單的表達式，好比三目運算符，累加等等，
                當裏面寫方法的時候，必需要在vue中申明
            -->
            <!--{{age>60 ? "老人":"年輕人"}}-->
            <!--{{fullName.split(" ")[1]}}-->
            {{getFullName()}}
        </div>
        <script>
            /**
             * 每一個 Vue 應用都須要經過實例化 Vue 來實現。
             */
            var vm = new Vue({
                /*  el:用於綁定屬性的元素 */
                el:"#app",  //
               //data 用於定義屬性，
                data:{    
                    msg:"hello world!!",
                    age: 30,
                    firstName : "liu234",
                    lastName : "luw3111i",
                    fullName : "luwei 6"
                },
                /* 用於定義的函數，能夠經過 return 來返回函數值。*/
                methods : {
                    getFullName : function(){
                        //this指vm實例
                        return this.firstName + "" + this.lastName
                    }
                }
            })
        </script>
     </body>
</html>