Vue初学-插值表达式

首先我们要引入对应的vue的js文件，或者直接引用vue官网的js文件。

    <script src="https://vuejs.org/js/vue.min.js"></script>

插值表达式的语法是使用两个大括号包裹住需要渲染的数据 {{data}}。

定义data

 <div id="app" class="myClass">
        {{15>20}}
        {{number>100}}
        {{msg.toUpperCase()}}
        {{arr.join("-")}}
        {{user.old>18?user.name+"成年了":user.name+"未成年"}}
        {{user.old<18 && user.name+"未成年"}}
    </div>
    <script>
        const vm=new new Vue({
            el:"#app",
            data:{
                number:1,
                msg:"hello world",
                arr:[1,2,3,4,5,6],
                user:{
                    name:"Tom",
                    old:17,
                    sex:"男"
                }
            }
        })
    </script>

"el"代表的是element,表示创建的vue对象要挂载到哪个元素上，el的取值可以是该元素的Id，或者是class，或者是dom元素，也可以是标签，但是不可以是html或者body标签，data定义的是该vue对象的数据。插值表达式里面可以直接使用在vue中定义的data中的属性，或者是计算表达式，如：三元表达式。

定义method

   <div id="app" class="myClass">
        {{myTest()}}
        {{sum2(1,2)}}
        {{sum3(arr[0],arr[1])}}
    </div>
    <script>
        var vm=new new Vue({
            el:"#app",   
            data:{
                arr:[1,2,3,4,5,6]
            },
            methods: {
                myTest:function(){
                    console.log("This is myTest function");
                },
                sum2(num1,num2){
                    return num1+num2;
                },
                sum3:(num1,num2)=>{
                    return num1+num2;
                }
            }
        })
    </script>

methods中定义函数，插值表达式中也可以使用调用方法。