您的位置：首页 > 产品设计 > UI/UE

04vue_模板语法_指令

2018-02-21 22:38 337 查看

概念和常见指令

指令 (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">
<!-- v-text -->
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
<!--v-html，就是innerHTML-->
<div v-html="htmltag"></div>
<!--v-show：根据表达式之真假值，切换元素的 display CSS 属性。-->
<div v-show="isShow">我是可以看见的div，使用v-show</div>
<!--v-if：根据表达式的值的真假条件渲染元素-->
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vue vuejs 模板语法 指令
相关文章推荐
新的分享
章节导航