Vue学习精粹

最新推荐文章于 2022-09-24 03:58:22 发布

武汉小喽啰

最新推荐文章于 2022-09-24 03:58:22 发布

阅读量160

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/101172287

版权

vue 专栏收录该内容

46 篇文章 9 订阅

订阅专栏

1. 常用指令

1.1 v-cloak：用于解决插值表达式在网速比较慢的时候的闪烁问题

1.2 v-text：默认情况下没有插值表达式闪烁问题

1.3 v-html可以渲染html标签

1.4 v-bind绑定属性的指令，简写只需要在属性前面写 : 即可

1.5 v-on用于绑定事件的指令，简写形式，只需要在事件前面写 @ 即可

1.6 V-model可以实现表单元素和Model中数据的双向绑定

2. 事件修饰符

2.1 .stop 阻止冒泡

2.2 .prevent 阻止默认行为

2.3 .capture 添加事件侦听器时使用事件捕获模式

2.4 .self只当事件在该元素本身（比如不是子元素）触发时触发回调。只会阻止自己身上冒泡行为的触发，不会真正阻止冒泡的行为

3. 在Vue中使用样式

3.1 可以使用class绑定样式

3.2 可以使用内联样式

详见：vue.js 学习笔记1——Vue基本认识与基本指令

4. v-for循环

4.1 循环普通数组

4.2 循环普通数组，带索引

4.3 循环对象

4.4 迭代数字

4.5 v-for循环中的key属性

详见：Vue.js学习笔记2——v-for数据的迭代

5. v-if条件指令

5.1 v-if与v-show指令都可以控制元素的显示与隐藏

5.2 如果元素涉及到频繁的切换，最好不要使用 v-if，推荐使用v-show

5.3 如果元素可能永远也不会被用户看到，则推荐使用v-if

详见：Vue.js学习笔记三——Vue的条件指令

6. 过滤器filter

6.1 全局过滤器

Vue.filter('过滤器的名称'，function(data){});

6.2 私有过滤器

在与methods平级的地方定义filter

new Vue({
        	el:"#app2",
        	data:{
        		dt:new Date()
        	},
        	methods:{},
        	filters:{
        		dateFormate:function(dateStr,partten='yyyy-mm-dd'){
        			var d = new Date(dateStr);
		    		var y = d.getFullYear();
		    		var m = d.getMonth() + 1;
		    		var d1 = d.getDate();
		//  		return y + '-' + m + '-' + d1;
					if(partten.toLowerCase() == 'yyyy-mm-dd'){
						return `${y}-${m}-${d1}abc`;  // 模板字符串
					}else{
						return `${y}:${m}:${d1}abc`;  // 模板字符串
					}
		        }
		    }
        });

详见：Vue.js学习笔记5——过滤器

7. 按键修饰符

8. 自定义指令

8.1 定义全局自定义指令

8.2 定义私有的自定义指令

9. 钩子函数

详见：Vue.js学习笔记六

10. vue中的http请求

10.1 get请求、

10.2 post请求

10.3 jsonp请求

11. 配置全局root请求路径

当每个请求都要写全路径的时候，不但繁琐，而且也不利于后期维护，Vue支持配置root路径

语法格式：

11.1. 全局配置方式：

Vue.http.options.root='http://vue.studyt.io/';

注意：如果我们通过全局配置了请求的数据接口，那么，在每次单独发起http请求的时候，请求的URL路径应该是相对路径，即路径前面不能写“/”，否则不会做root拼接。

例如：this.$http.get('api/getlunbo')；

11.2. 私有的配置方式：

在VM中定义http，例如：

new Vue({
    http:{
        root:'http://vue.studyt.io/',
        headers:{
            Authorization:'Basic YXBpOnBhc3N3bJK'
        }
    }
				
});

12. 配置全局的emulateJSON选项

在发送post请求的时候，每次都需要传递参数，{emulateJSON=true}，比较繁琐，Vue支持全局的emulateJSON配置

1. 全局配置

语法格式：Vue.http.options.emulateJSON = true;

详见：vue.js学习笔记七

13. vue中的动画效果

详见：Vue.js学习笔记八与九

14. 组件

14.1 组件的定义

14.1.1 使用Vue.extend来创建全局的Vue组件

14.1.2 直接使用Vue.component创建组件

14.1.3 使用components定义私有组件

14.2 组件的切换

14.3 父子组件

14.3.1 父组件通过事件绑定机制向子组件传递方法

同传值差不多，就是在子组件标签上添加事件绑定，指向父组件函数即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
</head>
	<body>
		<div id="app">
			<com2 v-on:func="show"/>
		</div>
		<template id='templ'>
			<div>
				<input type="button" value="点击" @click="myclick"/>
				<h1>我是子组件</h1>
			</div>
		</template>
		
<script>
	
	var com2 = {
		template:'#templ',
		methods:{
			myclick(){
				this.$emit('func');
			}
		}
	};
	
	// 创建Vue实例，得到viemodel
	var vm = new Vue({
		el:'#app',  
		data:{
			msg:'你好啊世界！世界！',
		},
		methods:{
			show(){
				console.log("我是父组件的方法！")
			}
		},
		components:{
			com2
		}
	});
