Vue学习三：v-on:click命令及v-html命令学习

本文为博主原创，未经允许不得转载：

第一部分： v-on:click 命令讲解及使用方法

<!DOCTYPE html>
<html lang="zh">
<head>
    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
</head>
    <body>
        <div id="app" >
            <!--
                表达式形式:vue指令语法 v-指令名字+:+指令的参数=指令的表达式
            -->
            <button v-on:click="showsomething">click me!!</button>
            <!--
                v-on:click具有很多事件修饰符属性。比如：
                v-on:click.stop
                v-on:click.prevent
            -->
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                methods : {
                    showsomething:function(){
                        alert("show something");
                    }
                }
            })
            
        </script>
     </body>
</html>

其执行的效果如下图所示，在浏览器测试段加载，触发点击事件会执行自定义的事件：

 

 第二部分：v-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 }}
            <!--将其渲染为页面-->
            <div v-html="html"></div>
            {{ message }}
            <button v-on:click="message='123'">click me!</button>
            <!--只渲染一次-->
            <div v-once>
                {{message}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    html:"<h1>hello</h1>",
                    message:"liuluwei"   //data中的数值为初始化值，加载时第一次渲染会采用data中的设值
                }
            })
        </script>
     </body>
</html>

在浏览器端加载，执行效果如图所示：

当触发点击事件之后，click me前面的字符串就会变为点击事件中定义的内容123.

 

posted @ 2018-05-28 15:22  香吧香  阅读(10233)  评论(0)  编辑  收藏  举报