vue-指令总结

vue的指令：

v-for,in,key,v-bind,v-model,v-on，v-once，v-cloak,v-html,v-text
v-show,v-on，v-if,v-else-if,v-else,v-pre

1.vue模板语法：使用双花括号
https://cn.vuejs.org/v2/guide/syntax.html

    
{{msg}}
 /*这里为文本插值*/
    双花括号里面的数据解析为普通文本.
    同时里面可以支持js表达式,但不支持语句，同时里面只能出现一个表达式。
    {{number+1}}，{{flag?1:2}}
    可以称之为插值表达式。

2.v-cloak解决插值表达式渲染时闪烁的问题：
https://cn.vuejs.org/v2/api/#v-cloak

 css：
        [v-cloak] {
            display:none;
        }
    html:
        

            {{msg}}
        
    

3. v-text没有闪烁问题，因为他是编译后显示的。

  但是和文本插值还是有区别：
    +++++++++
    {{msg}}++++++
    v-text会忽略标签之间的文本数据。也就是上面的+号

4. v-html
   https://cn.vuejs.org/v2/api/#v-html

    只有v-html可以将html的文本进行解析。
    它更新的是元素的innerHTML，内容按普通的html插入。

5. v-bind
   https://cn.vuejs.org/v2/api/#v-bind

   动态的绑定一个或多个属性，或一个组件prop到表达式。
    在绑定class和style特性时，可使用数组或对象。
    缩写：为冒号 ：

    
    

6. v-on:事件绑定
   https://cn.vuejs.org/v2/api/#v-on

    按钮
    按钮
    缩写： @
    changeValue是定义在methods中的函数。
    事件还有很多事件修饰符：如：
        .stop - 调用 event.stopPropagation()。
        .prevent - 调用 event.preventDefault()。
        .capture - 添加事件侦听器时使用 capture 模式。
    按钮

7. v-model双向数据绑定：
   v-model只能运用在表单中。
   https://cn.vuejs.org/v2/api/#v-model

    

        
{{msg}}
        
    
    模型层定义-->视图层渲染--->视图层修改-->反馈到模型层。

8.vue中样式的使用

    对象和数组在样式中的区别：
        因为对象是无序的，数组是有序的。
        所有有些样式存在覆盖的话，那么数组是确定的。
        后面的覆盖前面，而对象不确定
    使用class样式：
        https://cn.vuejs.org/v2/guide/class-and-style.html

        使用v-bind:
            1.)对象方式：
                
{{msg}}
            2.)数组方式
                
{{msg}}

            3.)三元表达式：在数组里面使用三元表达式。不推荐
                
{{msg}}
                flag定义在data中。
            
            4.）数组中包对象:推荐
                
{{msg}}

    使用内联样式style：
        https://cn.vuejs.org/v2/guide/class-and-style.html
        对象方式：
            
标题
            或者绑定到一个对象中：
                


                data: {
                    styleObject: {
                        color: 'red',
                        fontSize: '13px'
                    }
                }
        数组的方式：
            

9.v-for
https://cn.vuejs.org/v2/api/#v-for

    对数组遍历：items :['a','b','c','d']
        

            

                {{index}}:{{item}}
            
        
    
    对对象遍历：
        obj:{
                name:"zhangxy",
                age:25,
                sex:'男'
        }

        

            {{key}}:{{value}}
        
    类似python一样的，有in操作符
    x  in  10进行遍历

    key只能是string和number类型的。

10. v-if 、v-else、v-else-if
    https://cn.vuejs.org/v2/api/#v-if

    

       
a
       
b
       
c
    

    v-for的优先级比v-if高：
        

        {{ todo }}
        
        上面的代码只传递了未完成的 todos。所以v-if中得不到todo,因此无法渲染任何东西。

11.v-show:

    根据表达式之真假值，切换元素的 display CSS 属性。
    
Hello!

12.v-pre:一般用不到。

   跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
   跳过大量没有指令的节点会加快编译。
   {{ this will not be compiled }}

示例1：

    
    
    
    
    
    
    



    

        

            id
                
            
            名称
                
            
            添加
            搜索
                
            
                
        
       

           

               
id
               
品牌名称
               
添加时间
               
操作
           
           

                

                    
{{item.id}}
                    
{{item.name}}
                    
{{item.time}}
                    
{{item.action}}