(第一季)Vue2.0-内部指令

github地址

案例地址
github

vue2.0起步

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

下载

vue2.0官网

下载.png

引入到页面

安装web服务器

npm install -g live-server
启动服务:live-server

live-server.png

第一个vue程序(声明式渲染)

    

            {{message}}
    

    

条件渲染(v-if v-else-if v-else v-show)

v-if v-else-if

    

        //v-if绑定isLogin数据源，数据源为true时，页面显示选中的复选框
        

                记住密码
        
         //为false时显示不选中的复选框
        

                 记住密码 
        
          
    
    

v-else-if 2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

        //判断条件
       

            A
        
        

            B
        
        

           C
        
        

           D
        

    

v-show

    

        //true显示false不显示但与if不同的是，v-show无论true还是false，都已经加载了,但v-if是无预加载的.
        

                
        
    

    

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if与v-show的区别？
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表循环(v-for)

简单的数组循环

        

            
            

                {{item}}
            
        
    
    
  

排序

    

        

            
            

                {{item}}
            
        
    
    
    

输出索引序号

            
序号
姓名
年龄
            

                
{{index+1}}
                
{{student.name}}
                
{{student.age}}
            
        

    
 

对象排序

     

            
姓名
年龄
            

                
{{student.name}}
                
{{student.age}}
            
  

    
 

v-for迭代对象

      

            

                {{animal}}
            
        

    
 

键名键值索引显示

     

            

                {{index}} - {{key}} - {{value}}
            
        

    
 

v-text&v-html

    

        {{message}}
        
        
        
        
    
    
 

v-on 绑定事件监听

        本场比赛得分:{{fenshu}}
        

            加分
            
            减分
        
        

            
            
           
        
    

    

全部按键别名

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

按键对应的编码

image.png

v-model 指令

v-model 指令在表单控件元素上创建双向数据绑定。

v-model.png

    

        
原始文本信息: {{message}} 
        
文本框
        
v-model:
        
v-model.lazy:
        
v-number:
        
v-trim:
        
文本域
        
        
多选框绑定一个值
        
        {{isTrue}}
        
多选框绑定一数组
        
        张三
        
        李四
        
        王五
        
{{web_names}}
        
单选框的绑定
        
        男
        
        女
        
你选择的性别是:{{sex}}
        
select列表
        
            请选择网站
            百度
            谷歌
        
        
你选中的网站是:{{selected}}
    
    

修饰符

• .lazy
  懒加载每发生变化时输入框的值与数据进行同步变成鼠标离开时
• .number
  自动将用户的输入值转为数值类
• .trim
  去掉首尾的空格

v-bind指令标签属性赋值

   


    
v-bind实例
    

    

        
        

         
        
郭少华
        

        

            绑定class
        
        

         
        
        正确
        
        错误
        
         

            绑定class中的判断
        
        

                 
        

             绑定class数组
        
        

         
         

            class中的三元运算符
        
        

        
        

            绑定style
        

         
         

                绑定style对象
         

    
    

其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译,直接输出原始值.在标签中加入v-pre就不会输出vue中的data值了。

        
        

            {{message}}
        
    

    

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

 

    渲染完成之后才显示！
 

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

 

        
        
第一次绑定的值:{{message}}
        
        
{{message}}