指令
指令 (Directives) 是带有
v-前缀的特殊特性。指令特性的值限定为绑定表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM上
- v-if
v-if指令根据表达式的值在DOM中生成或移除一个元素<p v-if="seen">现在你看到我了</p> - v-show
v-show指令根据表达式的值显示或隐藏元素
v-show 不支持<span v-show="seen">hello world</span><template>元素，也不支持v-else注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好 - v-else
v-else指令是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。<span v-if="seen">OK</span> <span v-else>NO</span> - v-else-if
v-else-if指令，同else-if跟v-if和v-else配合使用<span v-if="num===1">1</span> <span v-else-if="num===2">2</span> <span v-else>3</span> - v-once
v-once指令关联的实例，只会渲染一次<span v-once>这个将不会改变: {{ msg }}</span> - v-text
v-text指令更新元素的textContent，可以等同于JS的text属性。
与<span v-text="msg"></span><span>{{msg}}</span>等价 - v-html
v-html指令可以更新元素的innerHTML<div v-html="rawHtml"></div>注：不建议在网站上动态渲染HTML片段，容易导致XSS攻击 - v-pre
v-pre指令编译时跳过当前元素和他的子元素，跳过大量没有指令的标签会加快编译<span v-pre>{{message}}</span><!-- 不编译显示 {{message}} --> <span>{{message}}</span> - v-cloak
v-cloak指令是用来保持在元素上直到关联实例结束。<span>{{message}}</span> - v-for
v-for指令基于源数据重复渲染元素<body> <div id="app"> <ul> <li v-for="item of items">{{item.name}}{{item.price}}</li> <!--使用of 同foreach--> <li v-for="(item,index) in items">{{index}}{{item.name}}{{item.price}}</li> <!--使用in index是一个可选参数，表示当前项的索引--> </ul> </div> </body> <script> new Vue({ el: '#app', data: { items:[ {name:"Thinking in JAVA",price:100.11}, {name:"C ++ Plus",price:77.11}, {name:"Effective JAVA",price:88.11} ] } }) </script> - v-model
v-model指令用来在input,text,等表单控件元素上创建双向数据绑定，根据控件类型v-model自动选择正确的方法，在用户输入事件中更新元素
v-model修饰符<body> <div id="app"> <input type="text" v-model="name"> <span>name:{{name}}</span> </div> </body> <script> new Vue({ el: '#app', data: { name:"" } }) </script>- number
自动将用户的输入值转化为数值类型<input v-model.number="msg"> - lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。<input v-model.lazy="msg"> - trim
自动过滤用户输入的首尾空格<input v-model.trim="msg">
- number
- v-bind 绑定元素特性
v-bind指令用来动态绑定元素特性<!-- 完整语法 --> <input v-bind:type="type">aa <!-- 缩写 --> <input :type="type">aavar app = new Vue({ el: '#app', data: { type:"text" } }) - v-on
v-on指令用于绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句。<body> <div id="app"> <!-- 完整语法 --> <button v-on:click="consoleLog(2)"></button> <!-- 缩写 --> <button @click="consoleLog('hello world')"></button> </div> </body> <script> new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(event) } } }) </script>
网友评论