Vue基础知识大全+小案例

vue基础

第一个vue程序

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

el挂载点

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

data:数据对象

  1. vue用到的数据定义在data中
  2. data中可以写复杂类型(如:对象,元组)的数据
  3. 渲染复杂类型数据时,遵守JS的语法即可(如:对象点语法,数组索引语法)

vue本地应用

v-text指令

  1. vue指令指以v-开头特殊的语法
  2. v-text指令的作用是:设置标签的内容(textCotent)
  3. 默认写法会替换全部内容,使用差值表达式{ { } }可以替换指定内容
  4. 内部支持写表达式
  5. 代码示例
    <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指令

  1. v-html指令的作用是:设置元素的innerHTML
  2. 内容中有HTML结构会被解析为标签
  3. v-text指令无论内容是什么,只会解析为文本
  4. 代码示例
    <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指令

  1. v-on指令的作用是:为元素绑定事件
  2. 事件名不需要写on
  3. 指令可以简写为@
  4. 绑定的方法定义在methods属性中
  5. 代码示例
    <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>
    

计数器

  1. 思路

    1. data中定义数据:比如num
    2. methods中添加两个方法:比如add,sub
    3. 使用v-text将num设置给span标签
    4. 使用v-on将add,sub分别绑定给+,-按钮
    5. 累加的逻辑:小于10累加,否则提示
    6. 递减的逻辑:大于0递减,否则提示
    7. 代码示例
    <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>
    
  2. 创建vue示例时:el(挂载点),data(数据),methods(方法)

  3. v-on指令的作用是绑定事件,简写为@

  4. 方法中通过this关键字获取data中的数据

  5. v-text指令的作用是:设置元素的文本值,简写为{ { } }

v-show指令

  1. v-show指令的作用是:根据真假切换元素的显示状态
  2. 原理是修改元素的display,实现显示隐藏
  3. 指令后面的内容,最终都会解析为布尔值
  4. 值为true元素显示,值为false元素隐藏
  5. 数据改变之后,对应元素的显示状态会同步更新
  6. 代码示例
    <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指令

  1. v-if指令的作用是:根据表达式的真假切换元素的显示状态
  2. 本质是通过操纵dom元素来切换显示状态
  3. 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
  4. 频繁的切换用v-show,反之使用v-if,前者的切换消耗小
  5. 代码示例
    <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指令

  1. v-bind指令的作用是:为元素绑定属性
  2. 完整写法是v-bind:属性名
  3. 简写的话可以直接省略v-bind,只保留:属性名
  4. 需要动态的增删class建议使用对象的方式
  5. 代码示例
    <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>
    

图片切换

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

v-for指令

  1. v-for指令的作用是:根据数据生成列表结构
  2. 数组经常和v-for结合使用
  3. 语法是(item,index) in 数据
  4. item和index可以结合其他指令一起使用
  5. 数组长度的更新会同步到页面上,是响应式的
  6. 代码示例
    <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补充

  1. 事件绑定的方法写成函数调用的形式,可以传入自定义参数
  2. 定义方法时需要定义形参来接收传入的实参
  3. 事件的后面跟上.修饰符可以对事件进行限制
  4. .enter可以限制触发的按键为回车
  5. 事件修饰符有多种
  6. 代码示例
    <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指令

  1. v-model指令的作用是便捷的设置和获取表单元素的值
  2. 绑定的数据会和表单元素值相关联
  3. 绑定的数据–表单元素的值
  4. 代码示例
    <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使用

使用条件

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

两种请求方式

  1. get方法

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

    • 语法格式:axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
    • 不同之处:数据以对象的形式写在post的第二个参数,格式{key:value,key2:value2}
  3. 代码示例

    <!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>
    

网络应用的核心

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

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

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

    <!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>
    
发布了13 篇原创文章 · 获赞 13 · 访问量 5218
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览