vue模板语法
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
1.v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
<p v-if="seen">现在你看到我了</p>
2.v-on 指令，它用于监听 DOM 事件，参数是监听的事件名，在这里click是事件名
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>//简写形式
3.v-bind：如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
<button v-bind:disabled="isButtonDisabled">Button</button>
<button :disabled="isButtonDisabled">Button</button>//缩写形式
4.v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
5.双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
6.修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!--差值表达式-->
<div>{{name + 'lee'}}</div>
<!--vue指令后面跟的值不是字符串而是js表达式,v-text和差值表达式功能一样-->
<div v-text="name + 'lee'"></div>
<!--v-html让标签内容和name绑定,对标签会加粗显示,前2个会原样输出-->
<div v-html="name + 'lee'"></div>
<!--v-on:click=绑定点击事件---> <!--v-on 监听事件简写@-->
<div v-on:click="handleClick"></div>
<!--v-for循环遍历--->
<li v-for="item in list">{{item}}</li>
<!--v-bind 可以省略不写-->
<div v-bind:content="item"
v-for="item in list">
</div>
<!--v-model 代表将v-model的inputValue和vue里面的data的inputValue值进行了双向绑定--->
<input type="text" v-model="inputValue"/>
</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#root',
data:{
name:"<h1>dell</h1>"
}
})
</script>
</body>
</html>
网友评论