Vue炼体篇

最新推荐文章于 2024-05-25 08:59:07 发布

那shiyu

最新推荐文章于 2024-05-25 08:59:07 发布

阅读量285

点赞数

文章标签： javascript vue

本文链接：https://blog.csdn.net/nys666/article/details/131799581

版权

1.Vue常用指令

1. v-if
v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

2. v-else
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

3. v-else-if
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

4. v-show
也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

5. v-for
用v-for指令根据遍历数组来进行渲染

6. v-model
这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

7. v-bind
v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。

8. v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

2.对js表达式的支持

再讲指令之前，我们先看看vue对js表达式的支持

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<input :value="valuestr"/>
			<p>表达式</p>
			{{str.substring(0,4).toUpperCase()}}
			张三:{{number+1}}
			{{ok ? 'yes' : 'no'}}
			<span :id="'goods_id_'+id">xx</span>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					valuestr:'2223',
					str:'Java是最牛的语言',
					number:59,
					ok:false,
					id:66
				};
			}
		})
	</script>
</html>

通过已上代码，发现vue支持js完美支持js表达式。

2.v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div v-html="htmlstr">{{htmlstr}}</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'hello,Vue!',
						htmlstr: '<strong>hello,Vue!</storng>'
					}
					
				}
				
			});
		</script>
	</body>
</html>

使用v-html实现对html代码块支持

3.v-bind，v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
            <input type="text" :value="msg" />
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'hello vue'};
			}
		})
	</script>
</html>

使用v-bind进行单向绑定,v-model进行双向绑定

4.v-if/v-else/v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	
	<body>
		<div id="app">
			<p>v-if/v-else-if/v-else</p>
			
			<input v-model="score">
			<span v-if="score>90">优秀</span>
			<span v-else-if="score>80">良好</span>
			<span v-else-if="score>70">中等</span>
			<span v-else-if="score>60">及格</span>
			<span v-else="">不及格</span>
			<span v-if="score>100">不存在</span>

			
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						score:90
			
					}
				}
		
				
				
			
			});
			
		</script>
	</body>
</html>

这里，我们可以知道v-if对dom元素的操作，如果条件存在就会渲染，如果不存在就不会渲染

5.v-show

那么我们在html中加入以下代码

            <span v-if="score>100">不存在</span>
			
			<p>v-show</p>
			<span v-show="score>100">不存在</span>

我可以晰知道v-show也是能对页面是否显示元素进行条件判断的，那么v-if和v-show有什么区别呢？

6.v-show与v-if的区别

我们具体分析，从概念和区别上来看：

一、概念
v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
v-show：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

二、区别
1、主要区别

（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作

2、本质区别

（1）vue-show本质就是标签display设置为none，控制隐藏
（2）vue-if是动态的向DOM树内添加或者删除DOM元素

3、编译区别

v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。

4、性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

5、用法

v-if更适合于带有权限的操作，渲染时判断权限数据，有则展示该功能，没有则删除。v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作。

三、适用场景
从页面显示上看，二者并没有太多的区别，基本上就是显示和不显示的用户体验差别。在需要频繁切换显示状态的组件或者相对渲染强度大但是过分依赖生命周期或的组件，更加适合用 v-show 作为切换的指令。因为，v-if 会带来实时渲染所带来的不必要的资源消耗，和操作延迟，这给用户的体验并不是很好，相对下，v-show基于CSS的显示与隐藏，更加快捷，响应速度更快，并且资源消耗也会更小。但 v-show 的弱点也很明显，因为页面是在页面初始化的时候，就得完成全部的渲染，这使得页面的加载会更消耗资源，也意味着页面加载时长会相应增长。假如组件对资源的消耗，已经影响到了用户的体验，可能采取 v-if 将组件分成小块，按需加载或许会更加有用户体验。

