v-bind

1.会把双引号里面的东西解析为js表达式
2.单向动态绑定，view←viewmodel←model，即
model中的数据发生变化时，会动态地改变view所呈现的视图

v-bind的简写

<a v-bind:href="url">跳转到主页</a>
可简写为
<a :href="url">跳转到主页</a>
在开发工作中，使用简写形式比较常见

v-model

双向动态绑定，view⇋viewmodel⇋model,即
不仅model中的数据发生变化时，会动态地改变view所呈现的视图，
而且当viewmodel监听到view视图中发生变化时，viewmodel也会把变化的数据传给model进行数据更新
只能应用在表单类元素(输入类)上，即需要有value值,因为v-model是对value值进行操作的

v-on

事件监听，当触发某个事件时，会调用相关的方法。例如：

<button v-on:click="demo">点我触发demo方法<button>

当该按钮触发鼠标点击事件时，调用demo方法

v-on的简写

v-on可用@进行简写，上述代码可简写为:

<button @click="demo">点我触发demo方法<button>

在开发工作中，使用简写形式比较常见

v-if/v-show

二者都用于向dom渲染内容，使用方式如：

<div v-if="isShow">
...
<div>

<div v-show="isShow">
...
<div>

二者异同：
如果isShow方法值为false，即v-show/v-if接到的值为false，那么
v-if下，该div块根本不会参与到dmo的渲染中去
而在v-show下，该div会参与到dmo渲染中去，只是该元素的display被设为了none

v-show下，整个页面只会在一开始时被渲染一次， v-if下，每次切换条件都会进行渲染
考虑到开销，我们可以自然而然地想到，
当切换发生比较频繁时，使用v-show比较合适，
当切换不频繁时，使用v-if比较合适

v-for

<ul>
    <li v-for="p in Persons" :key="p.id">
        <m.name>
    <li>
<ul>

export default {
    name:'People',
    data(){
        return {
            Persons:[
                {id:'001',name:'张星原'},
                {id:'002',name:'庆云'},
                {id:'003',name:'嘉月'},
            ]
        }
    }
}

v-slot

插槽
子组件留出一个位置，以便父组件在其中插入东西，这个位置就叫做插槽

默认插槽

//子组件About
<template>
  <div>
    <h2>我是About的内容</h2>
    <slot></slot>
  </div>
</template>
...
//父组件
<template>
  <div>
      <About>
          <template>
            <div>
                父组件向About的插槽插入了信息
            </div>
        </template>
      </About>
  </div>
</template>

具名插槽

当子组件中的插槽多于一个时，我们可以对插槽进行命名

//子组件About
<template>
  <div>
    <h2>我是About的内容</h2>
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
    <slot name="slot3"></slot> 
  </div>
</template>
...
//父组件
<template>
  <div>
      <About>
          <template v-slot="slot1">
            <div>
                父组件向About的插槽slot1插入了信息
            </div>
          </template>
          
          <template v-slot="slot2">
            <div>
                父组件向About的插槽slot2插入了信息
            </div>
          </template>
          
          <template v-slot="slot3">
            <div>
                父组件向About的插槽slot3插入了信息
            </div>
          </template>
      </About>
  </div>
</template>

作用域插槽

父组件使用子组件的数据，使用的数据通过插槽传递

//子组件About
<template>
  <div>
    <h2>我是About的内容</h2>
    <slot name="slot1" :data1="context"></slot>
  </div>
</template>
...
export default {
    name:'About',
    data(){
        context:'我从About的插槽中来'
    },
}
</script>
//父组件
<template>
  <div>
      <About v-slot:slot1="message" >
          <template>
            <div>
                {{message.data1}}
            </div>
        </template>
      </About>
  </div>
</template>

本例中，子组件About中的context通过v-bind绑定到msg，
当父组件要使用这个插槽时，父组件会先定义一个对象message来收集子组件About传过来的数据，这时data1就会被message对象收集，成为message的一个属性。
然后使用时，父组件通过调用message身上的data1就可以了

指令语法v-xxx总结