Vue学习

时间：2020-04-25 00:43:51 阅读：66 评论：0 收藏：0 [点我收藏+]

Vue基础

el挂载点

Vue实例作用范围（el命中的元素及其后代元素内部都可以使用）
多种选择器(与css选择器相同)
不同dom元素(可以使用其余元素，但是不建议使用body和html)

<body>
	<div id="app" class="app">
		{{message}}
		<span>{{message}}</span>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			//el:"#app",
			//el:".app",
			//el:"div",//注意引号
			el:"#body",//报错
			data:{
				message:"hello vue"
			}
		})
	</script>
</body>

data数据类型

Vue中用到的数据存放在data中
data中可以写复杂类型的数据
渲染对象时遵循语法

<div id="app" >
		{{message}}
		<!-- <h2>{{school}}</h2> -->
		<h2>{{school.name}} {{school.mobile}}</h2>
		<ul>
			<li>{{house[0]}}</li>
			<li>{{house[1]}}</li>
			<li>{{house[2]}}</li>
			<li>{{house[3]}}</li>
		</ul>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				message:"hello vue",
				school:{
					name:"王俊杰",
					mobile:"138-1916-3182"
				},
				house:["仓前","临平","老余杭","临安"]
			}
		})
	</script>

Vue本地应用

v-text指令

指令内部也可以插入表达式

<div id="app" >
		<!-- 标签内部内容全部替换 -->
		<h2 v-text="message+‘!‘"></h2>
		<!-- 替换部分内容 -->
		<h2>sublime  {{message+"!"}}</h2>
		<!-- 字符串表达式拼接 -->
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				message:"hello vue"
			}
		})
	</script>

v-html

等同于innerHTML，如果内容为html结构，会有效果，如果只是普通内容，不会有显示

<body>
	<div id="app" >
	<p v-text="content"></p>
	<p v-html="content"></p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				content:"<a href=‘#‘‘>超链接</a>"
			}
		})
	</script>
</body>

v-on

为指定的元素绑定事件
指令可以简写@

@keyup.enter 回车事件

<div id="app" >
	<h2 v-text="food" @click="changefood"></h2>
	<input type="button" name="" value="v-on指令" v-on:click="doti">
	<input type="button" name="" value="v-on简写" @click="doit">
	<input type="button" name="" value="双击事件" @dblclick="dbl">
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				food:"西蓝花炒蛋"
			},
			methods:{
				doti:function(){
					alert("做it");
				},
				doit:function(){
					alert("做黑马");
				},
				dbl:function(){
					alert("双击事件");
				},
				changefood:function(){
					//console.log(this.food);
					this.food+="好好吃！"
				}
			},
		})
	</script>

v-show

根据表达式的真假，决定元素是否显示，修改元素的display属性

<div id="app" >
		<img src="C:\Users\wjj\Desktop\Image\eva\Asuka\1.jpg"  v-show=
		"age>5"/>
		<!-- "isShow" -->
		>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				food:"西蓝花炒蛋",
				isShow:true,
				age:16
			}
			
		})
	</script>

v-if

根据表达式的真假，决定元素是否显示，直接操作dom树，将元素删除添加，使用方法同v-show

v-bind

通过:属性名="表达式" 给属性赋值类属性推荐使用对象，而不是三元表达式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Vue01基础入门</title>
	<link rel="stylesheet" href="">
	<style>
		.active{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="app" >
		<!-- 注意类型上需要带上引号 -->
		<img :src="imgSrc" :title="imgTitle" :class="isActiry?‘active‘:‘‘">
		<img :src="imgSrc" :title="imgTitle" :class="{active:isActiry}">
		
		<input type="button" name="" value="改变样式" @click="changeActive">
	
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				imgSrc:"C:/Users/wjj/Desktop/Image/eva/Asuka/1.jpg",
				imgTitle:"Asuka",
				isActiry:false
			},
			methods:{
				changeActive:function(){
					this.isActiry=!this.isActiry;
				}
			}
			
		})
	</script>
</body>
</html>

v-for

根据数据生成列表结构会根据第一个li，复制n遍，动态修改数组也会动态修改列表内容

<body>
	<div id="app" >
	<ul>
		<li v-for="(item,index) in food">{{item.name}}:{{item.price}}RMB</li>
	</ul>
	
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
			arr:["杭州","上海","北京"],
			food:[
			{name:"汉堡",price:"20"},
			{name:"薯条",price:"10"}
			]
			}
		})
	</script>
</body>

v-model

双向数据绑定(表单元素),可以非常方便的设置和获取表单元素

<body>
	<div id="app" >
		<input type="text" name="" v-model="message" @keyup.enter="getm">
		<input type="button" name="" value="修改" @click="setm">
		<p>{{message}}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				message:"wjj"
			},
			methods:{
				getm:function(){
					alert(this.message);
				},
				setm:function(){
					this.message="hjy";
				},
				add:function(){
					this.food.push({name:"鸡肉卷",price:"15"})
				},
				remove:function(){
					this.food.shift();
				}
			}
		})
	</script>
</body>

Vue网络应用

使用axios进行交互

使用get方法是，只有一个参数就是url
使用post方法是，需要在第二个参数中加入键值对
axios.get("url?key=value&key=value").then(function(response){},function(err))
axios.post("url",{key:value,key:value}).then(function(response){},function(err))

<body>
	<input type="button" name="" value="get请求" class="get">
	<input type="button" name="" value="post请求" class="post">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		document.querySelector(".get").onclick=function(){
			axios.get("http://localhost:8080/o2o/shopadmin/getshopbyid?shopId=1").
			then(function(response){
				console.log(response.data);
			},
			function(err){
				alert(err)
			}
			)
		}

		document.querySelector(".post").onclick=function(){
			axios.post("http://localhost:8080/o2o/shopadmin/getshopbyid",{shopId:"1"}).
			then(function(response){
				console.log(response.data);
			},
			function(err){
				console.log(err);
			}
			)
		}
	</script>
</body>

vue+axios

axios回调函数中的this已经发生改变，无法定位到data中的数据（将this进行保存）

<body>
	<div id="app">
		<input type="button" name="" value="获取笑话" @click="getjoke">
		<p >{{joke}}</p>		
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				joke:"笑话"
			},
			methods:{
				getjoke:function(){
					var that=this;
					axios.get("https://autumnfish.cn/api/joke").then(
					function(response){
						that.joke=response.data;
						console.log(response.data);
					},function(err){
						alert(err)
					})
				}
			}

		})
	</script>
</body>

使用axios导致后台接收不到数据

百度到的原因是，后台使用的是SSM框架，Springmvc会从url中取数据，可是我明明是从reques中取数据的，不知道发生了什么。

解决方案

还是听说的，听说兼容性比较差，不过我还不配考虑这种高度的问题

var param = new URLSearchParams();
param.append(‘shopId‘, ‘1‘);
axios.post("http://localhost:8080/o2o/shopadmin/getshopbyid",param).
then(function(response){
console.log(response.data);
},
    function(err){
    console.log(err);
    }
)

Vue学习

标签：方案 host 参数 css选择器方便内容 api com 作用

原文地址：https://www.cnblogs.com/wjune-0405/p/12771187.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行