Vue基础指令

最新推荐文章于 2022-12-07 16:12:07 发布

liuhai_0

最新推荐文章于 2022-12-07 16:12:07 发布

阅读量57

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37217113/article/details/118539798

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

v-text 原文输出

v-html 用于渲染HTML字符串

v-show 通过css的display属性切换显示隐藏效果

v-if 通过DOM元素的渲染来实现显示，隐藏，值为false时，销毁元素，为true时，创建元素，比较耗性能

v-else-if 与v-if ,v-else联用

v-else 与v-if ,v-else-if联用

v-for 用于循环数组、循环对象、循环整数，v-for后面使用key属性表示当前元素的唯一属性，如：索引下标等，不能与v-if同时使用，如果使用<template>，渲染列表时，需要添加key事件

v-on 简写 @

事件修饰符：

用于处理事件冒泡：

.stop 阻止事件冒泡 .self只有元素本身被触发才会执行事件函数 .capture 在事件冒泡中优先执行当前元素绑定的事件函数

.once只触发一次当前的元素

.passive 忽略preventDefault()函数，不能和prevent修饰符联用

按键修饰符：keydown

系统修饰符：

v-bind 用于样式绑定简写：

绑定class：本质赋予一个字符串值

:class=”’red’”

:class=”f”

:class=”{r:true,f:flase}”

:class=”[r,f]”

绑定style：本质赋予一个对象的值

:style=”f2”

:style=”{fontSize:10px}”小驼峰

:style=”[f2,r2]”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style>
        	.red{
				color: red;
			}
			.fon{
				font-size: 35px;
			}
            
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind -->
		<!-- 
			使用的style 和 script里的数据
			-->
		<p :class="'red'">Hello</p>
		<p :class="f">Hello2</p>
		<p :class="[r,f]">Hello3</p>
		<p :class="{'red':false,'fon':true}">Hello4</p>
		<!-- 使用script数据 -->
		<div :style="{fontSize:'25px',color:'blue'}">Hi</div>
		<div :style="r2">Hi</div>
		<div :style="[r2,f2]">Hi</div>
    </div>
			
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                r:'red',
				f:'fon',
                r2:{
					color:'red',
					fontSize:'19px'
				},
				f2:{
				    borderSize:'1px' ,
				    borderStyle:'solid' ,
				    borderColor:'#159864'
				},
            }
        })
    </script>
</body>
</html>

v-model 双向数据绑定，主要用于表单绑定

修饰符：

.trim 去掉输入框的首尾空格

.lazy 当文本框失去焦点时才进行绑定

.number 去掉非数字部分，前提时以数字开头

用于编译处理vue指令

v-pre 当前所修饰的元素及其子元素跳过vue编译，原样输出

v-once 被修饰的元素只会使用渲染一次

v-cloak 当前指令一直处于被修饰的元素上，直到vue编译完成后才消失，一般会配合display样式解决源代码闪烁问题

liuhai_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础指令

v-text 原文输出v-html 用于渲染HTML字符串v-show 通过css的display属性切换显示隐藏效果v-if 通过DOM元素的渲染来实现显示，隐藏，值为false时，销毁元素，为true时，创建元素，比较耗性能v-else-if 与v-if ,v-else联用v-else 与v-if ,v-else-if联用v-for 用于循环数组、循环对象、循环整数，v-for后面使用key属性表示当前元素的唯一属性，如：索引下标等，不能与v-if同时使用，如果使用<tem
复制链接

扫一扫

专栏目录