</script>
	</body>
</html>

14.3.2 子组件通过事件调用向父组件传值

子组件可以通过事件绑定机制向父组件传递一个函数，同时，emit函数也可以接收参数，所以，这里我们也可以通过相同的原理向父组件传值

步骤方法：

1. 在组件内部定义data域并返回对象数据

2. 在emit函数中传递该对象

3. 在父组件的methods的对应的函数中加入参数，例如：show(data)

4. 在show函数中处理数据的逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
</head>
	<body>
		<div id="app">
			<div><com2 v-on:func="show"/></div>
			
			<div>123--{{msgformson}}</div>
			
		</div>
		<template id='templ'>
			<div>
				<input type="button" value="点击" @click="myclick"/>
				<h1>我是子组件</h1>
			</div>
		</template>
		
<script>
	// 定义了一个字面量类型的模板对象
	var com2 = {
		template:'#templ',
		data(){
			return {
				sonmsg:{name:'张三',age:21}
			};
		},
		methods:{
			myclick(){
				this.$emit('func',this.sonmsg);
			}
		}
	};
	
	// 创建Vue实例，得到viemodel
	var vm = new Vue({
		el:'#app',  
		data:{
			msgformson:null,
		},
		methods:{
			show(data){
				this.msgformson = data;
				console.log("我是父组件的方法！我的数据来自于子组件，数据为：" + this.msgformson.name + "  " + this.msgformson.age)
			}
		},
		components:{
			com2
		}
	});
</script>
	</body>
</html>

首先在组件模板com2中定义data，然后在myclick中通过emit调用func，并将参数传递进去，在VM对象（父组件）的data域中定义接收子组件的数据msgformson，并赋值为null，最后在show方法中传入data，并在方法体中，将data赋值给msgformson，这样父组件就具备了子组件的值了。

详见：vue.js学习笔记十、十一、十二、十三

15. 使用ref获取DOM元素和组件引用

15.1 $refs获取标签的引用

<!-- 标签内容 -->
<div id="app">
	<input type="button" value="获取元素" @click="getElement" />
	<h3 id="mh3" ref="a">哈哈哈，今天天气太好了。。。</h3>
</div>


<!-- vm对象 -->
<script>
	// 创建Vue实例，得到viemodel
	var vm = new Vue({
		el:'#app' ,
		data:{
				
		},
		methods:{
		    getElement(){
			   //console.log(document.getElementById("mh3").innerText);
			   console.log(this.$refs.a.innerText);
		   }
	    }
    });
</script>

15.2 $refs获取组件的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 导入Vue的包 -->
    <script src="./lib/vue_2.6.1.js"></script>

    <link rel="stylesheet" href="./lib/bootstrap.css"></link>
    <style>
    </style>
</head>
	<body>
		<div id="app">
			<input type="button" value="获取元素" @click="getElement" />
			<h3 id="mh3" ref="a">哈哈哈，今天天气太好了。。。</h3>
			<login ref="login"></login>
		</div>
	</body>
	<script>
			// 定义组件模板
			var login = {
				template:'<h1>我的组件</h1>',
				data(){
					return {
						msg:'子组件的msg'
					}
				},
				methods:{
					show(){
						console.log("子组件的show方法");
					}
				}
			};
			// 创建Vue实例，得到viemodel
			var vm = new Vue({
				el:'#app' ,
				data:{
				
				},
				methods:{
					getElement(){
						//console.log(document.getElementById("mh3").innerText);
						// console.log(this.$refs.a.innerText);
						// 访问子组件的数据
						console.log(this.$refs.login.msg);
						// 访问子组件的方法
						this.$refs.login.show();
					}
				},
				components:{
					login
				}
			});
		</script>
</html>

在组件中使用ref属性的好处就是，我们可以直接在父组件中获取到子组件的数据和访问到父组件的方法。

详见：vue学习十四

16. 路由

详见：vue学习十五、十六

17. 监听器

17.1 使用keyup事件监听

17.2 使用watch属性实现监听器

17.3 computed计算属性

详见：vue学习笔记十七

18. ES6的几个比较有用的新语法

1. 循环函数

1.1. some

this.list.some((item,i) => {
    if(item.id === id){
        this.list.splice(i,1);
        return true;
    }
});

1.2. filter

return this.list.filter(item => {
    if(item.name.includes(keywords)){
        return item;
    }
});

1.3. findIndex

var index = this.list.findIndex((item) => {
    if(item.id === id){
        return true;
    }
});

还有一个循环函数forEach

this.list.forEach(item => {
    if(item.name.indexOf(keywords) != -1){
        newList.push(item);
    }
});

2. 字符串操作函数

2.1. includes

includes('要包含的字符串')

2.2 填充函数

1. 前填充

padStart(length,fillingStr);

2. 后填充

padEnd(length,fillingStr);

参数解释：
1. 第一个参数：为要表现的字符串的长度
2. 第二个参数：为需要填充的字符

'123'.padStart(5,'0');

武汉小喽啰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录