前端程序员必学的Vue3

清雨扰落瓣

已于 2022-02-24 20:27:21 修改

阅读量7.7k

点赞数

分类专栏： WEB VUE3 文章标签：前端 vue.js javascript

于 2022-02-24 20:25:49 首次发布

本文链接：https://blog.csdn.net/python2021_7/article/details/123119719

版权

VUE3 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

WEB

4 篇文章 0 订阅

订阅专栏

提示：什么是vue框架

vue.js是一套构建用户界面的渐进式框架
vue只关注图层，采用自底向上增量的开发设计
vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

一、vue的引入方式？

示例：vue.js跟JQuery的引入方式一样，有网络引入和本地引入。

二、使用步骤

1.引入库

代码如下（示例）：

<script src='https://unpkg.com/vue@next'></script>

2.vue的创建

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src='https://unpkg.com/vue@next'></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<p>{{msg}}</p>
		</div>

		<script>
			//创建一个APP  (application应用)
			const app = Vue.createApp({
				//定义数据data
				data() {
					//返回msg
					return {
						msg: '你好vue'
					}
				}
			})
			//把vue实例挂载到#app节点上
			var vm = app.mount('#app')
		</script>
	</body>
</html>

三、vue的多重条件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="score>=90">优</p>
			<p v-else-if="score>=80">良</p>
			<p v-else-if="score>=70">中</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>差</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{score:90}
				}
			}).mount('#app')
		</script>
	</body>
</html>

四、vue的v-show和v-if的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="saber">呆毛王</p>
			<p v-show="saber">呆毛王</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{saber:true}
				}
			}).mount('#app')
		</script>
		<!-- v-if通过移除节点隐藏
		v-show通过css隐藏dispiay:none
		若果频繁隐藏和显示用v-show
		偶尔用v-if -->
	</body>
</html>

五、vue事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<button @click="say">按钮</button>
			</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{num:1}
				},
				methods:{
					say(e){
						alert('呆毛王吃了'+this.num+'碗饭')
						this.num++;
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>

六、vue生成选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js/vue.js"></script>
		<style>
			.active{
				color: black;
				background-color: #00FFFF;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<button @click="num=1" :class="num===1? 'active':''">css</button>
				<button @click="num=2" :class="num===2? 'active':''">html</button>
				<button @click="num=3" :class="num===3? 'active':''">js</button>
			</p>
			<div v-if="num===1">css内容</div>
			<div v-if="num===2">html内容</div>
			<div v-if="num===3">js内容</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						num: 1
				}
	
				}
			}).mount('#app')
		</script>
	</body>
</html>

六、vue步进器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../vue.js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="add(-1)">-</button>
			<span>{{num}}</span>
			<button @click="add(1)">+</button>
		</div>
		<script>
			Vue.createApp({
				data() {
					return{num:1}
				},
				methods:{
					add(n){
						this.num+=n;
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>