vue知识盲点

solitudeYu
172 阅读7分钟

#指令使用 ###1.v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

//span添加v-once属性，msg进行第二次赋值的时候不会进行改变
<span v-once>This will never change: {{msg}}</span>

###2.v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

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

	</head>
	<body>
		<div id="app" v-cloak>{{message}}</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'hello Vue!'
			}
		})
</script>

***可以避免打开网页时，页面一闪而过的{{}}，等页面加载问题

###3.属性绑定v-bind（对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 属性绑定 {类名:boolean,类名:boolean} -->
			<h2 :class="{active:isActive,line:isLine}">吊毛</h2>
			<!-- 方法二 -->
			<h2 :class="getClass()">吊毛</h2>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			isActive: false,
			isLine: false
		},
		methods: {
			getClass() {
				return {
					active: this.isActive,
					line: this.isLine
				}
			}
		}
	})
</script>
<style type="text/css">
	.active {
		color: red;
		box-shadow: #0000FF;
	}
</style>

li列表点击某个元素改变字体颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in list" :key="index" @click="changeColor(index)" :class="{active :isActive === index}">{{item}}</li>
			</ul>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			list: ['aaa', 'bbb', 'ccc', 'ddd'],
			isActive: -1
		},
		methods: {
			changeColor(index) {
				this.isActive = index;
			}
		}
	})
</script>
<style type="text/css">
	.active {
		color: red;
	}
</style>

###3.计算属性computed

//forEach方法中的function回调有三个参数：
//第一个参数是遍历的数组内容，
//第二个参数是对应的数组索引，
//第三个参数是数组本身
var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){
 array[index] == value; //结果为true
 sum+=value; 
 });
console.log(sum); //结果为 10


var array = ['a', 'b', 'c'];
array.forEach(function(element) {
  console.log(element);
});
输出为：
a;
b;
c;


// *****computed定义的计算属性，全局计算一次，多次调用不会重复计算*****
<div>
    <div>
        语文：<input v-model="chineseScore"/>
    </div>
      <div>
        英语：<input v-model="englishScore"/>
    </div>
    <div>
        {{totalScore}}
    </div>
</div>
// js部分
data(){
    chineseScore:0,
    englishScore:0    
},
computed:{
    totalScore:{
        return this.chineseScore + this.englishScore
    }
}

###4.Vue报错 "TypeError: Cannot read property 'content' of undefined" Vue出现该错误的原因很可能是因为请求服务器获取数据是异步的，请求回来的时候已经开始渲染页面，若此时定义的数据为空也就是没有该数据的属性，则其中的属性值为undefined。

image.png

解决办法

1581573322(1).jpg

###5.lable和input 当lable标签中的for指向input中的id，用户点击文字会聚焦到输入框，增强用户体验 解决输入框的复用问题添加key即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="isUser">
				<label for="userName">用户名</label>
				<input type="text" name="" id="userName" value="" placeholder=""/>
			</span>
			<span v-else>
				<label for="email">邮箱</label>
				<input type="text" name="" id="email" value="" placeholder=""/>
			</span>
			<button type="button" @click="isUser = !isUser">切换</button>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				isUser: true
			}
		})
	</script>
</html>

###6.v-for遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 在遍历对象时只获取一个值，那么获取到的是value -->
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>


			<!-- 在遍历对象时获取key和value，格式：（value，key） -->
			<ul>
				<li v-for="(value,key,index) in list">{{index}}--{{key}}--{{value}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				list: {
					name: '赵楠',
					age: '22',
					height: 1.58,
					weight: 60
				}
			}
		})
	</script>
</html>

###7.filters和computed应用场景 computed: 1.不能传参,只能监听预先设置好的值; 2.值会缓存,在我们要监听的数据没有变化的时候，是不会再去执行对象相应的数据的(性能比较好)

filters: 1.将返回数据进行处理后返回处理结果的简单函数 2.值不会缓存,会重新执行里面的操作

