Vue初步入门-01

小成说java

已于 2024-06-08 22:00:07 修改

阅读量1.1k

点赞数 45

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-06-05 22:33:48 首次发布

本文链接：https://blog.csdn.net/m0_74353020/article/details/139479870

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！

官方文档https://cn.vuejs.org/guide/introduction.html

什么是 Vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

响应的数据绑定

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当下流行的MVVM框架有：Vue.js、AngularJS。

MVVM即模型-视图-视图模型。模型指的是后端传递的数据；视图指的是所看到的页面。视图模型是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定

Vue的基本使用

我们目前刚接触Vue,我们先从最简单的方式html来理解Vue,我们只做入门案例

首先创建一个html页面,这里使用HBuilder、idea、vscode等只要能编写html的app都可以,我们的准备工作就是引入我们的vue的资源,因为我们使用jquery的时候还需要引入一个jquery的资源,vue的话也是一样的

线上:这里注意,可能你的代码加载完毕了,你的vue还没有加载过来,所以需要网络比较好

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

线下的需要自己下载,需要的可以私信我,

……

接下来我们就开始真正的到了代码环节

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例，这里我们创建了之后,他就是一个实例对象,你可以说他是个 Vue 实例或 "ViewModel",是连接 View 与 Model的桥梁,因为Vue是我们的MVVM模式的

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串

意思就是让我们的vue的实例对象,连接到我们的div这个容器,并且是通过这个实例来展示页面的,它并不是一个单纯的html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
		</div>
		<script>
			//创建一个vue实例
			const app=Vue.createApp()
			//将vue实例挂载到id为app的容器上
			//如果不挂载,视图不会被渲染
		  app.mount("#app")
	

		</script>
	</body>
</html>

那我们的数据 Model层在哪呢,我们已经有视图层和视图模型层,MVVM 还差一个Model层,它存在与我们的实例当中,一般来说是请求后端发送到前端,我们的model层是有讲究的,data是我们的数据,是需要使用函数来完成的 data(){} 而它返回的我们可以看见是一个json对象

这里很好的解释了我们的MVVM架构,我们的vue实例对象是我们的VM,它负责当作M层与V层的桥梁,他们两个层都要经过我们的VM,Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，比如我们的{{}}语法,可以将数据直接渲染上

      <div id="app">
			{{name}}
		</div>
		<script>
			//创建一个vue实例
			const app=Vue.createApp({
          //函数
			data(){
				return {
					name:"test"
				}
			}
	 })
			//将vue实例挂载到id为app的容器上
			//如果不挂载,视图不会被渲染
		app.mount("#app")
		</script>

接下来我们来了解一下{{}}语法

{{}}语法

这里我们定义了两个数据,一个是count值是0,在我们将数据渲染的时候,我们对他进行了加+1,

第二个我们定义了一个boolean值 true,数据渲染的时候我们进行了三目运算符,意思就是,flag取反就是会显示false,如果是true,就显示第一个,否则显示第二个

     <div id="app">
			{{count+1}} {{!flag?"true":"false"}}
		</div>
		<script>
			//创建一个vue实例
			const app=Vue.createApp({
			data(){
				return {
					count:0,
                    flag:true
				}
			}
	 })
			//将vue实例挂载到id为app的容器上
			//如果不挂载,视图不会被渲染
		 app.mount("#app")

Vue的方法

我们的方法也是需要放入到我们的VM层(Vue实例对象),因为它像是中间的一个桥梁,而如果要定义方法,在这里方法算是一个属性 ,methods:{}

注意:别写在data函数里,或者少括号什么的

我们有三种方式可以定义方法,这里我们最常用的就是第一种

 methods: {
				 //函数的声明方式一
			 	add(){
			 		console.log("这是一个添加",this)
			 	},
				//函数的声明方式二
				upd:function(){
					console.log("这是一个修改",this)
				},
				//函数的声明方式三
				//在methods不推荐使用
				del:()=>{
					console.log("这是一个删除",this)
				}
			 }

