二、vue 内部指令

一、v-cloak 指令作用：防止页面刚刚载入显示{{ xxx }}后才显示数据的闪烁问题。注意：要配合样式display:none一起使用才有作用。实例：<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue</title><s...

快乐de馒头

167人浏览 · 2019-12-13 18:21:37

快乐de馒头 · 2019-12-13 18:21:37 发布

一、v-cloak 指令

作用：防止页面刚刚载入显示{{ xxx }}后才显示数据的闪烁问题。

注意：要配合样式display:none一起使用才有作用。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>
<script type="text/javascript" src="vue.js"></script>
</head>

<body>

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

<script type="text/javascript">	
	
	var vm=new Vue({
	    el:'#app',
	    data:{
		msg:'hello world'
	    }
	})
	
</script>

</body>
</html>

二、v-text指令

作用：v-text和插值表达式{{}}类似的功能，也是渲染出文本内容，区别是不会有闪烁问题。

实例：

<div id="app">
    <h4 v-text="msg"></h4>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	
	var vm=new Vue({
	    el:'#app',
	    data:{
		msg:'hello world'
	    }
	})
	
</script>

三、v-html指令

作用：把内容包含的html标签渲染成html 。

实例：

<div id="app">
	<div v-html="msg"></div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'<h4>hello world</h4>'
		}
	})
	
</script>

四、 v-bind指令

作用：绑定html元素的属性（html的属性例如表单元素的title，value，type，name等），和直接写html的属性区别是可以动态设置html属性值。

v-bind的简写是一个冒号“：”

实例：

<div id="app">
	<!--v-bind中可以写合法的js表达式 msg或msg3就像是一个变量，后面可以接字符串-->
	<input type="text" name="" v-bind:title="msg+'123'" v-bind:value="msg3">
	<!--v-bind的简写-->
	<img src="a.jpg" :title="msg2">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'这是一个文本框',
			msg2:'这是一张图片',
			msg3:'我是文本框的内容'
		}
	})
	
</script>

五、v-on 指令

作用：用来给html元素绑定事件。

v-on的简写是@

实例：给按钮绑定点击事件

<div id="app">
    <button v-on:click="clickHandle">点击</button>
    <!--v-on的简写@-->
    <button @click="clickHandle">点击</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	
	var vm=new Vue({
		el:'#app',
		data:{
		
		},
		methods:{
			clickHandle(){
				console.log("hello world")
			}
		}
	})
	
</script>

事件处理函数可以带参数

<div id="app">
	<button v-on:click="clickHandle('我是参数')">点击</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	
	var vm=new Vue({
		el:'#app',
		data:{
		
		},
		methods:{//在methods属性中定义vue实例中可用的方法
			clickHandle(msg){
				console.log(msg)
			}
		}
	})
	
</script>

六、v-model指令

v-model 实现数据的双向数据绑定，数据可以从model到view，也可以从view到model，v-model只能运用在表单元素中。

<div id="app">
	<h4>{{ msg }}</h4>
	<input type="text"  v-model="msg" />
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'hello world'
		}
	})
</script>

修改vm实例的msg表单的值会变化

修改文本框的值，vm的msg的值也会变化

所以v-model可以实现双向数据绑定。

v-bind 只能实现单向数据绑定，数据从model到view，不能从view到model。

<div id="app">
	<h4>{{ msg }}</h4>
	<input type="text" :value="msg" />
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			msg:'hello world'
		}
	})
</script>

修改vm 的msg值文本框的值也会变化：

修改表单的值vm的msg的值不会变化，

所以v-model只能实现单向数据绑定。

七、v-for指令和key属性

1、迭代数组

<div id="app">
	<ul>
                <!--在组件中，使用v-for的时候，或在一些特殊的情况中，如果v-for有问题，必须在使用v-for的同时， 指定唯一的字符串/数字类型的:key值-->
		<li v-for="(item,index) in list" :key="item.id">
			索引:{{ index }}---姓名：{{ item.name }}---{{ item.age }}
		</li>
	</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			list:[
				{id:1,name:'user1',age:22},
				{id:2,name:'user2',age:26},
				{id:3,name:'user3',age:25}
			]
		}
	})
</script>

渲染结果：

2、迭代对象中的属性

<div id="app">
	<ul>
		<li v-for="(value,key,index) in users">
			索引:{{ index }}---属性名：{{ key }}---属性值：{{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			users:{id:1,name:'user1',age:22}
		}
	})
</script>

渲染结果：

3、迭代数字

<div id="app">
	<ul>
		<li v-for="item in 10">
			{{ item }}
		</li>
	</ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
		}
	})
</script>

渲染结果：

2.2.0+的版本里，当在组件中使用v-for时，必须添加key属性，key的值必须唯一。

当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

八、v-show指令与v-if指令

一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗，因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

v-show与v-if都有切换html标签显示与隐藏的功能。

区别：

v-show指令原理是在html的标签上使用display:none样式来达到切换的目的，每次不会对dom进行创建和删除操作，只是切换了display:none样式。

v-if指令每次会真正的创建或移除html标签。

<div id="app">
	<button @click="flag=!flag">切换显示与隐藏</button>
	<h3 v-if="flag">这个是v-if控制的元素</h3>
	<h3 v-show="flag">这个是v-show控制的元素</h3>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			flag:true
		}
	})
</script>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^