vue基础

第一个vue程序

导入开发版本的vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
创建vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

el挂载点

vue的作用范围是什么？vue会管理el选项命中元素及其内部的后代元素
是否可以使用其他的选择器？可以使用，但是建议使用ID选择器
是否可以设置其他的dom元素？可以使用其他的双标签，不能使用HTML和body
el的作用是什么？用来设置vue实例挂载（管理）的元素

data：数据对象

vue用到的数据定义在data中
data中可以写复杂类型（如：对象，元组）的数据
渲染复杂类型数据时，遵守JS的语法即可（如：对象点语法，数组索引语法）

vue本地应用

v-text指令

vue指令指以v-开头特殊的语法
v-text指令的作用是：设置标签的内容（textCotent）
默认写法会替换全部内容，使用差值表达式{ { } }可以替换指定内容
内部支持写表达式

代码示例

<div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2 v-text="info"></h2>
	<h2>{{message+'!'}}</h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑马程序员",
			info:"前端"
		},
	})
</script>

v-html指令

v-html指令的作用是：设置元素的innerHTML
内容中有HTML结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本

代码示例

<div id="app">
	<h2 v-text="content"></h2>
	<h2 v-html="content"></h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			content:"<a href='http://www.itheima.com'>黑马程序员</a>"
		},
	})
</script>

v-on指令

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中

代码示例

<div id="app">
	<input type="button" value="v-on指令" v-on:click="doIt">
	<input type="button" value="v-on简写" @click="doIt">
	<h2 @click="changeFood">{{food}}</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			food:"西蓝花"
		},
		methods:{
			doIt:function(){
				alert('doit');
			},
			changeFood:function(){
				console.log(this.food);
				this.food+="好好吃"
			}
		},
	})
</script>

计数器

思路

data中定义数据：比如num
methods中添加两个方法：比如add，sub
使用v-text将num设置给span标签
使用v-on将add，sub分别绑定给+，-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示
代码示例

<div id="app">
	<div class="input-num">
		<button type="button" @click="sub">-</button>
		<span>{ { num } }</span>
		<button type="button" @click="add">+</button>
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			add:function(){
				if(this.num<10){
					this.num++;
				}else{
					alert("别点了最大了")
				}
			},
			sub:function(){
				if(this.num>0){
					this.num--;
				}else{
					alert("别点了最小了")
				}
			}
		},
	})
</script>

创建vue示例时：el(挂载点),data(数据),methods(方法)
v-on指令的作用是绑定事件,简写为@
方法中通过this关键字获取data中的数据
v-text指令的作用是:设置元素的文本值,简写为{ { } }

v-show指令

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

代码示例

<div id="app">
	<input type="button" value="切换显示状态" @click="changeIsShow"/>
	<input type="button" value="累加年龄" @click="addAge"/>
	<img src="img/logo.png" v-show="isShow">
	<img src="img/logo.png" v-show="age>=18">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			age:17
		},
		methods:{
			changeIsShow:function(){
				this.isShow = !this.isShow
			},
			addAge:function(){
				this.age++;
			}
		},
	})
</script>

v-if指令

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换用v-show,反之使用v-if,前者的切换消耗小

代码示例

<div id="app">
	<input type="button" value="切换显示" @click="toggleIsShow"/>
	<p v-if="isShow">黑马程序员</p>
	<p v-show="isShow">黑马程序员show</p>
	<h2 v-if="temperature>=35">热死了</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			temperature:40
		},
		methods:{
			toggleIsShow:function(){
				this.isShow = !this.isShow;
			}
		},
	})
</script>

v-bind指令

v-bind指令的作用是:为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
需要动态的增删class建议使用对象的方式

代码示例

<style type="text/css">
	.active{
		border: 1px solid red;
	}
</style>
<div id="app">
	<img v-bind:src="imgSrc">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			imgSrc:"http://www.itheima.com/images/logo.png",
			imgTitle:"黑马程序员",
			isActive:false
		},
		methods:{
			toggleActive:function(){
				this.isActive=!this.isActive;
			}
		},
	})
</script>

图片切换

定义图片数组
添加图片索引
v-bind绑定src属性
v-on图片切换逻辑
v-show显示状态切换

v-for指令

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

代码示例

<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 } }黑马:{ { item } }</li>
	</ul>
	<h2 v-for="item in vegetabes" v-bind:title="item.name">
		{ { item.name } }
	</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			arr:['北京','上海','广州','深圳'],
			vegetabes:[
				{name:"西蓝花"},
				{name:"炒蛋"}
			]
		},
		methods:{
			add:function(){
				this.vegetabes.push({name:"花菜"});
			},
			remove:function(){
				this.vegetabes.shift();
			}
		},
	})
</script>

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

代码示例

<div id="app">
	<input type="button" value="点击" @click="doIt(666,'老铁')"/>
	<input type="text" @keyup.enter="sayHi"/>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		methods:{
			doIt:function(p1,p2){
				console.log("doit");
				console.log(p1);
				console.log(p2);
			},
			sayHi:function(){
				alert("吃了吗");
			}
		},
	})
</script>

v-model指令

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据–表单元素的值

代码示例

<div id="app">
	<input type="button" value="修改message" @click="setM" />
	<input type="text" v-model="message" @keyup.enter="getM"/>
	<h2>{ { message } }</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑马"
		},
		methods:{
			getM:function(){
				alert(this.message);
			},
			setM:function(){
				this.message="酷丁鱼"
			}
		},
	})
</script>

axios使用

使用条件

导入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>,就可以发送请求了

两种请求方式

get方法
- 语法格式:axios.get("地址?key=value&key2=value2").then(function(response){},function(err){})
- then后是两个回调函数,第一个在向服务器请求完成后触发,第二个回调函数在请求失败的时候触发,他们的形参可以获取服务器的响应内容或错误信息
- 查询字符串的格式是key=value&key2=value2,key是接口文档提供的,value是要具体传输的数据
post方法
- 语法格式:axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
- 不同之处:数据以对象的形式写在post的第二个参数,格式{key:value,key2:value2}

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<input type="button" value="get请求" class="get">
		<input type="button" value="post请求" class="post">
		
		<script type="text/javascript">
			document.querySelector(".get").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3")
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
			document.querySelector(".post").onclick = function(){
				axios.post("https://autumnfish.cn/api/user/reg111",{username:"曹哈哈"})
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
		</script>
	</body>
</html>

网络应用的核心

data数据的一部分内容是通过网络上获取到的

在方法中发送网络请求,在响应回来之后把服务器返回的数据设置给data中对应的值

var app = new Vue({
	el:"#app",
	data:{
		joke:"笑话"
	},
	methods:{
		getJokes:function(){
			//this.joke
			axios.get("地址").then(function(response){
				//this.joke?
			},function(err){});
		}
	}
})

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getJoke" />
			<p>{{ joke }}</p>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					joke:"很好笑的笑话"
				},
				methods:{
					getJoke:function(){
						// console.log(this.joke);
						var that = this;
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							// console.log(response)
							// console.log(response.data)
							// console.log(this.joke);
							that.joke = response.data;
						},function(err){})
					}
				},
			})
		</script>
	</body>
</html>

种树y

发布了13 篇原创文章 · 获赞 3 · 访问量 266

私信关注

Vue基础知识大全+小案例

vue基础

第一个vue程序

el挂载点

data：数据对象

vue本地应用

v-text指令

v-html指令

v-on指令

计数器

v-show指令

v-if指令

v-bind指令

图片切换

v-for指令

v-on补充

v-model指令

axios使用

使用条件

两种请求方式

网络应用的核心

猜你喜欢