Vue中的指令
- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
- v-bind
- v-model
- v-slot
- v-pre
- v-cloak
- v-once
1 v-text
更新元素的textContent
局部更新能够应用插值语法{{Mustache}}
2 v-hetml
更新元素的innerHTML
内容按一般HTML插入-不会作为Vue模板进行编译
在网站上动静渲染HTML很危险，容易导致XSS攻打
3 v-show v-if v-else v-else-if
条件渲染
v-show 相当于扭转标签的display
v-if 是实在的条件渲染，值为falsy时会将元素从DOM构造中删除
v-else v-else-if 能够与v-if组成一个链式的条件渲染，与日常的if - else代码块有相似的逻辑
4 v-for
列表渲染
基于源数据屡次渲染元素或模块，alias in expressionv-for的默认行为会尝试原地批改元素而不是挪动它们。要强制从新排序元素，须要非凡的attribute key来提供一个排序的提醒
expression:Array Object Number String Iterable
//数组<template> <div id="app"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }}{{ index }}{{ list[index] }} </li> </ul> </div></template><script>export default { name: "App", data() { return { list: ["张三", "李四", "王二"], }; },};</script>//对象<template> <div id="app"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }}{{ index }}{{ list[index] }} </li> </ul> </div></template><script>export default { name: "App", data() { return { list: { a: "张三", b: "李四", c: "王二", }, }; },};</script>//对象数组<template> <div id="app"> <ul> <li v-for="(item, index) in list" :key="index"> {{ item }}{{ index }}{{ item.name }} </li> </ul> </div></template><script>export default { name: "App", data() { return { list: [{ name: "张三" }, { name: "李四" }, { name: "王二" }], }; },};</script>数据初始化：由模板->虚构DOM->实在DOM
key作为虚构DOM中的一个标签属性，如果应用index作为key，在数据更新后新的虚构DOM会编排key不论更新的数据插入的地位，都是从0开始编排
数据更新：新模板->新虚构DOM->Diff算法比拟前后的虚构DOM->实在DOM
在比拟的过程中，如果应用index作为key，先依据key比照前后的DOM节点，因为key的从新编排，导致模板复用率低，并且在复用时还容易产生谬误
如果应用数据的惟一标识作为key，生成新的虚构DOM时依据key来比照，不会有太大变动，只更新变动的局部，无变动的局部容易在key比对后复用
v-for与v-if同时应用时，v-for的优先级高，这意味着会进行列表渲染而后再判断是否渲染
5 v-on
绑定事件监听器
一般标签：监听原生DOM事件
组件：监听自定义事件表达式：v-on:event="handle(param)"
缩写：@
参数：事件处理函数中能够无参数，能够传入多个参数，参数$event为触发的事件，通常能够通过$event.target来获取触发事件的元素
v-on后能够是一个对象触发对个事件 v-on="{event1:handle1(),event2:handle2()}"
5.1 事件修饰符
.stop:调用event.stopPropagation()阻止捕捉和
冒泡阶段中以后事件的进一步流传，不避免任何默认行为的产生.prevent:调用event.preventDefault()阻止
默认事件，例如a标签href跳转，应用@click.prevent能够阻止跳转行为.capture:增加事件监听器时应用capture模式元素产生冒泡时，先触发带有该修饰符的元素，有多个该修饰符，由外而内触发
.self:只当事件是从侦听器绑定的元素自身触发时才触发回调在冒泡阶段，从内触发的事件不会在领有该修饰符的父元素上触发
.{keyCode|keyAlias}:只当事件从特定键触发时才触发回调enter tab delete esc space up down left right ctrl alt shift meta
.native:监听组件跟元素的原生事件组件上的事件默认为自定义事件，须要$emit触发
.once:只触发一次.left:点击鼠标左键触发.right:点击鼠标右键触发.passive:以{passive:true}模式增加侦听器告知浏览器不阻止默认行为，能够进步性能，
事件捕捉->事件冒泡->默认事件
5.2 .sync修饰符
简化父子组件数据的双向绑定
6 v-bind
动静绑定一个或多个attribute，或一个组件prop到表达式
缩写：:
在组件上绑定时，须要在组件内应用props申明后能力应用6.1 class与style绑定
动静的切换class与绑定内联款式
class
//对象模式<div :class="{ active: isActive, base: isBase }"></div>//数组模式 - 可用三元运算符与对象<div :class="['active', isBase ? 'base' : '', { filter: isFilter }]"></div>style
//对象模式 - 能够三元运算<div :style="{ width: activeWidth, height: activeHeight, background: isRed ? 'red' : '', }"></div>//数组模式 - 多个款式对象<div :style="[baseStyle, activeStyle]"></div>Vue会主动的增加浏览器引擎前缀
对象模式的属性值能够是一个数组，增加多个值
6.2 修饰符
- .prop
- .camel
- .sync
.prop:作为一个DOM property绑定而不是作为attribute绑定
<div :textContent.prop="foo"></div>.camel：将kebab-case attribute名转换为camelCase，将-连贯的属性名改为驼峰式
.sync：扩大成一个更新父组件绑定值的v-on侦听器
//不应用.sync的形式//父组件<template> <div id="app"> <Child :msg="msg" @changeVal="change"></Child> <span>{{ msg }}</span> </div></template><script>import Child from "./components/Child.vue";export default { name: "App", data() { return { msg: "你好", }; }, methods: { change(val) { this.msg = val; }, }, components: { Child, },};</script>//子组件<template> <div> <input type="text" :value="msg" @input="change($event.target.value)" /> </div></template><script>export default { props: ["msg"], methods: { change(e) { this.$emit("changeVal", e); }, },};</script>父组件传递数据，并在组件上绑定自定义的事件，子组件props接收数据，触发事件
//父组件<template> <div id="app"> <Child :msg.sync="msg"></Child> <span>{{ msg }}</span> </div></template><script>import Child from "./components/Child.vue";export default { name: "App", data() { return { msg: "你好", }; }, components: { Child, },};</script>//子组件<template> <div> <input type="text" :value="msg" @input="change($event.target.value)" /> </div></template><script>export default { props: ["msg"], methods: { change(e) { this.$emit("update:msg", e); }, },};</script>父组件在传递数据时加上.sync修饰符，不须要绑定事件
子组件触发update:data事件，data为监听的数据
7 v-model
在表单控件或者组件上创立双向绑定
7.1 表单控件绑定
v-model实质是v-bind与事件绑定的语法糖
- text和textarea元素应用
valueproperty和input事件 - checkbox和radio应用
checkedproperty和change事件 - select字段将
value作为prop并将change作为事件
<template> <div id="app"> <p>1.text</p> <div> <input type="text" v-model="text" /><br /> <span>{{ text }}</span> </div> <p>2.textarea</p> <div> <textarea v-model="textarea"></textarea><br /> <span>{{ textarea }}</span> </div> <p>3.checkbox</p> <div> <input type="checkbox" id="jack" value="jack" v-model="checkName" /> <label for="jack">jack</label> <input type="checkbox" id="john" value="john" v-model="checkName" /> <label for="john">john</label><br /> <span>checked:{{ checkName }}</span> </div> <p>4.radio</p> <div> <input type="radio" id="one" value="One" v-model="pick" /> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="pick" /> <label for="two">Two</label><br /> <span>picked:{{ pick }}</span> </div> <p>5.select</p> <div> <select v-model="selected"> <option disabled value="">请抉择</option> <option>A</option> <option>B</option> <option>C</option> </select> <br /> <span>selected:{{ selected }}</span> </div> </div></template><script>export default { name: "App", data() { return { text: "text", textarea: "textarea", checkName: [], pick: "", selected: "", }; },};</script>复选框的绑定能够有两个值true-value和false-value示意选中与未选中
value的值能够进行动静绑定
7.2 组件绑定
自定义组件的v-model
//父组件<template> <div id="app"> <Child v-model="msg" /> <span>{{ msg }}</span> </div></template><script>import Child from "./components/Child.vue";export default { name: "App", data() { return { msg: "hello", }; }, components: { Child, },};</script>//子组件<template> <div> <input type="text" :value="msg" @input="inputVal($event.target.value)" /> </div></template><script>export default { model: { prop: "msg", event: "changeVal", }, props: ["msg"], methods: { inputVal(val) { this.$emit("changeVal", val); }, },};</script>应用model选项能够申明绑定的数据与自定义的触发事件
能够防止复选框中绑定value与checked的抵触
能够与下面介绍的v-bing+事件绑定与.sync修饰符实现的双向绑定比照
7.3 修饰符
.lazy:从input事件触发同步数据转为change事件后同步.number:将用户输出的值转为数值类型.trim:主动过滤用户输出的首尾空白符
8 v-slot
提供具名插槽或须要接管prop的插槽
缩写：#
vm.slots和vm.scopedSlots属性
插槽
9 v-pre
无表达式
跳过这个元素和它子元素的编译过程。
跳过大量没有指令的节点会放慢编译
10 v-cloak
无表达式
次指令放弃在元素上直到关联实例完结编译
作为css的属性选择器，与display:none一起应用，能够防止在页面处呈现插值语法的{{}}
11 v-once
无表达式
只对元素和组件渲染一次，随后的从新渲染，元素/组件及其所有的子节点将被视为动态内容并跳过
对于领有大量动态内容在组件，能够在根元素上增加该指令，晋升渲染的速度