学习笔记vue入门

于 2021-06-30 21:23:29 发布
阅读量205 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ming_Q_I/article/details/118367553
版权

vue入门案例

1.vue入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>vue入门案例</h1>
			{{hello}}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					hello:"你好vue"
				}
			})
		</script>
	</body>
</html>

2.v-cloak属性

介绍：这个指令保持在元素上，直到关联实例结束编译。和CSS规则，如{v-cloak},{display:none}一起使用时，这个指令可以隐藏尚未编译的Mustache标签，直到实例准备完毕。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak、v-text、v-html、v-pre</title>
		<style>
		[v-cloak]{
			/* 为属性设置隐藏 */
			display:none
		}	
		</style>	
	</head>
	<body>
		<div id="app" v-cloak>
			测试c-cloak;
			<h1>{{msg}}</h1>
			<hr />
			</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data: {
					msg:"测试数据",
				}
			})
		</script>
	</body>
</html>

a.当浏览器解析JS完成前，用户看到的是{{msg（数据的属性名）}}。
b.当全部JS加载完成，{{msg}}就会替换成相应的具体数据。
c.如果不想让用户看到没有解析的数据，需要使用v-cloak属性将为解析的数据隐藏。

3.数据绑定指令

3.1 v-text指令

将上述v-cloak属性优化，直接用v-text=‘属性名’（在前端开发中，工作中一般使用单引号‘ ’）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak、v-text、v-html、v-pre</title>
		<style>
		[v-cloak]{
			/* 为属性设置隐藏 */
			display:none
		}	
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			测试c-cloak;
			<h1>{{msg}}</h1>
			<hr />
			测试c-text
			<h1 v-text="text"></h1>
			<hr />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data: {
					msg:"测试数据",
					text:"helloVue",
				}
			})
		</script>
	</body>
</html>

3.2 v-html指令

动态展现html标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak、v-text、v-html、v-pre</title>
		<style>
		[v-cloak]{
			/* 为属性设置隐藏 */
			display:none
		}	
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			测试c-cloak;
			<h1>{{msg}}</h1>
			<hr />

			测试c-text
			<h1 v-text="text"></h1>
			<hr />

			测试v-html
			<span v-html="html"></span>
			<hr />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data: {
					msg:"测试数据",
					text:"helloVue",
					html:"<h1>html测试数据</h1>",
				}
			})
		</script>
	</body>
</html>

3.3.v-pre指令

vue直接跳过v-pre所在标签，不解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak、v-text、v-html、v-pre</title>
		<style>
		[v-cloak]{
			/* 为属性设置隐藏 */
			display:none
		}	
		</style>	
	</head>
	<body>
		<div id="app" v-cloak>
			测试c-cloak;
			<h1>{{msg}}</h1>
			<hr />
			
			测试c-text
			<h1 v-text="text"></h1>
			<hr />

			测试v-html
			<span v-html="html"></span>
			<hr />
			
			测试v-pre 
			<br />
			<!-- vue直接跳过本标签，，不解析 -->
			<span v-pre="msg">{{msg}}</span>
			<hr />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data: {
					msg:"测试数据",
					text:"helloVue",
					html:"<h1>html测试数据</h1>",
				}
			})
		</script>
	</body>
</html>

3.4.v-once指令

元素只解析一次，后续用户随意更改时，数据不变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak、v-text、v-html、v-pre</title>
		<style>
		[v-cloak]{
			/* 为属性设置隐藏 */
			display:none
		}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			测试c-cloak;
			<h1>{{msg}}</h1>
			<hr />

			测试c-text
			<h1 v-text="text"></h1>
			<hr />

			测试v-html
			<span v-html="html"></span>
			<hr />

			测试v-pre 
			<br />
			<!-- vue直接跳过本标签，不解析 -->
			<span v-pre="msg">{{msg}}</span>
			<hr />

			测试v-once
			<br />
			<span v-once>{{one}}</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data: {
					msg:"测试数据",
					text:"helloVue",
					html:"<h1>html测试数据</h1>",
					one:'数据解析一次'
				}
			})
		</script>
	</body>
