Vue入门1_1

Vue入门

Vue, 是Javascript的渐进式框架

vue框架的特点和优点有：

1、简单易学：vue的文档为中文文档，便于学习和理解。
2、灵活高效：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。20kB min+gzip运行大小，超快虚拟DOM。
3、双向数据绑定：通过MVVM思想实现数据的双向绑定,让数据操作更简单。
4、组件化开发：Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件中，实现了html的封装和重用。
5、Virtual DOM：Virtual DOM则是虚拟DOM的英文，dom操作非常耗费性能，而虚拟DOM操作属于预处理操作，极大解放dom操作。

由于我们这个是入门的Vue, 我们就暂时不用脚手架来做Vue开发

我们在写代码之前, 先讲解一下Vue框架的语法格式

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <!-- 推荐大家都用id id是唯一的 -->
		<div id="app">
			
		</div>
		<script src="vue.js"></script>
		<script>
			// js代码块, Vue就在这里面写
		</script>
	</body>
</html>

javascript 复制代码

// 有一个必须要写的, 就是el
// el叫做挂载点, 你要将Vue这个框架 在哪里使用
new Vue({
	el: "#app",
	data: {
                // 数据源
	}
});

Vue框架需要用到的资源文件:
vue.js
如何下载?
我们打开cmd
然后将路径切换到桌面
最后用curl -o 文件名(带后缀) url(就是网上的文件路径url)
操作截图如下:

cmd 复制代码

cd Desktop
curl -o vue.js http://121.40.144.4:880/VueResource/vue.js

还有一个是axios.js文件, 这个文件在之后我们学习axios知识的时候, 我们再去下载, 下载方法和vue.js文件时一样的。
注意: 在html里面, 必须引入vue.js文件, 不然的话就不能使用vue框架。

今天我们分5个部分来讲解Vue的使用

1.Vue渲染指令

2.列表渲染指令

3.事件绑定指令

4.双向绑定指令

5.条件渲染指令

一、Vue渲染指令

列表渲染指令, 我们需要在html里面使用{{}}, 在两个花括号中间, 写上你要渲染的对象, 你想在哪里使用就在哪里使用。

举例:

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在这个div里面 使用内容渲染指令 -->
		<!-- 写上连个{{}}在{{}}中间写上你要渲染的对象 你想在哪里使用就在哪里使用 -->
		<div id="app">
			{{name}} {{age}}
			我是{{name}}, 今年{{age}}岁了
		</div>
		<script src="vue.js"></script>
		<script>
			// 有一个必须要写的
			// el叫做挂载点, 你要将Vue这个框架 在哪里使用
			// 推荐大家都用id id是唯一的
			new Vue({
				el: "#app",
				data: {
					name: "Nathan",
					age: 20
				}
			});
		</script>
	</body>
</html>

结果:

第一行{{name}} {{age}}这个代码, 打印了Nathan和20
第二行我是{{name}}, 今年{{age}}岁了, 打印了"我是Nathan, 今年20岁了"。

因为我们在data里面, 写好了Nathan和age两个变量, 我们就可以在html里面通过{{你要渲染的对象(比如name或age)}}来渲染到页面上。

二、列表渲染指令

这里面有个关键字, v-for, 在html的标签上面使用。
这个标签是Vue带的功能, 普通网页开发不具备这种功能。
v-for里面怎么写呢? 它的语法长什么样?
接下来我们上代码:

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style></style>
	</head>
	<body>
		<div id="app">
			<!-- 通常我们一般 给他加上一个:key 能够提高渲染性能 不加不会报错 -->
			<div class="a" v-for="item in list" :key="item.id">
				{{item.name}}
				{{item.age}}
			</div>
		</div>
		<script src="vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					// 数组里面是对象
					list: [{
						id: 1,
						name: "Nathan",
						age: 20
					}, {
						id: 2,
						name: "Mickey",
						age: 19
					}, {
						id: 3,
						name: "Bredenn",
						age: 19
					}]
				}
			});
		</script>
	</body>
