Vue框架史上最全总结

最新推荐文章于 2024-07-15 23:05:00 发布

奥儿凉！

最新推荐文章于 2024-07-15 23:05:00 发布

阅读量234

点赞数 5

文章标签： vue html vue.js html5 css3

本文链接：https://blog.csdn.net/qq_48288843/article/details/115784690

版权

Vue框架

Vue基础：

一、安装与部属

Vue的导入

标签形式：

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

文件形式：
```
<script src="./js/vue.js"></script>
```

第一个Vue程序

导入开发版本的Vue.js
创建Vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

代码：

    <body>
		<div id="app">
			{{message}}
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					message:"Hello World!"
				}
			})
	    </script>
	</body>

二、el挂载点

Vue的实例的作用范围

Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器（建议使用id渲染）
支持双标签，挂载元素不能是 or （建议是div）

三、data数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可

代码：

	<body>
		<div id="app">
			{{message}}
			<span id="">{{school.name}}--{{school.mobile}}</span>
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
				<li>{{campus[2]}}</li>
				<li>{{campus[3]}}</li>
			</ul>
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					message:"Hello World!",
					school:{
						name:"马申奥",
						mobile:"15194995893"
					},
					campus:["北京市","天津市","上海市","重庆市"]
				}
			})
	    </script>
	</body>

本地应用：

指令

一、内容绑定时间绑定：

1、v-text:

功能：设置标签的文本值(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

	<body>
		<div id="app"> 
			<h2 v-text="message+'!'"></h2>
			<h2>我的第一个程序{{message+"!"}}</h2><!-- 或者'!' -->
		</div> 
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					message:"Hello World!"
				}
			})
	    </script>
	</body>

2、v-html：

功能：设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本

    <body>
		<div id="app">
			<h2 v-text="message"></h2><!-- 结果： <h2>Hello World!</h2> -->
			<div v-html="message"></div><!-- 结果： Hello World! -->
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					message:"<h2>Hello World!</h2>"
				}
			})
	    </script>
	</body>

3、v-on：

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

	<body>
		<div id="app">
			<input type="button" value="单机" v-on:click="click"></input> 
			<input type="button" value="@方法" @click="doIt"></input> 
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{food:"红烧肉"},
				methods:{ 
					click:function(){alert(this.food)},
					doIt:function(){alert("doIt")}
				}
			})
	    </script>
	</body>

二、显示切换事件绑定：

1、v-show：

功能：根据表达值的真假切换元素的显示和隐藏
作用:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏

    <body>
		<div id="app">
			<img src="" v-show="true" /><!-- 显示 -->
			<img src="" v-show="isShow" /><!-- 隐藏 -->
			<img src="" v-show="age>=18" /><!-- 隐藏 -->
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:16
				}
			})
	    </script>
	</body>

2、v-if：

功能：根据表达值的真假,切换元素的显示和隐藏(操纵dom元素，性能消耗较大)
v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除

	<body>
		<div id="app">
			<p v-if="true">我是p1</p>
			<p v-if="isShow">我是p2</p>
			<p v-if="show">我是p3</p>
			<input type="button" value="切换p2" @click="show" />
			<p v-if="temp>35">我好热</p>
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					temp:40
				},
				methods:{
					show:function(){
						this.isShow = !this.isShow
					}
				}
			})
	    </script>
	</body>

3、v-bind：

功能：设置元素的属性(比如:src,title,class)
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名

    <head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				border:5px solid black;
			}
		</style>
	</head>
    <body>
		<div id="app">
			<img v-bind:src="'img/'+imgStc" v-bind:title="imgTitle">
			<img :src="'img/'+imgStc" :title="imgTitle" 
			@click="toggleActive" :class="{active:isActive}">
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					imgStc:"04.jpg",
					imgTitle:"风景图片",
					isActive:false
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
	    </script>
	</body>

三、列表循环，表单元素绑定：

1、v-for:

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

    <body>
		<div id="app">
			<input type="button" value="添加" @click="add"/>
			<input type="button" value="删除" @click="remove"/>
			<ul>
				<li v-for="(item,index) in arr" :title="item">{{index+1}}{{item}}</li>
				<li v-for="(item,index) in objArr">{{item.name}}</li>
			</ul>
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				data:{
					arr:["张三","李四","王五","李六","赵七"],
					objArr:[
						{name:"jack"},
						{name:"rose"}
					]
				},
				methods:{
					add:function(){
						this.objArr.push({name:"lily"})
					},
					remove:function(){
						this.objArr.shift();
					}
				}
			})
	    </script>
	</body>

2、v-on:

功能：传递自定义参数，事件修饰符
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车，参考：https://cn.vuejs.org/v2/api/#v-on

    <body>
		<div id="app">
			<input type="button" value="点击" @click="doIt(666,'老铁')"/>
			<input type="text" @keyup.enter="sayHi"/>
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app", 
				methods:{
					doIt:function(p,p1){
						console.log(p,p1)
					},
					sayHi:function(){
						alert("有妹妹吗？")
					}
				}
			})
	    </script>
	</body>

3、v-model:

功能：获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<— --->表单元素的值

    <body>
		<div id="app">
			<input type="button" value="修改为:你好呀!!"  @click="setM"/>
			<input type="text" v-model="message" @keyup.enter="getM"/>
			<h2>{{message}}</h2>
		</div>
		<script src="./js/vue.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app", 
				data:{
					message:"啊你哈西游"
				},
				methods:{
					getM:function(){
						alert(this.message)
					},
					setM:function(){
						this.message = "你好呀！！"
					}
				}
			})
	    </script>
	</body>

网络应用：

一、axios：功能强大的网络请求库

1、axios的导入

标签导入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、使用方法

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容,或错误信息
文档传送门https://github.com/axios/axios

get方式：

axios.get(地址).then(function(response){})

axios.get(地址).then(function(response){},function(err){})

axios.get(地址?key=value&key2=value2").then(function(response){},function(err){})

post方式：

axios.get(地址,对象).then(function(response){},function(err){})

axios.get(地址,{key:value,key2:value2}).then(function(response){},function(err){})

案例：

    <body>
		<div id="app">
			<input type="button" value="get请求"  class="get" @click="getM"/>
			<input type="button" value="post请求" class="post" @click="postM"/>
		</div>
		<script src="./js/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	    <script type="text/javascript">
	    	var app = new Vue({
				el:"#app",
				methods:{
					getM:function(){
						axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function(response){
							console.log(response);
						},function(err){
							console.log("err")
						})
					},
					postM:function(){
						axios.post("https://autumnfish.cn/api/user/reg",
						{username:"aoao",pussword:""}).then(function(response){
							console.log(response);
						},function(err){
							console.log("err");
						})
					}
				}
			})
	    </script>
	</body>

奥儿凉！

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
Vue框架史上最全总结

Vue框架Vue基础：一、安装与部属Vue的导入标签形式：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>文件形式：<script src="./js/vue.js"></script>第一个Vue程序导入开发版本的Vue.js创建Vue实例对象,设置el属性和data属性使用简洁的模板语法把数据渲染到页面上代
复制链接

扫一扫