总而言之，v-if 是在表达式返回值切换时，才渲染和摧毁组件及其子组件，他会触发组件的生命周期。而 v-show 是在页面初始化时就进行了完整的渲染，这会在某些情况下，明显增加页面的加载时间。具体的使用，还得根据需求、页面的加载时长以及组件的渲染强度，进行合适的选择。
7.v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	
	<body>
		<div id="app">
			
			<p>v-for</p>
			<div v-for="n in arr">
				{{n}}<br />
			</div>
			<div v-for="n in likes">
				{{n.id}}--{{n.name}}<br />
			</div>
			
			
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						arr:['唱','跳','rappe'],
						likes:[
							{id:1,name:'洗脚'},
							{id:2,name:'sing'},
							{id:3,name:'head'}
							],
					}
				}
				
				
				
			})
			
		</script>
	</body>
</html>

这里我们可以通过v-for来进行遍历，很简单。

8.v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	
	<body>
		<div id="app">
	
			<p>v-on</p>
			
			<button type="button" v-on:click="do_spa">点我</button>
			
			<input v-model="envname"><br />
			<button type="button" v-on:[envname]="do_spa">魔法按钮</button>
			
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
							envname:'click'
					}
				},
				methods:{
						
					do_spa(){
						alert("spa")
					}
				}
				
				
			})
			
		</script>
	</body>
</html>

这里我们可以通过input输入值来选择需要触发的事件，是不是很神奇？

9.过滤器

<div id="app">
	<h2>基本过滤器</h2>
	{{str}}
	<br>
	{{str|filterA}}
	<h2>过滤器串联</h2>
	{{str|filterA|filterB}}
	<h2>过滤器传参</h2>
	{{str|filterC(2,8)}}
	<h2>引用外部js</h2>
	{{curtime}}
	<br>
	{{curtime|format}}
</div>
<script>
	Vue.filter('format', function(v) {
		return fmtDate(v, 'yyyy-mm-dd hh:MM:ss');
	})
	// 绑定边界
	new Vue({
		el: '#app',
		filters: {
			filterA: function(v) {
				return v.substring(0, 5);
			},
			filterB: function(v) {
				return v.substring(1, 2);
			},
			filterC: function(v, begin, end) {
				return v.substring(begin, end);
			}
		},
		data() {
			return {
				str: 'hello vue',
				curtime: new Date()
			}
		}
	})
</script>

使用到的date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

通过以上代码可以对字符串进行过滤操作，特别方便。

10.关于vue的监听属性和计算属性（ Vue2.x）

computed（计算属性）：
1，监听值未在data中定义，以return返回值形式；
2，计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求；
3，计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。

watch(监听器）：
1，监听值要在data中先定义，可以不写return返回值；
2，不支持缓存，可以做异步操作；
3，监听值改变，回调函数自动调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

	</head>

	<body>
		<div id="app">
			<p>监听属性</p>

			m: <input v-model="m"><br />
			km: <input v-model="km"><br />
			
			<p>计算属性</p>
			<table>
				<tr>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>
						<input v-model="danjia">
					</td>
					<td>
						<input v-model="n">
					</td>
					<td>
						{{xiaoji}}
					</td>
				</tr>
			</table>
			
		</div>

		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						m: 1000,
						km: 1,
						danjia:199,
						n:1,
					

					}
				},
				watch:{
					m:function(v){
						//此时的v的属性是被监听的属性
						this.km=parseInt(v)/1000
					},
						
					km:function(v){
						this.m=parseInt(v)*1000
					}
				},
				computed:{
					xiaoji:function(){
						return this.danjia*this.n;
					}
				}

			})
		</script>
	</body>
</html>

通过以上代码可以学习到Vue两种属性的具体用法，以及区别。

好了，炼体篇到此，祝各位道友早日修得圆满。

那shiyu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue炼体篇

v-if 会带来实时渲染所带来的不必要的资源消耗，和操作延迟，这给用户的体验并不是很好，相对下，v-show基于CSS的显示与隐藏，更加快捷，响应速度更快，并且资源消耗也会更小。但 v-show 的弱点也很明显，因为页面是在页面初始化的时候，就得完成全部的渲染，这使得页面的加载会更消耗资源，也意味着页面加载时长会相应增长。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
复制链接

扫一扫