Vue总结1

最新推荐文章于 2024-11-08 16:09:18 发布

砖厂打工仔

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量75

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_42456748/article/details/108822119

版权

Vue总结1

一、概述

Vue是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

简单演示：

使用Vue将Hello World渲染在页面上：

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

常用说明：

new Vue()：Vue的实列对象。
el：挂载元素选择器，可以id选择器/类选择器/标签选择器等。
data：代表数据对象，可以是字符串，数字，数组等。
mthods：定义方法。

二、指令

本质就是自定义属性。
Vue中指令都是以 v- 开头。

2.1 v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题。
如果数据中有HTML标签会将html标签一并输出。

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

代码演示：

<div id="app">
    <!-- 在指令中不要写插值语法,直接写对应的变量名称  -->
    <p v-text="msg"></p>
    <p>
        <!-- Vue 中只有在标签的内容中才用插值语法 -->
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue"
        }
    });
</script>

2.2 v-html

用法和v-text 相似，但是他可以将HTML片段解析出来并填充到标签中。
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

代码演示：

<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
   <p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

2.3 v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】。

代码演示：

  <!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue -->
     <span v-once>{{msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    });
</script>

2.4 v-on

用来绑定事件的。
v-on:click绑定单击事件的缩写形式为：@click。

<div id="app">
	<input type="button" value="v-on指令" v-on:click="doIt()"/>
	<input type="button" value="v-on简写" @click="doIt()"/>
	<input type="button" value="双击事件" @dblclick="doIt()"/>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			food:"西兰花炒蛋"
		},
		methods: {
			doIt(){
			alert("做It");
			},
		}
})
</script>

2.5 v-if

多个元素,通过条件判断展示或者隐藏某个元素或多个元素。
进行两个视图之间的切换。

代码演示：

<div id="app">
	<input type="button" name="" id="" value="切换显示" @click="toggleIsShow" />
	<p v-if="isShow">软件攻城狮</p>
	<p v-show="isShow">软件攻城狮 - v-show修饰</p>
	<h2 v-if="temperature>=35">热死了</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			isShow: false,
			temperature: 20
		},
		methods: {
			toggleIsShow() {
				this.isShow = !this.isShow;
			}
		}
})
</script>

v-show 和 v-if的区别

v-show本质就是标签display设置为none，控制隐藏。
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素。

2.6 v-bind

v-bind指令被用来响应地更新 HTML 属性。
v-bind:href绑定链接属性的缩写形式为：href。

2.6.1 绑定属性

演示代码：

<div id="app">
	<a :href="url">进入百度</a>
	<button type="button" @click="handle">切换</button>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			url: "http://www.baidu.com"
		},
		methods: {
			handle() {
				//修改url地址
				this.url = "http://www.westos.org";
			}
		}
})
</script>

2.6.2 绑定class

演示代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active:isActive,error:isError}">
				测试样式
			</div>
			<button type="button" @click="handle">切换</button>
		</div>
		<script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					isActive:true,
					isError:true
				},
				methods: {
					handle(){
						this.isActive = !this.isActive;
						this.isError = !this.isError;
					}
				}
			})
		</script>
	</body>
</html>

2.6.3 绑定style

演示代码：

<div id="app">
	<h1 style="color: red;background:yellow;">窗前明月光</h1>
	<h2 :style="{'color':'red','background':'yellow'}">疑是地上霜</h2>
	<h3 :style="{'color':a,'background':b}">举头望明月</h3>
	<h4 :style="myJson1">低头思故乡</h4>
	<h5 :style="[myJson1,myJson2]">123456</h5>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			a: 'red',
			b: 'yellow',
			myJson1: {
				'color': 'blue',
				'background': 'pink'
			},
			myJson2: {
				'font-size': '100px'
			}
		}
})
</script>

2.7 v-for

用于循环的数组里面的值可以是对象，也可以是普通元素。

代码演示：

<div id="app">
	<ul>
		<li v-for="(ele,index) in arr">
			{{index+1}} 一线城市:{{ele}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			arr: ["北京", "上海", "广州", "深圳"],
		},
})
</script>

不推荐同时使用 v-if 和 v-for。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

2.8 双向数据绑定

当数据发生变化的时候，视图也就发生变化。
当视图发生变化的时候，数据也会跟着同步变化。

v-model

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用。

代码演示：

<div id="app">
    <div>{{msg}}</div>
    <div>
       <!-- 当输入框中内容改变的时候页面上的msg会自动更新 -->
       <input type="text" v-model='msg'>
    </div>
</div>