VUE：模板语法（小白自学）

VUE：模板语法

一：何为声明式

安装规定的语法，去实现一些效果（不需要管流程）。

二：模板语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1    模板的理解：动态的html页面，包含了一些js语法代码
                双大括号表达式
                指令（以v-开头的自定义标签属性）
            2    双大括号表达式
                语法：{{exp}} 或 {{{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>
            <p>{{msg.toUpperCase()}}</p>    <!--msg是变量，可以写js表达式-->
            <p v-text="msg2"></p>    <!-- 写入文本 value    textContent-->
            <p v-html="msg2"></p>    <!-- 转换成html语句    innerHTML-->
            <h2>2、指令一:强制数据绑定</h2>
            <img v-bind:src="imgUrl" />
            <img :src="imgUrl" />
            <h2>3、指令二：绑定事件监听</h2>
            <button v-on:click="test">点击有惊喜</button>
            <button @click="test2(msg)">点击还有惊喜</button>    <!-- 可以传变量-->
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    msg:'taosir is studing...',
                    msg2:'<a href="http://www.baidu.com">taosir is here!</a>',
                    imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif'
                },
                methods:{
                    test(){
                        alert("意不意外！");
                    },
                    test2(m){
                        alert(m);
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2018-10-31 22:28  涛先森の日常  阅读(260)  评论(0)  编辑  收藏  举报