VueJS基础

最新推荐文章于 2023-09-27 05:57:48 发布

原创最新推荐文章于 2023-09-27 05:57:48 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

基础同时被 2 个专栏收录

7 篇文章

订阅专栏

艾宾浩斯

3 篇文章

订阅专栏

本文介绍Vue.js框架，一个用于构建数据驱动Web界面的渐进式框架，提供MVVM风格的双向数据绑定。覆盖Vue的基本概念、常用指令如v-on、v-bind、v-model、v-for等，以及条件渲染指令v-if与v-show的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VueJS概述

Vue.js是一个构建数据驱动的web界面的渐进式框架,Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,便于与第三方库或既有的项目整合.
官网: https://cn.vuejs.org/

MVVM模式

提到了Vue,那么就不得不提一提MVVM了,MVVM是Model-View-ViewModel的简写,它本质上就是MVC的改进版,MVVM就是将其中的View的状态和行为抽象化,让我们将视图UI和业务逻辑分开.

MVVM模式和MVC模式一样,主要目的是分离视图(view)和模型(model)
Vue.js就是一个提供了MVVM风格的双向数据绑定的JavaScript库,专注于View层,它的核心是MVVM中的VM,也就是ViewModel,View负责连接View和Model,保证视图和数据的一致性,以使得前端开发更加高效,便捷.

在这里插入图片描述

VueJS快速入门

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
       {{message}}
    </div>
    <script>
    new Vue({
         el:'#app', //表示当前vue对象接管了div区域
         data:{
              //注意不要写分号结尾
              message:'hello world' 
         }
    });
    </script>
</body>
</html>

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，
Mustache 标签将会被替代为对应数据对象上属性的值。
无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
-->
{{ number + 1 }}<!--Vue.js 都提供了完全的 JavaScript 表达式支持。-->
{{ ok ? 'YES' : 'NO' }}

<!--这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。
有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。-->
{{ var a = 1 }}<!-- 这是语句，不是表达式 -->
{{ if (ok) { return message } }}<!-- 流控制也不会生效，请使用三元表达式 -->
</body>
</html>

VueJS常用系统指令

v-on 可以监听DOM事件,并在触发时运行一些JavaScript代码

v-on

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>事件处理 v-on:click</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
   <div id="app">
   {{message}}
   <button v-on:click="fun1('good')">点击改变</button>
   </div>
   <script>
   new Vue({
      el:'#app', //表示当前vue对象接管了div区域
      data:{
         message:'hello world' //注意不要写分号结尾
      },
      methods:{
         fun1:function(msg){
             this.message=msg;
         }
      }
   });
   </script>
</body>
</html>

v-on:keydown

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>事件处理 v-on:keydown</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-on:keydown="fun2('good',$event)">
</div>
<script>
    new Vue({
        el: '#app', //表示当前vue对象接管了div区域
        methods: {
            fun2: function (msg, event) {
                if (!((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 8 || event.keyCode == 46)) {
                    event.preventDefault();
                }
            }
        }
    });
</script>
</body>
</html>

v-on:mouseover

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2.1.3v-on:mouseover</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<div v-on:mouseover="fun1" id="div">
			<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
		</div>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			methods : {
				fun1 : function() {
					alert("div");
				},
				fun2 : function(event) {
					alert("textarea");
					event.stopPropagation();//阻止冒泡
				}
			}
		});
	</script>
</body>
</html>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 事件修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<form @submit.prevent action="http://www.itcast.cn" method="get">
			<input type="submit" value="提交" />
		</form>
		<div @click="fun1">
			<a @click.stop href="http://www.itcast.cn">itcast</a>
		</div>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			methods : {
				fun1 : function() {
					alert("hello itcast");
				}
			}
		});
	</script>
</body>
</html>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 按钮修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-on:keyup.enter="fun1">
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			methods : {
				fun1 : function() {
					alert("你按了回车");
				}
			}
		});
	</script>
</body>
</html>

此外.v-on:可以简写成@

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

v-text与v-html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-html与v-text</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<div v-text="message"></div>
		<div v-html="message"></div>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				message : "<h1>传智黑马</h1>"
			}
		});
	</script>
</body>
</html>

v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<font size="5" v-bind:color="ys1">内涵的</font> <font size="5"
			:color="ys2">不止是段子</font>
		<hr>
		<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				ys1 : "red",
				ys2 : "green",
				id : 1
			}
		});
	</script>
</body>
</html>

v-bind简写方式

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-model

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		姓名:<input type="text" id="username" v-model="user.username"><br>
		密码:<input type="password" id="password" v-model="user.password"><br>
		<input type="button" @click="fun" value="获取">
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				user : {
					username : "",
					password : ""
				}
			},
			methods : {
				fun : function() {
					alert(this.user.username + " " + this.user.password);
					this.user.username = "Tom";
					this.user.password = "11111111";
				}
			}
		});
	</script>
</body>
</html>

v-for

1.操作array

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="(item,index) in list">{{item+" "+index}}</li>
		</ul>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				list : [ 1, 2, 3, 4, 5, 6 ]
			}
		});
	</script>
</body>
</html>

2.操作对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="(value,key) in product">{{key}}--{{value}}</li>
		</ul>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				product : {
					id : 1,
					pname : "电视机",
					price : 6000
				}
			}
		});
	</script>
</body>
</html>

3.操作对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<table border="1">
			<tr>
				<td>序号</td>
				<td>名称</td>
				<td>价格</td>
			</tr>
			<tr v-for="p in products">
				<td>{{p.id}}</td>
				<td>{{p.pname}}</td>
				<td>{{p.price}}</td>
			</tr>
		</table>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				products : [ {
					id : 1,
					pname : "电视机",
					price : 6000
				}, {
					id : 2,
					pname : "电冰箱",
					price : 8000
				}, {
					id : 3,
					pname : "电风扇",
					price : 600
				} ]
			}
		});
	</script>
</body>
</html>

v-if与v-show

v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<span v-if="flag">百思不得姐</span> <span v-show="flag">itcast</span>
		<button @click="toggle">切换</button>
	</div>
	<script>
		new Vue({
			el : '#app', //表示当前vue对象接管了div区域
			data : {
				flag : false
			},
			methods : {
				toggle : function() {
					this.flag = !this.flag;
				}
			}
		});
	</script>
</body>
</html>