飞狐爷

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
vue基础

vue指令：

v-cloak：插值表达式，隐藏值未载入时显示的标签

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[v-cloak]{display:none;}
</style>
</head>

<body>
<div id="app">
	<p v-cloak>{{ msg }}</p>
</div>

<script src="vue.min.js"></script><!--注：此引入必须和下面代码块放在一块，否则看不到v-cloak效果-->
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			msg:'456'
		}
	});
</script>
</body>
</html>

v-text：显示文本内容

v-html：显示html内容

v-bind：用于绑定属性的指令

<input type="button" v-bind:title="mytitle + '123'">#还可以连接字符串
或者省略v-bin
<input type="button" :title="mytitle">
有两种写法

 v-on的缩写和事件修饰符

stop：阻止事件冒泡
prevent：阻止默认事件
.capture：添加事件侦听器时使用事件捕获模式
.self：只在元素本身触发事件时触发
.once：事件只触发一次

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    [v-cloak]{display:none;}
    .dv1 {background: #BDC9D4; padding: 10px;}
</style>
</head>

<body>
<div id="app">
    <p v-cloak>{{ msg }}</p>
    <div v-on:click="clickDiv" class="dv1">
        <input type="button" value="按钮" v-on:click.stop="clickBut">
    </div>
    <a href="http://www.baidu.com" v-on:click.prevent="linkurl">去百度</a>
    <div v-on:click.capture="clickDiv" class="dv1">
        <input type="button" value="捕获按钮" v-on:click.stop="clickButcapture">
    </div><br>
    <div v-on:click.self="clickDiv" class="dv1">
        <input type="button" value="按钮" v-on:click.stop="clickBut">
    </div><br>

    <div v-on:click.once="clickDiv" class="dv1">
        <input type="button" value="按钮" v-on:click.stop="clickBut">
    </div>
</div>
<script src="vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'456'
        },
        methods:{
            clickDiv(){
                console.log('点击了div')
            },
            clickBut(){
                console.log('点击了按钮')
            },
            linkurl(){
                console.log('a链接');
            },
            clickButcapture(){
                console.log('捕获机制触发');
            }
        }
    });
</script>
</body>
</html>
View Code

 

posted on 2019-08-05 22:47  飞狐爷  阅读(134)  评论(0)    收藏  举报