Vue基础知识

最新推荐文章于 2022-07-16 19:58:51 发布

风云诀4

最新推荐文章于 2022-07-16 19:58:51 发布

阅读量159

点赞数 1

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

本文链接：https://blog.csdn.net/qq_42582489/article/details/112966139

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue基础知识

文章目录

Vue基础知识

基础概念

在 HTML 中导入学习环境的在线 Vue 支持

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在 Vue.js 2.x版本中

el 为挂载点，指定修饰对象，#对应的是id选择器，注意不能挂载到body标签
data 是数据，仅在挂载点内部有效，可以写复杂类型，遵守js规则，替换差值表达式{{}}中的变量
methods 与 data 同级，一般用来表示函数

v-text会解析文本，渲染标签，替换标签内的所有值

差值表达式{{ }}支持字符串拼接

v-html可以解析 html 元素，如果无html元素则与v-text效果一致

<!DOCTYPE html>
<html>
<head>
	<title>Vue基础</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{ message }}
		<h2>{{ school.name }} {{ school.mobile }}</h2>
		<!-- 数组下标从0开始 -->
		<h3>{{ campus[0] }}</h3>

		<h2 v-text="message+'!'">深圳</h2>
		<h2 v-text="info"></h2>
		<!-- 差值表达式{{}}支持字符串拼接 -->
		<h2>深圳{{ message + "!"}}</h2>
		
		<p v-html="content1"></p>
		<p v-html="content2"></p>
	</div>
	<script>
		var app = new Vue({
			el:'#app',	//el挂载点，指定修饰对象，#对应的是id选择器，注意不能挂载到body标签
			data:{		//数据，仅在挂载点内部有效，可以写复杂类型，遵守js规则
				message:'Hello,Vue!',	//替换差值表达式{{}}中的变量
				school:{
					name:'哈哈哈',
					mobile:100000
				},
				campus:['beijing','shanghai','guangzhou','shenzhen'],
				info:'front',
				content1:'baidu',
				content2:"<a href='http://www.baidu.com'>百度</a>"
			}
		})
	</script>
</body>
</html>

v-on为元素绑定事件，与 java 不同的是不需要写on（比如 onclick 可以直接写 click），绑定的方法定义在methods中

可以用@代替v-on，实现简写，click表示鼠标点击事件，dblclick是双击事件

通过 this 可以拿到 data 中的数据

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue基础</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- v-on为元素绑定事件,绑定的方法定义在methods中 -->
		<input type="button" value="v-on指令" v-on:click="doIT">
		<input type="button" value="v-on简写" @click="doIT">
		<input type="button" value="双击事件" @dblclick="doIT">
		<!-- 用@代替v-on，实现简写，click表示鼠标点击事件，dblclick是双击事件 -->
		<h2 @click="changeFood">{{ food }}</h2>
	</div>
	<script>
		var app = new Vue({
			//vue中不再考虑更改DOM元素，重点放在更改数据就可以了
			el:'#app',
			data:{
				food:'西兰花炒蛋'
			},
			methods:{
				doIT:function () {
					alert("做饭");
				},
				changeFood:function(){	//可以通过this拿到数据
					this.food+='好吃！';
				}
			}
		})
	</script>
</body>
</html>

v-show根据表达式的真假，切换元素的隐藏和显示，原理是修改元素的 display 来实现，可以在调试器中看到 style=“display:none”；

v-if 也是根据表达式真假，切换元素的隐藏和显示，具体是操纵DOM元素，将元素加入/移出 DOM 树

v-show 和 v-if 中都可以进行表达式的判断

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="切换" @click="changeIsShow">
		<p v-if="isShow">加入和移出DOM</p>
		<p v-show="isShow">显示和隐藏</p>
		<p v-if="age>=18">条件判断</p>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				isShow:true,
				age:19
			},
			methods:{
				changeIsShow:function(){
					this.isShow = !this.isShow;
				}
			}
		})
	</script>
</body>
</html>

v-bind 设置元素的属性，比如 src，title，class。**语法：v-bind:属性名=表达式 **

v-bind 也可以缩写，只使用冒号 : 来代替，例如 v-bind:src="···" 与 :src="···" 效果相同

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		.active{
			border: 5px solid red;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 全写与简写 -->
		<!-- 鼠标停留在第二张图片上可以看到title，点击最后一张图片可以看到样式变化 -->
		<img v-bind:src="imgSrc" alt="">
		<img :src="imgSrc" alt="" :title="imgTitle+'!!!'">
		<img :src="imgSrc" alt="" :class="{active:isActive}" @click="Active">
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				imgSrc:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/\
						u=2783013482,133979246&fm=26&gp=0.jpg',
				imgTitle:'Test',
				isActive:false
			},
			methods:{
				Active:function(){
					this.isActive = !this.isActive;
				}
			}
		})
	</script>
</body>
</html>

v-for 根据数据生成列表结构，经常与数组结合使用，数组长度的更新会同步到页面上，是响应式的。

v-for="(item,index) in arr"，item表示数组的元素，其名字可以更改，只有与之后的使用名称相对应即可，index是索引，从0开始，与item同理使用。in是关键字不能变，arr是数组名

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="添加数据" @click="add">
		<input type="button" value="移除数据" @click="remove">

		<!-- 获取普通数组 -->
		<ul>
			<li v-for="(item,index) in arr">
				{{index+1}}address：{{item}}
			</li>
		</ul>
		<!-- 获取对象数组 -->
		<h2 v-for="item in vegetable" :title="item.name">
			{{item.name}}
		</h2>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				arr:["beijing","shanghai","guangzhou","shenzhen"],
				vegetable:[
					{name:"xilanhua"},
					{name:"xilan"}
				]
			},
			methods:{
				add:function(){
					this.vegetable.push({name:"huacai"});
				},
				remove:function(){
					this.vegetable.shift();	//每次移除最左边的元素
				}
			}
		})
	</script>