同:所得到的值都需要return出去

例如:当我需要获取到这里歌曲的时间,每一行的时间是不同的,我们从接口中的duration 中获取到的多少毫秒,就需要换算成对应的分钟,当每一行的值不一样时,我们必须要使用到过滤器,将图二中item.duration的值传进来

image.png
image.png

image.png
###8.filter、map、reduce函数

methods: {
				testFilter() {
					const nums = [12, 56, 489, 11, 885, 518, 15, 451, 851, 55];
					//条件为true，会将n的值返回到一个新的数组当中
					let newNums = nums.filter(function(n) {
						return n > 100;
					})
					console.log(newNums)
					// [489, 885, 518, 451, 851]
				},
				testMap() {
					const nums = [12, 56, 489, 11, 885, 518, 15, 451, 851, 55];
					//map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
					let newNums = nums.map(function(n) {
						if (n == 55) {
							return n * 2;
						}
						return n;
					})
					console.log(newNums)
					// 数组中所有值*2  [24, 112, 978, 22, 1770, 1036, 30, 902, 1702, 110]
					// 数组中的值满足==55，返回  [12, 56, 489, 11, 885, 518, 15, 451, 851, 110]
				}
			},
			mounted() {
				// filter函数
				this.testFilter();
				// map函数
				this.testMap();
			}

###9.v-model修饰符lazy、number、trim

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 懒加载：在添加了lazy之后，会把 oninput 事件改成 onchange 事件。 -->
			<input type="text" v-model.lazy="msg">
			<p>{{msg}}</p>
			<!-- number 修饰符会把 v-model 的值转换成数值类型。 -->
			<input type="text" v-model.number="msg">
			<p>{{msg}} : {{typeof(msg)}}</p>
			<!-- 	trim的作用是过滤用户输入时首尾的空格字符 -->
			<input type="text" v-model.trim="msg">
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				msg: ''
			},
			watch: {
				msg(newValue) {
					console.log(newValue);
				}
			},
			methods: {

			},
			mounted() {

			}
		})
	</script>
</html>

###10.组件注册和使用 1.vue原始注册方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 3.使用组件 -->
			<cpn />
		</div>
	</body>
	<script type="text/javascript">
		// 1.创建组件构造器对象
		const cpn = Vue.extend({
			template: `
				<div>
					<h1>啊哈哈哈哈</h1>
					<p>阿萨的那份静安寺都能发生脑袋放空蓝色的</p>
					<span>骄傲的时刻能否卢卡斯的女了</span>
				</div>`
		})

		// 2.注册组件（全局注册）
		// Vue.component('cpn', cpn);

		var app = new Vue({
			el: '#app',
			data: {},
			// 2.注册组件（局部注册）
			components: {
				cpn: cpn
			},
			methods: {

			},
			mounted() {}
		})
	</script>
</html>

2.vue2.0语法糖组件注册方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 />
			<cpn2 />
		</div>



		<template id="cpn2">
			<div>
				<h1>cnxonojn</h1>
				<p>阿萨的那份静安寺都你打算看来反馈能发生脑袋放空蓝色的</p>
				<span>爱迪生发明卡萨丁女v哦你收到</span>
			</div>
		</template>
		
		
		<script type="text/javascript">
			// vue2.0语法糖注册全局组件
			Vue.component('cpn1', {
				template: `
				<div>
					<h1>啊哈哈哈哈2</h1>
					<p>阿萨的那份静安寺都能发生脑袋放空蓝色的2</p>
					<span>骄傲的时刻能否卢卡斯的女了2</span>
				</div>
			`
			});

			//模板抽离写法(实际项目建议以此为准)
			Vue.component('cpn', {
				template: '#cpn2'
			});

			var app = new Vue({
				el: '#app',
				data: {},
				methods: {},
				mounted() {}
			})
		</script>
	</body>
</html>

3.监听键盘回车事件

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">
avatar
文章
阅读
粉丝