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>

使用效果：学习