Vue 知识整理—03-指令

指令：增强元素标签的功能

1.  v-text  &  v-html

相同点：

　　作用：都是替换使用该指令的元素的内容

区别：

　　v-text 是文本输出，显示的格式字符串形式

　　v-html 是 html 格式输出

       注意：尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

   

        
        
{{str}}
        

        
我是p标签中的内容
        
我是p标签中的内容
        

        
        
我是p标签中的内容
    
    
    

2.  v-if  &  v-show 相同点： 　　切换元素的显示和隐藏（根据表达式的 bool 值判断是否要渲染） 区别： 　　v-if 是移除 添加 　　v-show 是显示和隐藏  display：none 使用场景: 　　v-if 需要一次渲染的时候 　　v-show 频繁切换的时候使用

　　（v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。）

  
  
  
if="flag" class="text-danger">v-if
  
else>v-else

  
  
v-show

  

3.  v-on

作用：

　　在 vue 中使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

语法：

　　v-on : 事件名.事件修饰符 = “ fn ( ) ” v-on 可以简写为 @

　　　　说明：fn ( ) 是 methods 中的方法名

 注意：如果需要使用事件对象，固定写法 $ event

事件修饰符：prevent  once 

• . once - 只触发一次回调。

• . prevent - 调用 event.preventDefault()。

p

        
        
        增加 1
        
        增加 1
        
        增加 1
        
        执行fn1方法
        
        执行fn2方法
        

        
        for="(item, index) in items">执行fn3方法
        
        只执行一次

        
上面的按钮被点击了 {{ count }} 次。
    
    
    

4. v-bind

作用：可以绑定标签上的任何属性

语法：v-bind:属性名称=“数据名称” 简写 v-bind 去掉即可#### 绑定src和id属性

html
  

        
        
        
内容
    
    
    

#### 绑定class类名

对象语法和数组语法

##### 对象语法

如果isActive为true，则返回的结果为 `
`

css
 .active {
            color: red;
 }


html
 

        

            hei
        
        点击切换类名
    


js
  
    

##### 数组语法

渲染的结果 `
`

html

    hei

  



#### 绑定style

对象语法和数组语法

##### 对象语法

渲染的结果


html
 

        

            文本内容
        
    
    
    
##### 数组语法

html
abc

#### 简化语法

html

5.