</html>

这串html的代码, 在做一件关于把列表里面的数据渲染到页面上面的事情。

运行结果:

我们不难看出, v-for相当于是个for循环, 语法格式为v-for="item in list"。这里面的list就是可迭代对象(列表), 比如列表,item就是每一次循环都获取list里面的值。

每一次获取到的item, 都是list里面的一个对象, 如果还在页面上把值渲染出来, 我们用了{{item.name}}和{{item.age}}的写法。

v-for里面的写法和python比较相似。

python 复制代码

for item in list:
  pass

后面的:key="item.id"的这个:key建议加上, 不加上也不会报错但是会影响开发性能。

注意:这个key一定是唯一的。

v-for还有一种写法

v-for="(item, index) in list", 后面的:key="index", 就是将索引作为:key。
注意: index需要写道item后面

三、事件绑定指令

关键字: methods, 写在data的后面, methods也是键值对。

代码:

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 事件绑定指令 -->
			<button type="button" @click="a">点击按钮 触发一个事件</button>
			<button type="button" @click="b">点击我 让我修改message的值以及出发a事件函数</button>
			<p>{{message}}</p>
		</div>
		<script src="vue.js"></script>
		<script>
			// 有一个必须要写的
			// el叫做挂载点, 你要将Vue这个框架 在哪里使用
			// 推荐大家都用id id是唯一的
			new Vue({
				el: "#app",
				data: {
					message: 'hello vue'
				},
				// 事件绑定指令 在Vue里面 也是有事件的 数据都要放到data里面
				methods: {
					// 事件源 专门用来放事件的 所有的事件都要放到methods里面
					// 第一个事件 其实就是函数
					a() {
						alert("这是事件 被触发了");
					},
					// 多个事件之间需要用, 隔开
					// 点击 改变data数据源里面的message
					b(){
						// 注意: 你想在数据源中访问 data数据源里面的数据 必须使用this来访问
						// this是js里面的指针
						console.log(this);
            // 注意:不加this会报错, 我们想要在函数里面获取data数据源的变量的话, 就必须使用this关键字, this,message
						this.message = "今天礼拜一";
						// 我想在事件b里面调用事件a
						this.a();
					}
				}
			});
		</script>
	</body>
</html>

触发按钮点击事件用的是@click="函数名"。

结果:

我们不难看到, 点击第一个按钮时, 会弹出框, 里面写了"这是事件被触发了"。
点击第二个按钮的时候, 不仅弹出了框, 而且文字信息从"hello vue"改为了"今天礼拜一"。

控制台信息:

当我们点击第二个按钮的时候, 控制台会出现这一些信息。
就是console.log(this);这一行代码的信息。
我们可以看到, 控制台打印this的信息, 里面有个message字段, 所以我们可以通过this.message来获取字段的值, 同时也可以用this.message = "新值"这样来设置值。
注意:
如果上面的代码在javascript代码块里面变量名前不加this, 比如直接是message不是this.message, 那程序会报错。

四、双向绑定指令

关键字: v-model
我们写一个案例: 通过v-model和input组件双向绑定, 来实现实时渲染输入框里面的值。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 2.双向绑定指令 一般都是用在输入框里面 -->
			<!-- 如何使用双向绑定 必须在input里面 写上一个v-model -->
			<!-- 和数据源data的数据进行绑定 -->
			{{message}}
			<input type="text" v-model="value" />
			{{value}}
		</div>
		<script src="vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					message: "hello vue",
					value: ''
				}
			});
		</script>
	</body>
</html>

结果:

我们可以看到, 我们在输入框里面输入什么内容, 在页面上面就会渲染什么内容。

五、条件渲染指令

