Vue基本操作

最新推荐文章于 2023-05-20 10:03:10 发布

牧羊人_

最新推荐文章于 2023-05-20 10:03:10 发布

阅读量161

点赞数

分类专栏：杂记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43589698/article/details/118558242

版权

杂记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue基本操作

生命周期

create 创建
mount 挂载
update 更新
destroy 销毁

在这里插入图片描述

命令

v-model：双向绑定（MVVM模型中的VM）
v-on: 事件绑定缩写为 @
v-bind：在标签内插值，比如动态变化某个class的属性
v-text: 代替{{ }} 插值表达式
v-html: 同v-text，若插入的值包含HTML代码直接渲染
v-for: 遍历 v-for="(item,index) in items" 注意顺序可遍历数组，对象，数字
v-if：判断与v-for结合使用时，v-for优先级更高 v-else v-else-if
注意v-if和v-else之间不能有别的标签，否则浏览器报错找不到v-if
v-show：同v-if，v-show性能更好一点，v-if适合一次性显示消失

事件冒泡

若在一个div中定义了一个button按钮，触发button按钮事件的同时也会触发div的事件

阻止向上冒泡的方法为，给button的@click加入方法 @click.stop 即可

事件其他修饰符

.stop: 阻止事件冒泡
.prevent: 阻止默认事件发生（如点击之后默认发生跳转）
.capture：使用事件捕获模式
.self: 只有元素自身触发事件才执行（冒泡或捕获的都不执行）
.once：只执行一次

事件监控

监控基本类型

<body>
	<div id="app">
		<input type="text" v-model="message"/>
		<p>{{message}}</p>
	</div>

<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: 1,
		},
		watch: {
			message(args1){
				console.log(args1);
			}
		}
	})
</script>
</body>

在这里插入图片描述

监控对象

<script>
	const app = new Vue({
		el: "#app",
		data: {
			person: {
				name: "Jack",
				age: 21
			}
		},
		watch: {
			person: {
				deep: true,
				handler(val){
					console.log(val.age);
					console.log(val.name);
				}
			}
		}
	})
</script>

后续补上组件式开发

牧羊人_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基本操作

Vue基本操作生命周期create 创建mount 挂载update 更新destroy 销毁命令v-model：双向绑定（MVVM模型中的VM）v-on: 事件绑定缩写为 @v-bind：在标签内插值，比如动态变化某个class的属性v-text: 代替{{ }} 插值表达式v-html: 同v-text，若插入的值包含HTML代码直接渲染v-for: 遍历 v-for="(item,index) in items" 注意顺序可遍
复制链接

扫一扫