</html>

程序运行效果图

在这里插入图片描述

3.5.v-model指令

数据绑定，只能标识可以编辑的标签。分为两个部分：

a.数据与页面绑定，数据发生变化页面数据同步修改；
b.页面与数据绑定，页面数据发生变化数据同步变化；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			
			数据录入：<input type="text" v-model="msg" />
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					msg:'测试数据'
				}
			})
		</script>
		
		
		
	</body>
</html>

程序运行效果图：
a.正常运行效果：
在这里插入图片描述
b.修改页面数据：
在这里插入图片描述
c.修改后台数据：
在这里插入图片描述

3.6 MVVM思想

1.字母解释
a.M model 数据
b.V view 视图
c.VM (view-model) 数据和视图的控制

2.当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定 绑定到页面中

在这里插入图片描述

4.事件绑定

4.1 v-on指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 编辑操作内容 -->
			数值{{num}}		
				<!-- v-on:简化操作 @  -->
			<!-- <button @click="num++">增加1</button> -->
			<!-- 通过方法实现新增 -->
			<button @click="addNum">增加1</button>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					num: 1
				},
				methods:{
					/* addNum: function(){
						
					alert("ceshi")
					} */
					addNum(){
						// alert('测试方法优化')
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

4.2 事件修饰符

4.2.1 stop 阻止冒泡
事件冒泡：由于嵌套关系先执行内部事件，如果执行成功后，则事件冒泡给外层事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止冒泡</title>
	</head>
	<body>
		
		<div id="app">
			<div @click="addNum1">
			数值{{num}}
				<button @click="addNum2">自增</button>
				<!-- 每次点击数值增加2 -->
				<button @click.stop="addNum2">阻止冒泡自增</button>
				<!-- 每次点击数值增加1 -->
			</div>
			<hr />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					num: 1
				},
				methods:{
					addNum1(){
						this.num++
					},
					addNum2(){
						this.num++
					},
					login(){
						alert('跳转')
					}
				}
			})
		</script>
	</body>
</html>
4.2.2 prevent 阻止默认行为
@click.prevent，阻止标签跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阻止默认行为</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<input name="username" type="text" />
				<input name="password" type="password" />
				<button type="submit" @click.prevent="login">提交</button>
				<!--阻止页面跳转-->
			</form>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					num: 1
				},
				methods:{
					login(){
						alert('跳转')
					}
				}
			})
		</script>
	</body>
</html>

4.3.按键修饰符

4.3.1回车触发
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键访问修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.按键访问修饰符   回车触发 
			
			-->
			回车触发：<input type="text"  @keyup.enter="enter"/>
			<input v-on:keyup.8="enter"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			const app=new Vue({
				el: '#app',
				data: {
					num: 1
				},
				methods:{
					enter(){
						alert('回车触发')
					}
				}
			})
		</script>
	</body>
</html>


keyup: 	    键位弹起触发
keydown：   键位按下触发
keypress：  数字键盘触发

常用按键
.enter
.teb
.delete (删除和退格)
.esc
.up
.down
.left
.right

5.属性绑定

5.1 v-bind

在这里插入图片描述

5.2 v-bind class、style属性

在这里插入图片描述

小结：
1.vue是一个渐进式的框架（分布式应用思想）。
2.vue入门案例，4个步骤：
（1）定义div；（2）引入js库；（3）实例化vue对象；（4）取值操作–>{{属性名}}
3.vue指令：v-cloak / v-text / v-html / v-pre / v-once
4.双向数据绑定：v-model ， MVVM思想
5.事件绑定：v-on:click , @click(简写) / stop阻止事件冒泡 / prevent阻止事件跳转 / 按键修饰符：keyup:enter
6.属性绑定：v-bind:属性=“属性的key” / 类型绑定:（类型:true/flase）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值