1,v-text string
<span v-text=”msg”></span> 相当于 <span>{{msg}}</span>
2,v-html string 相对于innerHtml 更安全
（2）V-show any (display:none/block) 元素一直会被渲染 结构保留
3，v-for 循环数组
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
v-for 循环对象
<li v-for =”(item ,index)in items”>
{{index}}-{{item}}
</li>
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
<li v-for=”(value,name,index)in object”></li>
{{index}}-{{name}}-{{value}}
</li>
V-on 缩写"@"
修饰符：
事件修饰符：
1 .stop调用event.stopPropagation()
多个元素叠交，都要触发事件，点击一次会出发多个，运用在不需要触发父级和父父级事件的元素中
<div id="app">
<div class="outer" @click="outer-click">
<div class="middle" @click="middle-click">
<button @click ="inner-click"> 点击我</button>
</div>
</div>
</div>
outer-click (){
console.log('outer')
}
middle-click(){
console.log("middle")
}
inner-click(){
console.log('inner')
}
.stop如果放在middle里面，那么输出结果为：
inner： 这是最里面的Button
middle:这是中间的Div
2 .prevent 相当于javascript的event.preventDefault()事件
<a href=”” @click.prevent=””>点击</a> 取消默认事件（链接跳转）
3 .self 只当事件是从侦听器绑定的元素本身触发时才触发回调。作用：不让子元素的事件触发自己绑定的事件，但是不会阻止冒泡！
<div id="app">
<div class="outer" @click="outer">
<div class="middle" @click.self="middle">
<button @click="inner">点击我(^_^)</button>
</div>
</div>
</div>
.self如果放在middle里面，那么输出结果为：
inner： 这是最里面的Button
outer: 这是外面的Div
4 .capture
打乱冒泡顺序，用以下代码为例，原文链接： https://blog.csdn.net/weixin_43873005/article/details/89501985
发生click事件时会优先去找你可以传递到的所有父元素中最后一个有.capture的元素（这里可以传递到middle和outer，最有一个有.capture的元素是outer），然后优先执行这个元素的事件，紧接着执行倒数第二个有.capture的事件（middle），最后再按照正常的冒泡顺序从自己开始往上执行未经执行的父元素的click事件
<div id="app">
<div class="outer" @click.capture="outer">
<div class="middle" @click.capture="middle">
<button @click="inner">点击我(^_^)</button>
</div>
</div>
</div>
运行结果
outer: 这是外面的Div
middle: 这是中间的Div
inner： 这是最里面的Button
5 .native 监听组织根元素的原生事件
6 .once点击事件将只会触发一次
7 .passive滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况
按键修饰符：
.enter 回车
.tab 制表空格键
.delete (捕获“删除”和“退格键”)
.esc 退出
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键
系统修饰符
.ctrl .alt .shuift .meta
keyup和click鼠标点击触发的区别 键修饰符，键代码
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
V-model
修饰符：
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步（除了上述输入法组合文字时）。你可以添加lazy修饰符，从而转变为使用change事件进行同步（也就是全部输入完了之后你按下enter健或者是其他触发事件时才会改变msg数据的值：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。
.trim
如果你要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：
<input v-model.trim="msg">
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
V-bind 缩写（“:”）
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
动态绑定组件 并动态调用组件中的方法
<div class="search">
<group>
<calendar
@on-change="onChange"
show-popup-header
class="searchDate"
v-model="calendarDate"
title
disable-future
></calendar>
</group>
</div>
<component :is="type" :ref="ComChlick"></component>
methods: {
onItemClick(){
if(this. type==="departMent"){
this.type="rankingCenter"
this.ComChlick="rankingCenter"
}else if(this.type ==="rankingCenter" ){
this.type ="departMent"
this.ComChlick="departMent"
}
},
onChange(val){
this.time=val
if(this.ComChlick === "departMent"){
this.$refs.departMent.query()//调用子组件方法
}else if(this.ComChlick === "rankingCenter"){
this.$refs.rankingCenter.rankQuery()
}
},
},
修饰符：
1 .prop
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
2 .sync
<text-document v-bind:title.sync="doc.title"></text-document>
<text-document v-bind.sync="doc"></text-document>
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
v-solt 插槽 https://segmentfault.com/a/1190000012996217 链接 关键点 子组件要在父组件中注册
并写：
1
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
</div>
<child>
子组件中引入
匿名插槽
<slot></slot>
或者：
具名插槽
<slot name="up"></slot>
2
父组件
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
子组件：
<slot :data="data"></slot> return { data:[ ]}
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
<div class="itany">
<input type="text" v-model="msg">
<!-- v-pre 原样输出-->
<p v-pre>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
msg:"hello vue"
}
})
</script>
v-clock 不需要表达式
<div class="itany">
<p v-cloak>{{mag}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
data:{
mag:'hello Vue'
},
beforeMount:function(){
alert(111);
}
})
</script>
注释：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，
这个指令保持在元素上直到实例关联结束和CSS规则如[v-clock]{display:none}
<div v-cloak> {{ message }} </div>不会显示，直到编译结束。
