Vue超简单入门

于 2022-02-24 21:26:46 发布
阅读量689 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44769099/article/details/123120033
版权

目录

概念

安装

实例化

内置指令

        文本渲染

                {{}}  语法

                v-text与v-html  文本

        属性渲染

                v-bind  属性

        条件渲染

                v-if,v-else  选择

                 v-else-if  多重选择

                 v-show 显示隐藏

        列表渲染

                v-for 循环

                v-on 事件

概念

vue是一套用于构建用户界面的渐进式框架。简单，高效，且生态丰富（插件多）

安装

在线使用

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

下载后通过 script src 导入使用

<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>

附下载地址：UNPKG - vue

实例化

        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<p>{{msg}}</p>
		</div>
		
		<script type="text/javascript">
		// 创建一个App (application应用)
			const app = Vue.createApp({
				// 定义数据 data
				data(){
					// 返回msg
					return {msg:"你好vue"}
				}
			})
			// 把app实例挂载到#app节点
			var vm = app.mount("#app")
		</script>
	</body>
</html>

input的内容发生变化时，p标签的内容也会跟随变化，因为它们的值使用的都是 msg 

所以当使用input修改 msg 的值时，p标签的内容会跟随变化

内置指令

        用于联系html模板与JavaScript数据模型

        文本渲染

                {{}}  语法

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

每个绑定都只能包含单个表达式，所以下面的例子都不会生效

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<p>{{7>6?"对":"错"}}</p>
			<p>{{msg.split('').reverse().join()}}</p>
            //单行js可以执行，不可以执行if..else  while等多行表达式
		</div>
		
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {
						msg:"vue,棒棒的!"
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

每个绑定都只能包含单个表达式，所以下面的例子都不会生效

                        

                v-text与v-html  文本

        v-text会把内容原样打印，类似于js的innerText

        而v-html会把内容里的html标签进行编译，类似于js的innerHTML

        

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-text="msg"></h1>
			<h1 v-html="msg"></h1>
		</div>
		
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {
						msg:"vue,<em>棒棒的!</em>"
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

打印结果

 

        属性渲染

                v-bind  属性

                        我们可以使用v-bind指令给html标签动态的绑定属性。

                       

绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-bind:title="msg">ds</p>
			<!-- v-bind:属性名="值"  可缩写为  :属性名="值" -->
			<button :disabled="!canUse">按钮</button>
		</div>
		
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return {
						msg:"vue,棒棒的!",
						canUse:false
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

        条件渲染

                v-if,v-else  选择

                        同时只会执行一条，一条执行时，另一条会被注释掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="isLog">欢迎回家</p>
			<!-- if成立else取消  反之亦然 -->
			<p v-else>请登录后操作!</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						isLog:false
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

                 v-else-if  多重选择

                        多重选择语句，同时只会执行一条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</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 type="text/javascript">
			Vue.createApp({
				data(){
					return{
						score:98
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

                 v-show 显示隐藏

                        与v-if相似

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="can">我会显示的</p>
			<p v-show="can">我也会显示的</p>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						can:false
					}
				}
			}).mount("#app")
			// v-show是通过css方法隐藏节点
			// v-if是直接移除节点方式隐藏
			// 如果频繁切换显示与隐藏 v-show
			// 偶尔切换显示隐藏用 v-if
		</script>
	</body>
</html>

        列表渲染

                v-for 循环

                        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- 会创建出等同于list长度数量的li，一对一显示元素 -->
				<li v-for="item in list" :key="item">{{item}}</li>
				<!-- item 是可变的     与内容位置一致 -->
			</ul>
			<!-- key属性值为了让Vue内部遍历的节点给一个唯一的标识，以便更好的去
			排列过滤等操作，为了性能优化，key的值要唯一 -->
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						list:["vue","react","angular"]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

执行结果

进阶

        {{key}}  数据的键

        {{value}}   数据的值

        范围  ： 如果v-for 的对象是数字的话，就会遍历创建从1到此数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-for="value,key in obj">{{key}}:{{value}}</div>
			<div v-for="value in 5">{{value}}</div>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{
						obj:{title:"《清秋》",author:"月凉笙",date:"2022-02-24"}
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

 执行结果

 

                 v-for与v-if同时使用时，会先执行v-if，想优先使用v-for需要使用特定标签进行包裹使用

                        template

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<template v-for="item in 10">
				<p v-if="item%2===0">{{item}}</p>
			</template>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{}
				}
			}).mount("#app")
		</script>
	</body>
</html>

                v-on 事件

                                 v-on:事件名="代码段"

                                 v-on:事件名="代码段"   可以简写为  @事件名="代码段"        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="num++" type="button">{{num}}</button>
			<button @click="num++" type="button">{{num}}</button>
			<!-- v-on:事件名="代码段"可以简写为  @事件名="代码段"  -->
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data(){
					return{num:1}
				}
			}).mount("#app")
		</script>
	</body>
</html>

月凉笙
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值