Vue基础指令及其简单的使用

1. v-bind

v-bind 是 vue 中的一个指令，主要用于绑定一个属性，他的语法糖是 v-bind => :

基本使用

简单案例：

        鼠标悬停几秒查看信息
        
        鼠标悬停几秒查看信息

2. v-if

v-if 他的作用是插入/移除一个元素或组件 

简单案例：

    
我是p标签

3. v-for

他可以绑定数据到数组来渲染一个列表

简单案例:

    
        
            {item}} -->
            {{item}}
        
    

4. v-on

它用于监听 DOM 事件

简单案例:

    
        {{num}}
        
        +1
        
        +1
    

5. v-model

该指令可以用来实现双向数据绑定

简单案例:

    
        {{msg}}
        
    

6. v-once

v-once 表示该dom元素只渲染一次，之后数据改变，也不会再次渲染。

简单案例：

    
        {{msg}}
    

7. v-html

在某些时候我们不希望直接输出百度一下这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。

简单案例：

8. v-text

v-text 会覆盖dom元素中的数据，相当于js的innerHTML方法。

简单案例：

aaaa

9. v-pre

直接输出{{message}}这样的字符串 不进行解析

简单案例：

    
        
不使用v-pre:
        
{{msg}}
        
使用v-pre,不会解析
        
{{msg}}