</body>
</html>

v-on 也可以传递函数自定义参数，事件修饰符。官方文档：https://cn.vuejs.org/v2/api/#v-on

事件的后面跟上.修饰符 可以对事件进行限制，.enter 可以限制触发的按键为回车

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" @keyup.enter="sayHi">
		<!-- 回车作为事件修饰符，只有当按下回车被释放的时候才会触发 -->
		<input type="button" value="点击" @click="doIt('老铁',666)">
		{{p1+p2}}

	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				p1:"",
				p2:""
			},
			methods:{
				doIt:function(p1,p2){	//用形参接受传递的参数
					this.p1 = p1;
					this.p2 = p2;
				},
				sayHi:function(){
					alert("吃了吗");
				}
			}
		})
	</script>
</body>
</html>

v-model 用于获取和设置标签元素的值，是双向的数据绑定，无论修改谁，另外一个都会同步更新

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="改变message" @click="setM">
		<input type="text" v-model="message" @keyup.enter="getM">
		<!-- message的值会同步更新 -->
		<h2>{{message}}</h2>

	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				message:"xiao"
			},
			methods:{
				getM:function(){
					alert(this.message);
				},
				setM:function(){
					this.message="库顶";
				}
			}
		})
	</script>
</body>
</html>

本地应用

简单计数器

<!-- 简单计数器 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 实现一个简单的计数器，从0到10 -->
	<div id="app">
        <h2>简单计数器</h2>
		<button @click="sub">-</button>
		<span>{{ num }}</span>
		<button @click="add">+</button>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				num:1
			},
			methods:{
				sub:function(){
					if(this.num>0){
						this.num--;
					}else{
						alert("已经最小了");
					}
				},
				add:function(){
					if(this.num<10){
						this.num++;
					}else{
						alert("已经最大了");
					}
				}
			}
		})
	</script>
</body>
</html>

简单记事本

<!-- 简单记事本 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		.btn{
			width: 30px;
			height: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1>简单记事本</h1>
		<!-- .enter事件修饰符，按下回车添加数据。autofocus 属性规定当页面加载时 input 元素应该自动获得焦点 -->
		<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" placeholder="请输出任务">
		<!-- 列表区域 -->
		<section>
			<ul>
				<li v-for="(item,index) in list">
					<!-- 序号、内容、删除按钮 -->
					<span>{{ index+1 }}</span>
					<label>{{ item }}</label>
					<button class="btn" @click="remove(index)">删</button>
				</li>
			</ul>
		</section>
		<!-- 统计区域，无数据时进行隐藏 -->
		<footer v-show="list.length!=0">
			<span><strong>{{list.length}}</strong>  item </span>
			<button class="btn" @click="clear">清</button>
		</footer>
	</div>

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				list:["写代码","吃饭","睡觉"],
				inputValue:""
			},
			methods:{
				add:function(){	//添加功能
					this.list.push(this.inputValue);
				},
				remove:function(index){
					this.list.splice(index,1);	//删除以该序号开始的元素，一共删除一个
				},
				clear:function(){	//清空数组
					this.list=[]
				}
			}
		})
	</script>
</body>
</html>

网络应用

使用官方推荐的网络请求库 axios，导入地址是 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

常用请求：

axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,参数对象).then(function(response){},function(err){})

axios中的 this 与 Vue中的 this 不是同一个this，axios中的this获取不到 Vue中 data的数据，一个较好的方法是把 Vue中的 this定义为 that，再传递给 axios使用。

如果服务器返回的数据比较复杂，获取的时候要注意层级结构

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>axios基本使用</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
	<div id="app">
		<input type="button" value="get获取笑话" @click="getJoke">
		<p>{{joke}}</p>
        <br/>
        <input type="text" v-model="user" placeholder="输入用户名">
        <input type="button" value="post创建用户" @click="PostUser">
		<p>{{info}}</p>
	</div>

	<script>
		/*
			接口：随机笑话
			地址：https://autumnfish.cn/api/joke/list
			方式：get
			参数：num=n(笑话条数)
			响应内容：随机笑话

			接口2：用户注册
			地址：https://autumnfish.cn/api/user/reg
			方式：post
			参数：username:xxxx(用户名)
			响应内容：注册成功或失败
		*/
		var app = new Vue({
			el:'#app',
			data:{
				joke:"很好笑的笑话",
				info:"CreateUser",
				user:""
			},
			methods:{

				getJoke:function(){
					var that = this;	
					//axios内部的this与Vue中的this不一样，必须定义that才能取到数据
					axios.get("https://autumnfish.cn/api/joke/list?num=1").then
					(function(response){
						that.joke=response.data.jokes[0];
					},function(err){
						console.log(err);
					})
				},
				PostUser:function(){
					var that = this;
					axios.post("https://autumnfish.cn/api/user/reg",{username:that.user})
					.then(function(response){
						that.info = response.data;
					},function(err){
						console.log(err);
					})
				}
			}
		})
	</script>
</body>
</html>

风云诀4

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识

Vue基础知识文章目录Vue基础知识基础概念本地应用网络应用基础概念在 HTML 中导入学习环境的在线 Vue 支持<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>在 Vue.js 2.x版本中el 为挂载点，指定修饰对象，#对应的是id选择器，注意不能挂载到body标签data 是数据，仅在挂载点内部有效，可以写复杂类型，遵守js规则，替换差值表达式{{}}中的变量metho
复制链接

扫一扫

专栏目录