v-ocloak的使用
//使用v-ocloak能够解决插值表达式闪烁问题（网络慢时进入页面会先显示{{msg}}请求vue才显示正确到插入值）
<head>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
</body>
v-text的使用
- 默认v-text没有闪烁问题
- 插值表达式前后可以放任何内容，只会替换自己的这个占位符，不会把整个元素的内容清
空，v-text会覆盖元素中原本的内容
<div id="app">
<p v-cloak>******{{msg}}*****</p>
<h4 v-text="msg">==========</h4>
</div>
效果图片
插值表达式与v-text效果演示
v-html的使用
当渲染内容是html字符串时不能使用插值表达式和v-text，而要使用v-html
data: {
msg2: '<h1>这是一个h1</h1>'
}
<div id="app">
<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
</div>
渲染结果
v-bind的使用
v-bind是vue中提供的用来绑定属性的指令
<input type="button" v-bind:title="title" value="按钮">
var vm = new Vue({
el: '#app',
data: {
title: '一个自定义的title'
}
})
效果演示
v-bind会把绑定的内容当作js表达式来解析，所以可以直接进行字符串拼接
<input type="button" v-bind:title="title+'拼接的部分'" value="按钮">
效果演示
简写方式v-bind:属性可以简写为:属性
<input type="button" :title="title+'拼接的部分'" value="按钮">
v-on的使用
vue中提供的v-on事件绑定机制，与v-bind区别，v-bind用来绑定属性
v-on的缩写为@
<input type="button" v-on:click="show" value="按钮">
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Yes,Study Begin',
msg2: '<h1>这是一个h1</h1>',
title: '一个自定义的title'
},
//在methods中定义当前Vue实例中所有可用的方法
methods:{
show:function () {
alert("Hello");
}
}
})
</script>
v-model的使用
可以用来实现双向数据绑定，只能用在表单元素中
***************************************这是一条分割*******************************************
事件修饰符
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
- stop 阻止冒泡
- prevent 阻止默认事件
- capture 添加事件侦听器时使用事件捕获模式
- self 只当事件在该元素本身（比如不是子元素）触发时触发回掉
- once 事件只触发一次
- passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，.passive 修饰符尤其能够提升移动端的性能。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用stop修饰符前
<div @click="divHandler" class="inner">
<input @click="btnHandler" type="button" value="点一哈">
</div>
使用前点击效果
使用stop修饰符后
<div @click="divHandler" class="inner">
<input @click.stop="btnHandler" type="button" value="点一哈">
</div>
使用后点击效果
prevent修饰符的使用
<!--阻止a标签的默认跳转-->
<a @click.prevent="linkClick" href="http://www.bai.com">有问题先百度</a>
使用capture修饰符前
<div @click="divHandler" class="inner">
<input @click="btnHandler" type="button" value="点一哈">
</div>
使用capture修饰符后
<div @click.capture="divHandler" class="inner">
<input @click="btnHandler" type="button" value="点一哈">
</div>
使用后点击效果
网友评论