VUE模板语法

1. 模板的理解:
   动态的html页面
   包含了一些JS语法代码
   大括号表达式
   指令(以v-开头的自定义标签属性)
2. 双大括号表达式
   语法: {{exp}}
   功能: 向页面输出数据
   可以调用对象的方法
3. 指令一: 强制数据绑定
   功能: 指定变化的属性值
   完整写法:
   v-bind:xxx='yyy' //yyy会作为表达式解析执行
   简洁写法:
   :xxx='yyy'
4. 指令二: 绑定事件监听
   功能: 绑定指定事件名的回调函数
   完整写法:
   v-on:click='xxx'
   简洁写法:
   @click='xxx'

<div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{msg}}</p><!-- textContent -->
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p><!-- textContent -->
    <p v-html="msg"></p><!-- innerHTML -->

    <h2>2. 指令一: 强制数据绑定</h2>
    <!-- <img src="imgUrl" alt="大V"> -->
    <!-- <img v-bind:src="imgUrl" alt="大V"> -->
    <img :src="imgUrl" alt="大V">

    <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <!-- <button @click="test2('abc')">test2</button> -->
    <button @click="test2(msg)">test2</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            // msg: 'I Will Back!'
            msg: '<a href="http://www.baidu.com">百度网</a>',
            imgUrl: 'https://cn.vuejs.org/images/logo.png'
        },
        methods: {
            test(){
                alert('hihi~~');
            },
            test2(content){
                alert(content);
            }
        }
    })
</script>
</body>
</html>