【前端】Vue.js中的指令以及其用法

其他 2019-03-06 16:10:53 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ght886/article/details/87529809

1、声明式渲染

1.1、文本插值，用两个花括号：{{内容}}

html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="app">    //挂载元el，指定的节点，用id表示
    <p v-clock>{{ message }}</p>    //vue实例对象中data对象中某个属性名
    
  </div>
  <!-- built files will be auto injected -->
<script>
var vm = new Vue({
  el: '#app',     //挂载到DOM节点上，节点的id=app
   data: {        //给data对象定义属性message，与html中某个文本对象变量名一致
    message: 'Hello Vue!'
  },
  methods:{    //这个methods属性定义了vue实例所有可用的方法

  }
})
</script>
</body>
</html>

1.2、v-text，解析文本，能读取文本，但不能解析html标签（就是如果变量值是html的形式给出，那么读出的值也包含html标签）

1.2.1 v-text 属性值为字符串文本


<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-text="msg"></div>
  	</div>
 
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                 msg:" hello"
        	},
         	methods: {
             	    say() {
               	 	alert(hello);
            	    }
         	}
    	})
	</script>
</body>
</html>

1.2.2 v-text，属性值为字符串html语句

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-text="msg"></div>
  	</div>
 
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                 msg:"<p1>hello，Vue</p1>"
        	},
         	methods: {
             	    say() {
               	 	alert(hello，vue);
            	    }
         	}
    	})
	</script>
</body>
</html>

1.3、v-html，能解析html语句，也能读取文本值

v-text和v-html两者都能读取文本，但是v-html能解析字符串html语句

1.3.1 v-html，属性值为字符串html语句

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-html="msg"></div>
  	</div>
 
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                 msg:"<p1>hello,Vue</p1>"
        	},
         	methods: {
             	    say() {
               	 	alert(hello,Vue);
            	    }
         	}
    	})
	</script>
</body>
</html>

1.3.2 v-html，属性值为字符串文本语句

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-html="msg"></div>
  	</div>
 
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                 msg:"hello,Vue"
        	},
         	methods: {
             	    say() {
               	 	alert(hello,vue);
            	    }
         	}
    	})
	</script>
</body>
</html>

2、v-bind（可以简化为：），动态绑定数据，及时对页面的数据进行变更，如V-bind:标签属性=“变量名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
 <div id="app-2">
   <span v-bind:title="message">  //或者简写：<span :title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
   </span>
</div>
<script>
var app2 = new Vue({
    el: '#app-2',
    data: {
       message: '页面加载于 ' + new Date().toLocaleString()
   }

})
</script>
</body>
</html>

2.1、v-bind:class，三种绑定方法—

2.1.1、对象型 “{red:isred}”

2.2.2、三目型"isred?‘red’:‘blue’"

2.3.3、数组型"[{red:‘isred’},{blue:‘isblue’}]"

2.1.1、对象型：


<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<style>
        .red {
            background: red;
        }
  
        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
	<div id="box">
     	<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
    	<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
	</div>
 
	
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                isred:true
            }
    	})
 
	</script>
</body>

2.2.2、三目型：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<style>
        .red {
            background: red;
        }
  
        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
	<div id="box">
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>-->
    	<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>    <!--三元运算符方式-->
     	<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
	</div>
 
	
	<script type="text/javascript">
	    new Vue({
         	el: "#box",
        	data:{
                isred:false
            }
    	})
 
	</script>
</body>
</html>

2.3.3、数组型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<style>       
	    .red { background: red;}        
	    .blue { width: 100px;  height: 100px;  background: blue;}    
	</style>
</head>
<body>
	<div id="box">     	
		<!--<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>-->    
		<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->     	
		<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>
	</div>
	<script type="text/javascript">   
		new Vue({   
		    el: "#box",        	
		    data:{                
		    	isred:true         
		    }    	
		})
	</script>
</body>
</html>

2.2、v-bind:style，绑定内联样式

2.2.1、内联样式，对象型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

   
</head>
<body>
	<div id='box'>
		<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",
		    data: {
			   activeColor: 'red',
			   fontSize: 30,
			   message:'hello',
			}
		})
	</script>
</body>
</html>

显示结果：

2.2.2、直接绑定到一个对象上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

   
</head>
<body>
	<div id='box'>
		<div v-bind:style="styleObj">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",
		    data: {
				styleObj:{
					color:'red',
					fontSize:'30px'
				},
			    message:'hello',
			}
		})
	</script>
</body>
</html>

2.2.3、数组语法，将多个样式对象应用到同一个元素上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

   
</head>
<body>
	<div id='box'>
		<div v-bind:style="[style1,style2]">{{message}}</div>
	</div>
	<script type="text/javascript">
		new Vue({
		    el:"#box",
		    data: {
				style1:{
					color:'red',
					fontSize:'30px'
				},
				style2:{
					color:'black'
				},
			    message:'hello',
			}
		})
	</script>
