指令

像 <div v-text='x'> </div> 这种以v-开头的东东就是指令。常见的指令如下：

v-bind

功能：可用于绑定属性，包括外部属性。

<img v-bind:src='x'/>
//可简写成
<img :src='x'/>

v-on

功能：用于事件的绑定

//写法1 ,点击时去执行add函数
<button v-on:click='add'> </button>
//写法2 ,点击时去执行test(1)
<button v-on:click='test(1)'> </button>
//写法3 ,直接在后面写代码
<button v-on:click='n*=2'> </button>

//以上的写法都可以进行简写，用@来代替v-on
<button @click='add' ></button>

v-if

功能：通过v-if,v-else-if,v-else进行条件判断，符合对应条件的元素才会被添加到DOM树中

<div v-if='name==="bob"'>
    Bob
</div>
<div v-else-if='name==="Alice"'>
    Alice
</div>
<div v-else>
    查无此人
</div>

v-show

功能：控制元素的显示和隐藏

//同样，当v-show所接条件为真时才展示div
<div v-show='x>2'>
    展示内容
</div>

插个题外话，既然v-if和v-show都能控制显示与否，那两者有啥区别吗？两者的区别主要是：

v-if 是根据条件成立与否决定是否将对应标签放到DOM树中展示
v-show 则近似于CSS的方式去控制样式的展示。比如 display:none ;display:block

v-for

功能：其实和普通for循环差不多，就是遍历元素，然后每次进行对应操作;
注意：写了v-for一定记得设置key，且传递给key的值应不重复

//例1：对数组遍历 ,arr：数组每个元素 ，index: 对应元素索引
<ul> 
    <li v-for="(arr,index) in Array " :key='index'> </li>
</ul>

//例2：对象遍历 ,value：对象里的每个值 ，Key: 对应的键 ;
<ul> 
    <li v-for="(value,Key) in obj " :key='Key'> </li>
</ul>

看实际代码：

修饰符

stop

功能：用于阻止事件的传播/冒泡

<button @click.stop='add'> 点击</button>

正常情况下，当点击子元素时，点击事件会冒泡到父元素，所以看到了如图所示效果：而当你给子元素的点击事件加上stop之后，就表示这个点击事件就到此为止，不要再往外传播了。如图所示：

prevent

功能：用于阻止默认事件

////@click.prevent='x'就是在阻止默认事件,这里就是阻止跳转到百度界面，然后去执行methods里的x函数代码。
new Vue({
    template:`
        <div>
            <a @click.prevent='x' href='https://www.baidu.com'> baidu </a>
        </div>
    `,
    methods:{
        x(){
            console.log('xx')
        }
    }
})

{keycode||keyAlias}

功能：可用于监听键盘事件

//监听回车键按下的keycode的写法，因为回车键的keycode是13，
new Vue({  
  template:`
    <div>
        <input @keypress.13='y'>
      </div>
  `
  }
})


//第二种keyAlias 的写法，Alias就是别名,把13换成对应按键名
new Vue({  
  template:`
    <div>
        <input @keypress.enter='y'>
      </div>
  `
})

其余的按键修饰符可以到官网链接查找；

.sync

在Vue中如果父子组件想完成数据传递，可以通过v-on结合外部属性来实现。比如常见的组件之间的传值步骤就如下面这个例子一样：

子组件向父组件传值的过程没啥可说，主要是看看父组件的传值和监听事件获取值的代码还是有优化空间的。

//Vue中规定,下面这种写法的代码
:money='total' @update:money="total=$event" 
//可以直接简化成下面的形式
:money.sync='total'

可以观察下简写成.sync的代码需要符合的特点：
1：update冒号后所接的名字需和传递给子组件的props名字一致
2：所监听的事件对应的代码是在修改传递给外部属性的变量的值；

以上~

Vue常用修饰符和指令

指令