全网Vue.js最快入门(指令，属性，组件，插槽)

最新推荐文章于 2023-07-28 11:05:13 发布

外包猿

最新推荐文章于 2023-07-28 11:05:13 发布

阅读量261

点赞数

分类专栏：前端技术文章标签： vue

本文链接：https://blog.csdn.net/weixin_43540973/article/details/107826195

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

全网Vue.js最快入门(指令，属性，组件，插槽)

一、 Vue.js 教程

Angular

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

二、MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

MVVM优点: 低耦合可重用性

下面是我对Vue.js基础知识做的思维导图(供大家参考)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aowfVzlj-1596635676991)(C:\Users\刘江\Documents\Vue.png)]

下面将先详细介绍每一个技术的用法：

三、常用指令

1、{{}} ：mistache语法（胡子/胡须）进行数据绑定

2、v-for:基于一个数组渲染整个列表，循环数据

[v-for=“item in 数组名”]

3、v-if：根据表达式的值，在dom生成或者移除一个元素

false：移除， true：生成

[v-if=“表达式/boolean”]

表达式返回boolean

拓展：

v-else：当v-if中的表达式放回false时执行该标签中的数据

v-else-if:用作v-if的else-if块。可以链式的多次使用

这个地方给一个案例你们就理解了（给一个小提示：在运行Vue.js代码时，记得下载Vue.js架包并导入到项目中）：

<!DOCTYPE html>
<html>
	<head>
		<!--使用v-else-if指令实现,  
     如成绩大于80显示：优秀
     如成绩大于70小于80显示：良好
     如成绩大于60小于70显示：加油
     否则显示成绩录入错误,明年再考-->
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="score>80">优秀</h1>
			
			<h1 v-else-if="score>70&&score<80">良好</h1>
			
			<h1 v-else-if="score>60&&score<70">加油</h1>
			
			<h1 v-else-if="score<60">不及格明年再考</h1>
			
		</div>
	</body>
	<script>
		const app = new Vue({
			el:'#app',
			 data:{
			 	score:76
			 }
		})
		
	</script>
	
	
</html>

4、

v-show：根据表达式的值来显示或者隐藏HTML元素

false：隐藏 true：显示

[v-show=“true/false”]

注： 1.通过内联样式style="display:none"实现

2.v-show不支持语法。

需要频繁的切换：v-show

运行时条件不大可能改变：v-if

5、v-model：用于在双向绑定表单中控件元素

[v-model=“data.属性名”]

6、v-bind：样式绑定，用来绑定class，style，图片，url地址

7、v-on：用来绑定事件

v-on:click=“btnclick” 绑定btnclick事件

语法糖简写：

    直接替代：
     v-bind ---> :      
     v-on   ---> @

四、常用属性

**1、el:**用于挂载需要管理的元素，获取Vue实例关联的dom元素

**2、data属性：**Vue实例数据对象

**3、methods：**放置页面中的业务逻辑

**4、computed：**计算属性

为何不需要添加“（）”调用

本身就是一个属性，本质computed提供了两个发方（set和get）因为set的不常用性，和get的常用性

使用get/set发方进行了简化（get/set被省略）

computed属性技巧：

·属性可以依赖其他计算属性

·计算属性不仅仅可以依赖当前Vue实例，还可以依赖其他实例的数据

计算属性缓存：

当一个计算属性所依赖的数据发生变化时，它才会重新取值。

computed与methods的区别：

1.计算属性具有缓存，计算属性会把函数执行一次，并别讲结果进行存储，依赖的数字发生了改变才会改变

2.methods：每一次编译都会执行

**5、watch：**监听data中的数据变化

**6、template属性：**用来设置模板，会替换页面元素，包括占位符

**7、render属性：**创建真正的Virtual Dom

8、components：注册需要用到的组件

使用key：value的形式进行使用，key表示：组件名，value表示：组件对象

学习到这里可以做一个小demo（购物车）了先说一下demo要求：

购物车：
1、展示所有图书信息
2、价格：保留两位小数、前面需要：￥前缀
3、数量的改变，如未1，不能进行减少操作
4、如移除了所有的图书信息，则显示购物车为空
5、在原有的基础上，添加图片的展示
6、鼠标悬浮在图片上，图片放大显示

