04vue_模板语法_指令

我就是我 2022-05-31 10:28 162阅读 0赞

## 概念和常见指令 ##

指令 (Directives) 是带有 `v-` 前缀的特殊属性。即：vue给HTML元素增加了一些自定义属性，这些自定义是属性是以"v-"开头的属性

v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 \{ \{ Mustache \}\} 插值。

v-html：更新元素的 innerHTML  
v-show：根据表达式之真假值，切换元素的 display CSS 属性。  
v-if：根据表达式的值的真假条件渲染元素（与编程语言中的if是同样的意思）  
v-else：表示否则（与编程语言中的else是同样的意思）  
v-else-if：（与编程语言中的else if是同样的意思）  
v-for：可以循环数组，对象，字符串，数字，  
v-on：绑定事件监听器。事件类型由参数指定。  
v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。  
v-model：在表单控件或者组件上创建双向绑定  
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。  
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

## 示例代码： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<style type="text/css">
    		[v-cloak] {
    		  display: none;
    		}
    	</style>
    	<body>		
    		<div id="app1">
    			
    			<span v-text="msg"></span>
    			
    			<span>{
       {msg}}</span>
    			
    			<div v-html="htmltag"></div>
    			
    			<div v-show="isShow">我是可以看见的div，使用v-show</div>
    			
    			<div v-if="Math.random()>0.5">
    				大于0.5
    			</div>
    			<div v-else>
    			   小于0.5
    			</div>
    			循环数组：
    			<ul>
    				<li v-for="item in arr">{
       {item}}</li>
    			</ul>
    			循环数组：
    			<ul>
    				<li v-for="(item,index) in arr">{
       {index}}:{
       {item}}</li>
    			</ul>
    			循环对象：
    			<ul>
    				<li v-for="(val,key) in obj">{
       {key}}:{
       {val}}</li>
    			</ul>
    			循环对象：
    			<ul>
    				<li v-for="(val,key,index) in obj">{
       {index}}:{
       {key}}:{
       {val}}</li>
    			</ul>
    			循环字符串：
    			<ul>
    				<li v-for="(val,index) in str">{
       {index}}:{
       {val}}</li>
    			</ul>
    			循环数字：
    			<ul>
    				<li v-for="(val,index) in num">{
       {index}}:{
       {val}}</li>
    			</ul>
    			<input type="button" value="测试" v-on:click="func()" />
    			<img v-bind:src="imgsrc" v-bind:style="imgcss" />
    			<input type="text" v-model="inputtxt"  />
    			<span>您在文本框中输入的内容是：{
       {inputtxt}}</span>
    			<span v-pre>{
       { msg }}</span>
    			<div v-cloak>
    			  {
       { msg }}
    			</div>
    			<span v-once>This will never change: {
       {msg}}</span>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="vue.min.js" ></script>
    <script type="text/javascript">
    /*
    v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {
       { Mustache }} 插值。
    v-html：更新元素的 innerHTML
    v-show：根据表达式之真假值，切换元素的 display CSS 属性。
    v-if：根据表达式的值的真假条件渲染元素（与编程语言中的if是同样的意思）
    v-else：表示否则（与编程语言中的else是同样的意思）
    v-else-if：（与编程语言中的else if是同样的意思）
    v-for：可以循环数组，对象，字符串，数字，
    v-on：绑定事件监听器。事件类型由参数指定。
    v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。
    v-model：在表单控件或者组件上创建双向绑定
    v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
    v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
    */
    
    let v1 = new Vue({
    	el:"#app1",
    	data:{
    		msg:"hello vue",
    		htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
    		isShow:true,
    		arr:[12,23,34],
    		obj:{
    			name:"张三",
    			age:12,
    			sex:"男"
    		},
    		str:"hello",
    		num:15,
    		imgsrc:"img/timg2.jpg",
    		imgcss:{"width":"120px","height":"80px"},
    		inputtxt:""
    		
    	},
    	methods:{
    		func:function(){
    			alert('点击了按钮');
    		}
    	}
    });
    
    </script>