Vue(一)的入门基础操作

最新推荐文章于 2023-05-17 19:46:30 发布

Be Your Superhero

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量140

点赞数

分类专栏： Vue 文章标签： vue js html javascript

本文链接：https://blog.csdn.net/qq_43222167/article/details/106267024

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基础入门

Vue官网:https://cn.vuejs.org/v2/guide/

创建一个Vue很简单,进入我们的HBuilder,下载路径:https://www.dcloud.io/hbuilderx.html,下载标准版即可

下载解压后点击
在这里插入图片描述
启动后我们点击右上角的文件新建一个项目

在这里插入图片描述

好了之后点开index.html页面,一个最基础的Vue页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入vue-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d1">
			{{str}}
		</div>
		<script>
			var app=new Vue({
				el: '#d1', //绑定元素
				data: {		//数据
					str:"Hello Vue!"
				}
			})
		</script>
	</body>
</html>

也可以去https://cn.vuejs.org/v2/guide/复制粘贴
在这里插入图片描述
写好记得保存好之后点击运行

结果

写击运行的时候如果出现
在这里插入图片描述
解决办法:运行–>运行到浏览器–>配置到web服务器,设置好浏览器的路径就行了

响应式

Vue里面有个挺好玩的东西,把我们的index.html页面运行到浏览器后,按一下F12,然后我们可以在控制台设置刚刚我们app.str的值,例如:

在这里插入图片描述
其实这是Vue的响应式,那响应式是什么意思呢,比如下面,我们上面已经在浏览的控制台中改变了str的值,我们现在继续在HBuilder中的index.html中改变str的值,保留浏览器不退出

<div id="d1">
		{{str}}
	</div>
	<script>
		var app=new Vue({
			el: '#d1', //绑定元素
			data: {		//数据
				str:"Hello dear  Vue!"
			}
		})
	</script>

保存后可以看到浏览器中立刻发生了改变

在这里插入图片描述

条件判断

		<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入vue-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="d2">
			<!--条件判断-->
			<h1 v-if="isShow">
				条件
			</h1>
		</div>
		
		<script>
			var app2=new Vue({
				el:'#d2',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>

当isShow为true时可以看到是出现了h1标签中的值
在这里插入图片描述
我们在浏览器的控制台中将isShow的值改为false

浏览器中没有值了

循环

		<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入vue-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--循环
			p就是从多个中一个一个取出来
			list就是集合
		-->
		<div id="app3">
				<!--直接对象-->
			<p v-for="p in list">
				{{p}}
			</p>
			<!--带属性-->
			<p v-for="p2 in list2">
				{{p2.text}}
			</p>
		</div>
	
		<script>
			var app3=new Vue({
				el:"#app3",
				data:{
					list:[
						{p:"一"},
						{p:"二"},
						{p:"三"}
					],
					list2:[
						{text:"一 一"},
						{text:"二 二"},
						{text:"三 三"}
					]
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--引入vue-->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
	<!--事件绑定-->
	<div id="app">
		<button v-on:click="f1">点击</button>
	</div>
	</body>
	
	<script>
		var app=new Vue({
			el:'#app',
			methods:{
				f1:function(){
					alert("哈哈");
				}
			}
		})
	</script>
</html>

另一种写法:

<button @click="f1">点击</button>

双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--引入vue-->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<input v-model="message" />
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				message:"Vue!"
			}
		})
	</script>
</html>

运行后可以看到
在这里插入图片描述
先使用的data中的message设置的值,然后我们在浏览器的输入框中随意输入值

可以看到上面的值跟着输入框的值而发生改变

组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" charset="UTF-8" src="js/vue.js"></script>
	<body>
		
		<div id="app">
			{{message}}
			<!--组件-->
			<c1></c1>
		</div>
		
	</body>
	
	<script>
		Vue.component('c1',{
			//组件中的html代码
			template: '<h1>组件</h1>'
		})
		
		var app=new Vue({
			el:"#app",
			data:{
				message:"aa"
			}
		})
	</script>
</html>

在这里插入图片描述
这里有一个坑,如果不将Vue初始化

它不会报错且组件也不会显示出来

或者你把组件拿到初始化的Vue外面也不会显示
在这里插入图片描述

上面组件的传参有点太死板,所以下面就有灵活的传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" charset="UTF-8" src="js/vue.js"></script>
	<body>
		
		
		<div id="app">
			<input v-model="m" />
			{{message}}
			<!--组件-->
			<c1 v-bind:c_value="message"></c1>
			<c1 v-bind:c_value="m"></c1>
		</div>
		
		
	</body>
	
	<script>
		Vue.component('c1',{
			//组件中的html代码
			//组件中传参
			props:['c_value'],
			template: '<h1>组件,传入的参数是:{{c_value}}</h1>'
		})
		
		 var app=new Vue({
			el:"#app",
			data:{
				message:"aa",
				m:"m"
			}
		}) 
	</script>
</html>

在这里插入图片描述
这里需要注意的是,如果在初始化Vue的时候没有初始化输入框的话,到浏览器中输入也没有反应

var app=new Vue({
			el:"#app",
			data:{
				message:"aa"//,
				//m:"m"
			}
		})

在这里插入图片描述

生命周期

图解地址:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

绑定标签中属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.h1{
			color: red;
		}
		.h2{
			color: blue;
		}
	</style>
	<body>
		<div id="app">
			<h1 v-bind:class="className">绑定标签中属性</h1>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				className:"h1"
			}
		})
	</script>
</html>

运行后是这个样子的
在这里插入图片描述
然后摁一下f12在控制台中输入

app.className="h2"

在这里插入图片描述
className的值已经换成h2,相应的样式也换成了h2的样式

另一种写法:

<h1 :class="className">绑定标签中属性</h1>

Be Your Superhero

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue(一)的入门基础操作

基础入门Vue官网:https://cn.vuejs.org/v2/guide/创建一个Vue很简单,进入我们的HBuilder,下载路径:https://www.dcloud.io/hbuilderx.html,下载标准版即可下载解压后点击启动后我们点击右上角的文件新建一个项目好了之后点开index.html页面,一个最基础的Vue页面<!DOCTYPE html><html> <head> <meta charset="utf-8" /&
复制链接

扫一扫

专栏目录