vue 基础

 Vue的基本使用步骤

    1、需要提供标签用于填充数据

    2、引入vue.js库文件:

    3、可以使用vue的语法做功能了

    4、把vue提供的数据填充到标签里面

差值表达式

    
        {{msg}}
        {{1 + 2}}
        {{msg + '----' + 123 }}
    
    



差值表达式会有闪现问题,解决方式:
      v-cloak指令的用法
         1、提供样式
                   [v-cloak]{
                       display: none;
                     }
        2、在插值表达式所在的标签中添加v-cloak指令
           背后的原理：
              先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
 





    
    
    
    
    
    



    
        {{msg}}
        {{1 + 2}}
        {{msg + '----' + 123 }}
    
    


        

 指令

  1、v-text   指令用于将数据填充到标签中，类似插值表达式,没有闪动问题

// 1、v-text   指令用于将数据填充到标签中，类似插值表达式,没有闪动问题

     

 2、v-html   指令用于将HTML片段填充到标签中，但是可能有安全问题,容易产生跨站脚本攻击

//2、v-html   指令用于将HTML片段填充到标签中，但是可能有安全问题,容易产生跨站脚本攻击

     

 3、v-pre    指令用于显示原始信息,跳过编译过程

//3、v-pre    指令用于显示原始信息,跳过编译过程

     {{msg}}

 4、v-once   指令用于显示内容后不再具有响应式功能,如果显示的信息后续不需要再修改，可以使用v-once，提高性能

//4、v-once   指令用于显示内容后不再具有响应式功能,如果显示的信息后续不需要再修改，可以使用v-once，提高性能

     {{info}}

  5、v-model  指令用于双向数据绑定:从页面到数据,从数据到页面,双向修改数据

         即修改输入框内容会改变数据,修改数据也会改变输入框内容

 //5、v-model  指令用于双向数据绑定:从页面到数据,从数据到页面,双向修改数据

    1.{{msg}}
    
         2.
    

 6、v-on     指令用于事件处理  v-on:事件类型=""即v-on:click="",也可写为:@click=''

(1)如果事件直接绑定函数名称，默认会传递事件对象作为事件函数的第一个参数

(2)如果事件绑定函数调用，事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是 $event (固定写为$event)

//6、v-on     指令用于事件处理  v-on:事件类型=""即v-on:click="",也可写为:@click=''

	点击
	点击1
	handle1
	handle2
	
		
		handle3
	
	
		
		handle4
	

7、v-on:keyup    指令为键盘中回车按钮事件       v-on:delete   指令为键盘中删除按钮事件 8、事件绑定-自定义按键修饰符

     规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

9、v-bind:href="url"    指令为动态属性绑定,动态处理属性,可简写为:href="url"

//9、v-bind:href="url"    指令为动态属性绑定,动态处理属性,可简写为:href="url"

     a1百度
     a2百度

样式绑定 样式绑定相关语法细节：
    一.class类名
        1、对象绑定和数组绑定可以结合使用
        测试样式
        2、class绑定的值可以简化 *** 作
            arrClasses: ['active','error'],
            objClasses: {
              active: true,
              error: true
            }
        3、默认的class会保留 

    
    
    
    
    
    



    
        
            测试样式
        
        切换
    
    
    

    
    
    
    
    
    



    
        
            测试样式
        
        切换
    
    
    

    二.style样式

    
    
    
    
    
    



   
        
        
        
        切换
    
    

  10、v-if        v-if 控制元素是否渲染到页面

分支结构:

        用于 if 条件判断,类似于js,控制元素是否渲染到页面

        v-if  

        v-else-if

        v-else

//10、v-if        v-if 控制元素是否渲染到页面

	=90'>优秀
	=80'>良好
	60'>一般
	比较差

11、v-show      指令为控制元素样式是否显示 display:none(已经渲染到了页面)

	测试v-show
	点击

12、循环结构:遍历数组 v-for   v-key v-key      用于帮助Vue区分不同的元素,提高性能,添加唯一标识符,可简写为:key

	水果列表
	
		{{item}}
		{{item + '---' + index}}
		
		
			{{item.ename}}
			-----
			{{item.cname}}
		

	

