第6节模板语法-指令

v-if指令：显示或隐藏

v-bind指令：绑定HTML特性，比如 v-bind：id="one"

@click: 点击事件 ; @click.stop 附带阻止冒泡，点击自己不影响祖先元素的点击事件

效果图：

代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
    <!-- v-if (显示或隐藏）根据其值的真假（boolean值：true、false）来决定是否显示p中的内容 -->
    <p v-if="trueOrFalse">看得到吗？</p>
    <!-- v-bind: 绑定HTML特性 -->
    <a v-bind:href="url">百度</a>
    <!-- @click="xxx"  ： 点击事件 -->
    <div @click="click1">
        <!-- .stop 阻止向祖先元素冒泡，阻止附带它们的点击事件 -->
        <div @click.stop="click2">点击我，看控制台的输出</div>
    </div>
</div>
<script type="text/javascript">
    var vm_one = new Vue({
        el:'#one',
        data:{
            trueOrFalse: false,
            url:'https://www.baidu.com'
        },
        methods:{
            click1:function(){
                console.log('click1点击了')
            },
            click2:function(){
                console.log('click2点击了')
            }
        }
    })
</script>
</body>
</html>