vue模板语法

1.模板理解
动态的html页面，包含了一些js语法代码，在页面的用法主要分为双大括号和一些指令(一些以V-开头的标签属性)。

2.双大括号
语法：{{表达式}}

3.指令一
绑定数据
例子，动态修改图片的URL

<div id="img">
    <img v-bind:src="url" alt="">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>

 new Vue({
        el:'#img',
        data:{
            url:'https://cn.vuejs.org/images/logo.png',
            msg:'<a href="http://baidu.com">百度</a>'
        }
    });

4.指令二
接听事件
没有参数

<div id="btn">
    <button v-on:click="test">按钮</button>
</div>

 new Vue({
        el:'#btn',
        data: {

        },
        methods:{
            test(){
                alert("good!")
            }
        }
    });    

有参数：@等同于v-on:

<div id="btn">
    <button @click="test(msg)">按钮</button>
</div>

 new Vue({
        el:'#btn',
        data: {
            msg: '我是帅哥'
        },
        methods:{
            test(s){
                alert(s);
            }
        }

    });