欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中的常用指令(上)

程序员文章站 2022-05-15 13:45:52
...

先做一下基本的结构

<script>
		var vm = new Vue({
			el:'#app',
			data:{
				msg1 : '大家好,我是msg1',
				msg2 : '<h1>大家好,我是msg2</h1>',
				title : '这是一个自定义的title'
			},
			methods : {
				show:function(){
					alert("hello,mother fuck!")
				}
			}
		})
	</script>
  1. v-cloak和v-txet
    使用v-cloak可以解决插值表达式闪烁的问题
    默认v-text也没有闪烁的问题
<div id="app">
		<p>{{msg1}}</p>
		<p v-cloak>-----{{msg1}}------</p>
		<div v-text = "msg1">===========</div>
	</div>

二者对比如下:
可以看出:v-text会覆盖元素原来的内容,但是v-cloak只会替换自己的这个占位符,不会把整个元素清空vue中的常用指令(上)
2. v-html
v-html与前两者的用法相同,但是它能够往页面中添加标签混合元素
3. v-bind和v-on
①v-bind是为元素绑定属性(简写为:)
②v-on是为元素添加事件(简写为@)

<input type="button" value = "绑定属性" v-bind:title = "title">
<input type="button" value = "演示" v-on:click = "show">