</body>
</html>

3、条件 v-if ，显示与隐藏（DOM元素的删除与添加），v-if = “变量名”，在data中用true或false来控制显示和隐藏

html如下：

<div id="app-3">
  <p v-if="seen">现在你能看到内容了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true   //用true、false来控制能否看见内容
  }
})

4、条件 v-else-if 必须和v-if连用 ，格式 v-else-if=“变量名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
      A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
</div>

5、条件 v-else 必须和v-if连用，不能单独使用，否则报错：模板编译错误，格式 v-else=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

   
</head>
<body>
<div id="app">
	<div v-if="Math.random() > 0.5">
	  Sorry
	</div>
	<div v-else>
	  Not sorry
	</div>
</div>
	
<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

6、v-show，显示与隐藏，传递的值为布尔值，默认为false，格式v-show=“变量名”，只是设置display属性，元素还存在DOM中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>   
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>
</body>
</html>

7、v-if 和v-show都是隐藏和显示DOM节点，区别是v-show是给DOM节点设置display属性，而 v-if 则是在DOM中增加/删除节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <p v-if="seen">红消香断有谁怜？</p>
    <template v-if="ok">
      <h1>花谢花飞花满天</h1>
      <p>伤心桥下春波绿</p>
      <p>曾是惊鸿照影来！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

8、v-for，循环，绑定数组的数据来渲染一个项目列表，格式 v-for=“字段名 in(of) 数组json”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for指令</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    
</head>
<body>
  <div id="app">

    <div>
      <label>Id
        <input type="text" v-model="id">
      </label>
      <label>Name
        <input type="text" v-model="name">
      </label>
      <input type="button" value="添加" @click="add">
    </div>
    <p v-for="item in list" :key="item.id">
      <!-- <input type="checkbox" name="" id=""> 添加选择框-->
     <input type="checkbox"> {{item.id}} ---{{item.name}}
    </p>
 
    
  </div>
  <!-- built files will be auto injected -->
<script>
    var vm = new Vue({

      el: '#app',
      data:{
        id:'',
        name:'',
       list:[
         {id: 1, name:'王勃'},
         {id: 2, name:'杨炯'},
         {id: 3, name:'卢照邻'},
         {id: 4, name:'骆宾王'},
       ]
        
      },
      methods: {
        add(){
          // this.list.push({ id:this.id, name:this.name})
          this.list.unshift({ id:this.id, name:this.name})
        }
        }
  
});
// [].forEach((item, i)=>{})
</script>
</body>
</html>

9、v-on 绑定事件（处理用户输入） 函数必须写在methods里面，格式v-on:事件名=“函数名”，简写@事件名=“函数名”

//v-on 指令，它用于监听 DOM 事件：在这里参数是监听的事件名。
<a v-on:click="doSomething">
//修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
//例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>

10、v-model，双向绑定数据，格式 v-model=“变量名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修饰计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    
</head>
<body>
  <div id="app">
 
    <input type="text" v-model="n1">
    <select v-model="opt"> 

      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
   
    </select>
      <input type="text" v-model="n2">
      <input type="button" value="=" @click="calc">
      <input type="text" v-model="result">
    
  </div>
  <!-- built files will be auto injected -->
<script>
    var vm = new Vue({

      el: '#app',
      data:{

        n1:0,
        n2:0,
        result:0,
        opt:'+'  //默认值
        
      },
      methods: {
        calc() {//计算器的方法
          //逻辑
          switch(this.opt){

            case'+':
            this.result = parseInt(this.n1) + parseInt(this.n2)
            break;
            case'-':
            this.result = parseInt(this.n1) - parseInt(this.n2)
            break;
            case'*':
            this.result = parseInt(this.n1) * parseInt(this.n2)
            break;
            case'/':
            this.result = parseInt(this.n1) / parseInt(this.n2)
            break;
          }
         
        }
  }
})
</script>
</body>
</html>

11、v-once，进入页面时只能渲染一次，以后不再渲染。如果用到事件中也只执行一次（@click.once=“show”）

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="box">
    	<div v-once>{{msg}}</div>
	</div>
 
	<script type="text/javascript">
		new Vue({
		    el:"#box",
		    data:{
	            msg:"hello" 
		    }
		})
	</script>
</body>
</html>

12、v-pre，把标签内的元素原样输出

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-pre>欢迎---{{msg}}</div>
</div>
	<script type="text/javascript">
	    new Vue({
	        el:"#box",
	        data:{
	            msg:"你好"
	        }
   		})
	</script>
</body>
</html>

13、v-cloak，防止闪烁

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-cloak=''>欢迎---{{msg}}</div>
</div>
	<script type="text/javascript">
	    new Vue({
	        el:"#box",
	        data:{
	            msg:"hello"
	        }
   		})
	</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/ght886/article/details/87529809
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022