循环结构:遍历对象 v-for和v-if可以结合使用用于遍历对象

 	
 	{{v + '---' + k + '---' + i}}
 	{{v + '---' + k + '---' + i}}
 
 

 循环小案例:选项卡切换

	
		
		
		
		
		
		
	

	
		
			
				
				
					{item.title}}
				
				
				
					
				
			
		
		
	

表单基本 *** 作

表单域修饰符:

      1.number : 转换为数值

      2.trim : 去掉开始和结尾的空格

      3.lazy : 将 input 事件切换为 change 事件,失去焦点时触发

	
	
	
	{{msg}}
	点击

 自定义指令

全局指令 : inserted(不带参数) ; bind(带参数)

局部指令(只能在本组件中使用,应用范围是有限制的) : directives

// 全局指令:inserted


	
	

//全局指令 - 带参数: bind


	
	

//  局部指令 : directives


	
	

计算属性

computed: {

                reverseString: function () {

                    return this.msg.split('').reverse().join('');

                }

            }

	{{msg}}
	{{reverseString}}

计算属性与方法的区别:计算属性是基于依赖进行缓存的，节省性能

methods中的方法进行调用要加(),不存在缓存

	{{reverseString}}
	{{reverseString}}
	
	{{reverseMessage()}}
	{{reverseMessage()}}

侦听器 : watch  

     作用 : 用于处理异步或者开销较大的 *** 作,比如ajax等

	
		名：
		
			
		
	
	
		姓：
		
			
		
	
	{{fullName}}

侦听器小案例:判断用户名是否存在

侦听器

       1、采用侦听器监听用户名的变化

       2、调用后台接口进行验证

       3、根据验证的结果调整提示信息

 

      整体步骤:

       1.通过v-model实现数据绑定

       2.需要提供提示信息

       3.需要侦听器监听输入信息的变化

       4.需要触发的事件 

	
		用户名：
		
			
		
		{{tip}}
	

过滤器:格式化数据-------------全局

语法:

    Vue.filter('过滤器名称', function(value,arg1) {

         过滤步骤

         });

    使用方式:

    1、可以用与插值表达式和属性绑定的方式进行 *** 作

    2、支持级联 *** 作,同时使用多个过滤器

	

	首字母大写 : 
	{{msg | upper}}
	首字母再转换为小写 : 
	{{msg | upper | lower}}

 局部过滤器的使用

	

	首字母大写 : 
	{{msg | upper}}

 过滤器带参数 -----  案例：格式化日期

	{{date | format('yyyy-MM-dd hh:mm:ss')}}

 生命周期

生命周期主要是指:Vue实例对象的生命周期

阶段:挂载(初始化相关属性)->更新(元素或组件的变更 *** 作)->销毁(删除相关属性)

    挂载:beforeCreate / created / beforeMount / mounted*

    更新:beforeUpdate / updated

    销毁:beforeDestroy / destroyed

	{{msg}}
	更新
	销毁

 Vue数组 *** 作

1、变异方法：会影响数组的原始数据的变化。

        push()/top()/shift()/unshift()  向数组追加或删除元素

        splice()删除数组中指定元素

        sort()排序

        reverse()反转数组

2、替换数组:返回新数组,不会改变原数组

        filter()         过滤

        concat()     拼接

        slice()        截取

	
		
			
			添加
			删除
			截取
		
	
	
		{{item}}
	

 修改数组的响应式变化:

修改响应式数据:

        1.Vue.set(vm.items,indexOfltem,newValue)

        2.vm.$set(vm.items,indexOfltem,newValue)

          vm.items ----- 要处理的数组名称

          indexOfltem ------ 要处理数组中的索引

          newValue -----要处理对应的值

*** 作数组 

	
		{{item}}
	

  *** 作数组对象

	{{info.name}}
	{{info.age}}
	{{info.gender}}

 图书管理案例

    
    
    
    
    
    



    
        
            
                图书管理
                
                    
                        
                            编号：
                        
                        
                        
                            名称：
                        
                        
                        提交
                    
                
            
            
                图书总数：
                {{total}}
            
            

                

                    

                        
编号
                        
名称
                        
时间
                        
 *** 作
                    
                
                

                    

                        
{{item.id}}
                        
{{item.name}}
                        
{{item.date | format('yyyy-MM-dd hh:mm:ss')}}
                        

                            修改
                            |
                            删除