第三种是不推荐的,因为当我们使用this关键字的时候,它指向的往往不是当前这个对象,也就是Vue的实例对象,我们可以调用测试一下,我们通过

	//将vue实例挂载到id为app的容器上
			//如果不挂载,视图不会被渲染
		 const vm=app.mount("#app")
		 vm.add();
		 vm.upd();
		 vm.del();

效果,我们的前两个方法中的this是响应对象,而我们第三种是window是这个页面

Vue的基础指令

v-html,v-text

v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的,它就相当于更新元素的 innerHTML。

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。它就相当于innerText

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">

			<span v-html="txt"></span><br>
			<span v-text="txt"></span>
		</div>
		<script>
			const app=Vue.createApp({
			data(){
				return {
					txt:"<a href='https://www.baidu.com'>点我</a>"
				}
			}
	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

我们可以看到,我们使用的v-html指令,可以将我们的html标签识别到,而v-text指令,只能传入文本,是不能被转成html标签

v-bind

bind就有绑定的意思,可以将一个标签给他绑定一个属性,我们直接上代码,我们给他绑定一个属性,可以动态的给他一个样式,在class加上我们的v-bind会识别出我们的myclass的值,从而给他添加样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		<style>
			.aaa{
				color:red
			}
			#bbb{
				color:green
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--绑定指令-->
			<span v-bind:class="myclass">牛二</span>
			<!--简写-->
			<span :id="myid">牛一</span>
		</div>
		<script>
			const app=Vue.createApp({
			data(){
				return {
					myclass:"aaa",
					myid:"bbb",
				}
			}

	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

v-if,v-show

首先 v-if大家应该都知道if是什么意思,没错!就是如果,我们的指令都是在html标签写的,所以我们要理解这个指令其实很简单，如果vip这个数据的值是1就显示普通会员,如果vip这个数据的值是2就显示中级会员,如果条件成立,其他的没有满足标签的会被移除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-if指令没有满足的标签会被移除,很好保护我们的数据-->
			<span v-if="vip==1">普通会员</span>
			<span v-else-if="vip==2">中级会员</span>
			<span v-else-if="vip==3">高级会员</span>
			<span v-else>穷逼</span>

		</div>
		<script>
			const app=Vue.createApp({
			data(){
				return {
					vip:3,
				}
			}

	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

我们可以看到条件不成立的span标签是直接被销毁掉的

而v-show就不一样了我们可以测试一下还是刚才的方式,我们这里的条件是不成立的,因为我们vip的值是4,如果vip的值是3的话会展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-show="vip==3">高级会员</span>
		</div>
		<script>
			const app=Vue.createApp({
			data(){
				return {
					vip:4,
				}
			}

	 })		
		 app.mount("#app")
		</script>
	</body>
</html>

我们的条件没有满足,但是还是会在控制台显示,是隐藏起来的,这就是v-if和v-show的区别

v-for

这里我们的数据返回了一个数组,数组内包含着几个json对象,另一个只返回一个json对象,第一个我们使用无序列表进行对数组循环 v-for ，括号内第一个student是我们遍历出来的每一个json对象，i是我们遍历的每一个索引，当然我们可以不要索引,直接使用 student in students就可以

而如果是要遍历三个的话,第一个就是我们的值,第二个是key，第三个是我们的下标,一般来说,只需要遍历出值就可以,不需要key和下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../static/vue.global.js"></script>
		
	</head>
	<body>
		<div id="app">

			<ul>
				<li v-for="(student,i) in students">
					 {{student.name}}===={{i}}
				</li>
			</ul>
			<ol>
				<li v-for="(val,key,index) in person">
					{{val}}====={{key}}====={{index}}
				</li>
			</ol>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						students:[
							{name:"小美",age:12,sex:"男"},
							{name:"小帅",age:12,sex:"男"},
							{name:"小明",age:12,sex:"男"},
						],
						person:{
							name:"niuer",
							age:21,
							sex:"男"
						}
					}
				},
		
			})
			app.mount("#app")
		</script>
	</body>
</html>