这里有两种,v-if和v-show
在标签里面加上v-if 如果值为真就是显示如果值为假就是隐藏。
v-if还要一个兄弟叫做v-show
这两种标签, 都是在html标签上面写的
接下来我们举个案例(分别是v-if和v-show的代码案例)
代码(v-if):

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.item{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="item" v-if="flag"></div>
			<button @click="a">按钮</button>
		</div>
		<script src="vue.js"></script>
		<script>
			// 有一个必须要写的
			// el叫做挂载点, 你要将Vue这个框架 在哪里使用
			// 推荐大家都用id id是唯一的
			new Vue({
				el: "#app",
				data: {
					message: 'hello vue',
					flag: true
				},
				methods: {
					a(){
						// 将flag的值变为false
						// this.flag = false;
						// 如何点击隐藏 再点就出现
						// if(this.flag == true){
						// 	this.flag = false;
						// }else{
						// 	this.flag = true;
						// }
						// !是取反的意思 永远只有两个值 真和假 直接一行代码实现
						this.flag = !this.flag;
					}
				}
			});
		</script>
	</body>
</html>

结果:
第一次点击按钮

第二次点击按钮

第三次点击按钮

代码(v-show):

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.item{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="item" v-if="show"></div>
			<button @click="a">按钮</button>
		</div>
		<script src="vue.js"></script>
		<script>
			// 有一个必须要写的
			// el叫做挂载点, 你要将Vue这个框架 在哪里使用
			// 推荐大家都用id id是唯一的
			new Vue({
				el: "#app",
				data: {
					message: 'hello vue',
					flag: true
				},
				methods: {
					a(){
						// 将flag的值变为false
						// this.flag = false;
						// 如何点击隐藏 再点就出现
						// if(this.flag == true){
						// 	this.flag = false;
						// }else{
						// 	this.flag = true;
						// }
						// !是取反的意思 永远只有两个值 真和假 直接一行代码实现
						this.flag = !this.flag;
					}
				}
			});
		</script>
	</body>
</html>

结果:
第一次点击按钮

第二次点击按钮

第三次点击按钮

我们不难发现, 用v-if和v-show在html标签里面, 效果都是一样的。
但是他们本质上有区别:
当v-if值为false时直接删除元素
当v-show值为false时隐藏该元素并且不占位置, 但是元素没有被删除
v-show的原理通过css属性将元素隐藏, 相当于用了display: none;这种方法。
如果以后要做开发, 用v-if还是v-show, 根据自己的喜好来选择, 其实它们都差不多的。
我们来看一个综合案例:
设置一个按钮, 每次点击它的时候, 将数据源里面的value对象的值加10, 并渲染到页面上面, 当value值为30的时候, 我们就让value的值隐藏。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 设计一个按钮 -->
		<!-- 在数据源定义一个数据value, 并将value渲染到界面 -->
		<!-- 并给按钮一个事件, 每次点击按钮都让value的值+10 -->
		<!-- 当value的值等于30时, 我们就让value的值隐藏 -->
		<div id="app">
			<p v-if="flag">{{value}}</p>
			<button @click="a">按钮</button>
		</div>
		<script src="vue.js"></script>
		<script>
			// 有一个必须要写的
			// el叫做挂载点, 你要将Vue这个框架 在哪里使用
			// 推荐大家都用id id是唯一的
			new Vue({
				el: "#app",
				data: {
					value: 0,
					flag: true
				},
				methods:{
					a(){
						this.value += 10;
						if(this.value == 30){
							this.flag = false;
						}else{
							this.flag = true;
						}
					}
				}
			});
		</script>
	</body>
</html>

结果:
一开始进入的界面

当value=20时

我们再点击一次按钮, 让value=30

我们不难发现, value值被隐藏了。
这是这一串代码:

javascript 复制代码

this.value += 10;
if(this.value == 30){
	this.flag = false;
}else{
	this.flag = true;
}

再点击一次, value=40

我们可以看到value又出来了。
由于字数限制, 请看下一篇Vue

上一个

JavaScript进阶

下一个

Vue入门1_2

最近修改: 2024-09-24Powered by

所有分类