我给大家演示一下demo（购物车）效果把：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-myECfZF4-1596635676993)(file:///C:\Users\刘江\AppData\Roaming\Tencent\Users\2569736267\QQ\WinTemp\RichOle\5N]@DHWP}6_A}LLSMG7DO`U.png)]

在这里放一下代码，代码中的注释比较多，相信大家都能看懂，不懂的可以留言：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<link rel="stylesheet" href="shopping.css" />
	<body>
		<div id="app">
			<template v-if="goodsList.length!=0">
				<table>	
					<caption>购物车<caption>
					<!--定义表头-->
					<tr>
						<td>图片</td>
						<td>商品名</td>
						<td>价格</td>
						<td>时间</td>
						<td>数量</td>
						<td>操作</td>
					</tr>
					<!--循环书的数组，显示数据，并记录每一条数据的下标-->
					<template v-for="(item,index) in goodsList">
					
							<tr>
								<td><img :src="item.img" width="50px" height="50px"/></td>
								<td>{{item.name}}</td>
								<td>${{toDecimal2(item.price)}}</td>
								<td>{{item.data}}</td>
								<td>{{item.num}}</td>
								<td>
									<button type="button" @click="add(index,1)">+</button>
									<button type="button" @click="add(index,-1)">-</button>
									<button type="button" @click="remove(index)">移除</button>
								</td>
							</tr>
					
					</template>
				</table>
			</template>
			<!--当购物车为空时，显示购物车为空-->
			<template v-else>
				购物车为空
			</template>
			<!--显示购物车中商品总价格-->
			<div>
				<h1 style="color: red;">总价格${{allPrice}}</h1>
			</div>
		</div>
	</body>
	<script>let app = new Vue({
	el: '#app',
	//静态的书数据
	data: {
		goodsList: [{
				img: '../img/飞猪1.jpg',
				name: 'Vue.js实战',
				data: '2015-11-19',
				num: 1,
				price: 35
			},
			{
				img: '../img/飞猪2.gif',
				name: 'Vue.js实战',
				data: '2014-03-21',
				num: 1,
				price: 45
			},
			{
				img: '../img/飞猪3.png',
				name: 'Vue.js实战',
				data: '2012-05-03',
				num: 1,
				price: 85
			},
			{
				img: '../img/飞猪3.png',
				name: 'Vue.js实战',
				data: '2016-01-01',
				num: 1,
				price: 73
			},
			{
				img: '../img/飞猪2.gif',
				name: 'Vue.js实战',
				data: '2017-08-15',
				num: 1,
				price: 15
			}
		]
	},
	methods: {
		//添加，减少  书本数量方法    参数为  修改书本数量对应的下标，对应的操作
		add: function(i, n) {
			if(this.goodsList[i].num + n > 0) {
				this.goodsList[i].num += n;
			}
		},
		//删除书本   根据下标进行删除
		remove: function(i) {
			this.goodsList.splice(i, 1);
		},
		//显示价格方法
		toDecimal2: function(x) {
			//取价格后面两位数的整数
			let f = Math.round(x * 100) / 100;
			//将其赋值给字符串   s 
			let s = f.toString();
			//查找字符串中是否有‘.’号 ，
			//如果有，则rs等于字符串的长度。如果没有则rs为-1
			let rs = s.indexOf('.');
			//如果没有‘.’号则rs为-1，则将s字符串的长度赋值给rs，并在最后加上‘.’号
			if(rs < 0) {
				rs = s.length;
				s += '.';
			}
			//循环将字符串的后面加上两个小数
			while(s.length <= rs + 2) {
				s += '0';
			}
			return s;
		}
	},

	computed: {
		//属性方法  ，得到购物车中数量的总价格
		allPrice: function() {
			let result = 0;
			for(let i = 0; i < this.goodsList.length; i++) {
				result += this.goodsList[i].price * this.goodsList[i].num;
			}
			return result;
		}
	}
})</script>
</html>

五、组件化

如果有一个页面的业务逻辑过于复杂，不方便后期的维护，管理，拓展

解决方法：

将每一个页面拆分成一个个小的功能，将这些功能【集成】再一个项目中，之后整个项目的维护，管理，拓展就会容易一些

1、组件的使用：

创建组件化：

1.1、使用Vue.extend()方法创建构造器对象

1.2、使用templent属性放置组件模板代码

 //1.创建组件化的构造器对象
	    const cpn = 	Vue.extend({
	    	template:`
	    	<div>
	    	<ul>
			<li>海王</li>
			<li>阿甘正传</li>
			<li>山楂树之恋</li>
			<li>泰坦尼克号</li>
			<li>海蒂和爷爷</li>
			<li>功夫</li>
		
		       </ul>
	    	</div>
	    	`
	    });

1.3、注册组件

全局注册两个参数：组件名，组件对象

 //注册组件（全局注册）  两个参数：组件名，组件对象
		 Vue.component('my-cpn',cpn);

局部组件

在指定的Vue对象中,通过Vue对象的components属性进行注册：

参数一：组件名

参数二：组件对象

 在Vue实例化时调用该属性：
const  app = new Vue({
		 	el:'#app',
		 	components:{
		 		'my-dianying':dianying
		 	}
		 	
		 })

1.4、调用组件

     直接在div中插入自定义的标签
   <div id="app">
			<my-cpn></my-cpn>
		</div>

上面定义组件运行效果图为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJ9oG52O-1596635676996)(file:///C:\Users\刘江\AppData\Roaming\Tencent\Users\2569736267\QQ\WinTemp\RichOle\KCV~AM7OF{GZLSX89%KMVL3.png)]

2、组件抽离

组件的抽离其实就是为了方便书写代码，将组件中的标签定义到body标签中去

我这里讲一种最简单的方式（添加template标签），还要一种在

1、添加template标签

2、为此template标签编写id

3、在component方法中通过 template属性绑定script标签的id

例子（就上面那一个案例讲）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<my-cpn></my-cpn>

		</div>
		<template id="cpn">
			<div>
				<ul>
					<li>海王</li>
					<li>阿甘正传</li>
					<li>山楂树之恋</li>
					<li>泰坦尼克号</li>
					<li>海蒂和爷爷</li>
					<li>功夫</li>

				</ul>
			</div>
		</template>
	</body>
	<script>
		Vue.component('my-cpn', {
			template: '#cpn'
		})
		const app = new Vue({
			el: '#app'
		})
	</script>

</html>

3、父子组件通信（数据通信）

1、父传子：在component对象中添加props属性，属性所对应的值为字符数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../../js/vue.js" ></script>
	<script type="text/javascript" src="../../js/vue.min.js" ></script>
	
	<body>
		 <div id="app">
		 	<my-cpn :cmessage="message"
		 		    :cmovies="movies"></my-cpn>
		 </div>
		 
		 <template id="cpn">
		 	<div>
		 		{{cmessage}}
		 		<ul>
		 			<li v-for="m in cmovies">{{m}}</li>
		 		</ul>
		 	</div>
		 </template>
	</body>
	<script>
		// 通过全局注册的语法糖，进行注册
		Vue.component('my-cpn',{
			template:'#cpn',
			props:['cmessage','cmovies']
		})
		
		const app = new Vue({
			el:'#app',
			data:{
				message:'hello',
				movies:['海贼王','海王','阿甘正传','大话西游']
			}
		})
	</script>
</html>

2、子传父：在方法中进行发送事件:this.$emit()

参数一：事件名称
参数二：需传递的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../../js/vue.js" ></script>
	<script type="text/javascript" src="../../js/vue.min.js" ></script>
	<body>
		<div id="app">
			<my-cpn @itemclick="cpnitemclick"></my-cpn>
		</div>
		
		<template id="cpn">
			<div>
				<button v-for="item in types" @click="btnClick(item.id)">
					{{item.name}}
				</button>
			</div>
		</template>
	</body>
	
	<script>
		Vue.component('my-cpn',{
			template:'#cpn',
			data(){
				return{
					types:[
					  {id:1,name:'热门'},
					  {id:2,name:'水果'},
					  {id:3,name:'蔬菜'},
					]
				}
			},
			methods:{
				btnClick(item){
					console.log(item);
					this.$emit('itemclick',item)
				}
			}
		})
		
		
		const app = new Vue({
			el:'#app',
			methods:{
				cpnitemclick(item){
					 console.log('子组件发来信息--->'+item)
				}
			}
		})
	</script>
	
</html>

4、父子访问（访问方法）

父访问子( $c h i l d r e n,$ refs)
子访问父( $p a r e n t,$ root)

六、插槽（slot）

目的： 插槽的目的是让我们原有的设备具有更多的扩展性

组件的插槽也是为了我们封装的组件更加具有扩展性，让使用者可以决定组件的一些内容展示什么

插槽定义的位置就是标签的位置

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/vue.js" ></script>
		<script type="text/javascript" src="../../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<myc-chacao>
			<button>我是插槽中的button</button>	
			</myc-chacao>
		</div>
		<template id="chacao">
			<div>
			<h1>我是h1哈哈哈</h1>
				<h1>我是h1呵呵呵</h1>
				<slot></slot>
				</div>
		</template>
	</body>
	<script>
		Vue.component('myc-chacao',{
			template:'#chacao',
		})
		const app = new Vue({
			el:'#app'
		})
	</script>
	
	
</html>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lW6Qfpr6-1596635676997)(D:\怕.png)]

当在一个组件中定义了多个插槽时，需要为插槽定义自己的id标识，方便数据的插入

当Vue.js学到这里就可以入门了，希望大家可以继续学习下去

最后我为大家提供几个好东西：

WEBStorm软件按转下载：https://blog.csdn.net/panyuanyuan/article/details/102972896（**WEBStorm是前端学习vue.js很好的工具，大家下载学习）

Vue.js官网：https://vuejs.org/（这个是Vue.js官方网站，网站中有很详细的Vue.js教程，最新的前端框架技术会即使更新的）

源码网站：https://github.com（这是是现在主流技术的源码都可以在该网站上面观看，）

谢谢大家观看！！！！！

外包猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
全网Vue.js最快入门(指令，属性，组件，插槽)

全网Vue.js最快入门(指令，属性，组件，插槽)一、 Vue.js 教程Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。** 二、MVVM模式**MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI
复制链接

扫一扫