第1章 Vue.js2.0由浅入深：基本用法

https://cdn.jsdelivr.net/npm/vue@2.3.4/dist/vue.js

js:
let app=angular.module('myApp',[])?
app.controller('MyController',['$scope',function($scope){
$scope.msg='Hello World'?
}])?
html:


{{msg}}

js:
new Vue({
el:'#itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
}
})?
html:

{{msg}}

    
    
    
    
    
    
   
 


    
    

        {{ message }}
    
   

//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false?
Vue.config.productionTip=false? //阻止vue启动时生成生产消息

angular中常用的指令：
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if

    
    
    
    
    


    

        用户名：
        

        {{ name }}
    

    
    
    
    
    


    

        用户名：
        

        {{ name }} 

        {{ age }}  

        {{ flag }} 

        {{ nums }} 

        {{ user }}
     

标签，例如

 el: 'div'

　　但是不能关联大的标签例如 否则会报错

[Vue warn]: Do not mount Vue to  or  - mount to normal elements instead.

　　如果在标签里面引用了没有定义的变量，则在页面不显示，在f12调试模式则会报错

• 　　v-for

　　对数组或对象进行循环操作，使用的是v-for，不是v-repeat

　　示例 03.html

    
    
    
    
    


    

        

            
{{value}}
            
            
{{value}}
            
            
{{k}}={{v}}
        
    
    

　　页面显示如下

 　　迭代默认是不加序号的，可以在迭代时添加序号，相当于索引，索引是从0开始的

    
    
    
    
    


    

        

            
            
            
            
            
            
{{index+1}},{{user.id}},{{user.name}},{{user.age}}

        
    
    

　　加序号输出如下

• 　　v-on

　　绑定事件

　　用来绑定事件，用法：v-on:事件="函数"

　　示例04.html

    
    
    
    
    


    

       点我
    
    

　　解析

点我
v-on # 绑定事件
click # 对应的事件是点击事件
="show" # 点击事件调用的是show方法

　　页面显示

 　　下面使用一个方法往数组中添加数据

    
    
    
    
    


    

        
       点我
       向数组中添加一个元素
       

       {{arr}}
 
    
    

　　当我们点击按钮时，调用了add方法，然后使用push往数组添加一个数据，点击一次添加一次

 　　注意：调用实例时需要使用this加对应的方法，如果直接调用则会报错说没有定义

• 　　v--show/v--if

　　用来显示和隐藏元素，v-show是通过display实现，v-if是每次删除重新创建

　　示例05.html

    
    
    
    
    


    

        隐藏
        
        
欢迎来到南京网
    
    

　　页面显示

 　　点击一次就隐藏了

 　　注意：可以两种方法

　　1，调用函数change()点击一次把flag设置成false

　　2，不绑定方法直接在事件里面把flag设置为false

　　如果想要点击隐藏再次点击显示呢？

　　1，change方法取反

change(){
                        this.flag=!this.flag;
                    }

　　2，直接设置flag去取反

flag=!flag

　　对比v-show和v-if的不同

　　v-show通过设置display来隐藏

 　　v-if直接删除div标签来隐藏

 　　四，用户管理

　　练习题：写一个用户管理页面，可以展示用户并且添加和删除用户，用户字段为姓名，年龄，邮箱

　　代码如下06.html

　　注意：使用了bootstrap，query需要下载好放在对应的目录

	
	
	
	
	
	
	


	

		
添加用户
		

			

				姓  名：
				

					
				
			
			

				年  龄：
				

					
				
			
			

				邮  箱：
				

					
				
			
			

				
				
			
		
		


		

			
用户列表
			

				

					
序号
					
姓名
					
年龄
					
邮箱
					
操作
				
			
			

				

					
{{index+1}}
					
{{user.name}}
					
{{user.age}}
					
{{user.email}}
					

                        
						删除
					
				
				

					

						删除所有
					
				
			
		

		
		

			

				

					

						
							×
                        
                        
                        
						
确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？
						
确认要删除所有用户吗？
					
					

						取消
						确认
					
				
			
		


	

　　页面展示

 

 　　代码解析

　　增加用户代码，往列表users里面增加一个字典user，这个字典的取值是从input取出来的

addUser(){
    this.users.push(this.user);
    this.user={};
},

　　删除用户代码，

deleteUser(){
	if(this.nowIndex===-1){ //删除所有
		this.users=[];
	}else{
		this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个
						}
}

　　在点击删除的时候绑定了一个用户index给变量nowIndex

v-on:click="nowIndex=index"

　　如果点击的是删除所有则变量nowIndex的值为-1

 v-on:click="nowIndex=-1"

　　然后则两个删除并不直接调用删除函数而是出状态框，弹出框，在弹出框点击确认才调用删除方法

 　　删除用户确认框要展示本次删除的用户名需要使用以下代码

　　如果能取到值则取值的name属性，如果取不到则取空

{{users[nowIndex]?users[nowIndex].name:''}}

　　而不能使用

{{users[nowIndex].name}}

　　页面加载的时候就报错name没有定义

　　为什么会出现这个报错因为在页面加载的时候nowIndex的值为-1然后使用这个索引去users取值是取不到的，所以报错2.0有这个问题1.0不报错，1.0取不到就取不到了

　　注意：在vue里面判断相等不相等使用以下符号

===
!===

　　课后作业：实现通过复选框选中删除  （未完成不知道怎么写）

　　只知道以下方法可以取到索引值到一个列表

　　五，事件和属性

　　1.事件

　　1.1事件简写

　　v-on:click=“”简写方式@v-on=“”

　　事件简写示例

    
    
    
    
    
    
   
 


    
    

        
        点我
    
   

　　以下两种写法绑定事件对象的效果是一样的

点我
点我

　　1.2事件对象$event

　　以下示例点击按钮显示按钮的文本

    
    
    
    
    
    
   
 


    
    

        
        点我
        Click Me

    
   

　　页面显示

 　　1.3 事件冒泡

　　阻止事件冒泡

　　a)原生js方式

　　示例08.html

    
    
    
    
    
    
   
 


    
    

        

            

                点我
            
        

    
   

　　页面显示

 　　点击按钮一次把按钮的方法和段落p即标签div的方法都调用了

　　阻止冒泡，修改代码

    
    
    
    
    
    
   
 


    
    

        

            

                点我
            
        

    
   

　　页面显示

 　　b）vue方式，不依赖事件对象

　　加一个stop修饰符即可，更加简洁

点我

　　1.4事件默认行为

　　阻止事件默认行为

　　a）原生js方式

　　演示代码如下

    
    
    
    
    
    
   
 


    
    

        

            

                点我
            
        
        

        俺是链接
    
   

　　页面显示

 　　修改传递事件对象event修改以下代码

 俺是链接

study(e){
        console.log('444');
        e.preventDefault();
},

 　　b)vue方法

　　加修饰符

俺是链接

　　1.5键盘事件

　　按下键盘键打印asscii码

　　09.html

    
    
    
    
    
    
   
 


    
    

        
        
       用户名:
       
    
   

　　页面显示

 　　vue的方法

　　代码修改如下09.html

    
    
    
    
    
    
   
 


    
    

        
        
       
       
        用户名:
    
   

　　asscii码为13对应的是回车键

　　所以在按下回车键的时候调用print方法

 　　13不直观只有知道回车的asscii码为13才可以使用，可以使用别名enter

 用户名:

　　效果也是一样的，大部分按键都有别名例如方向上键是up

　　如果没有别名也可以自定义别名，例如字母a-z是没有别名的1.0可以2.0不行

　　在加入以下代码即可，前提是知道按键对应的asscii码

Vue.config.keyCodes={
			a:65,
			f1:112
}

　　注意：f1是键盘上的f1键不是字符f1，因为f1是浏览器的帮助按键会冲突，需要演示f1按键按下的过程需要crtl+f1

　　1.6事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

　　2.属性

 　　2.1属性的绑定和简写

　　模板可以使用{{}}引用vue示例的属性，但是无法在标签内使用这种方法引用，例如我在vue定义了一张图片的url需要在标签内引用

　　10.html

　　不允许这样调用

　　页面报错

 　　需要使用v-bing来引用，修改代码，使用v-bingd绑定，直接使用url调用不需要{{}}

　　简写方法，省略v-bind使用符号:

　　多定义几个变量

 data: {
              url:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
              w:'200px',
              h:'100px'
          }

　　引用

　　2.2 class和style

　　绑定class和style属性时语法比较复杂：

　　示例11.html

	
	
	
	
	


	

		
		
南京网博
  

		
南京网博
  

		
		
南京网博

		
		
南京网博

		
		
南京网博
		
南京网博

		
		
南京网博
		
		
		 
itany

	

　　页面显示

 　　六，模板

　　1.简介

　　Vue.js使用基于HTML模板语法，可以将DOM绑定到Vue实例中的数据

　　模板就是{{ }}，用来数据绑定，显示在页面中

　　也称为Mustache语法

　　2.数据绑定的方式

　　a.双向绑定

　　　　v-model

　　b.单项绑定

　　　　方式1:使用两对大括号{{}},可能会出现闪烁的问题，可以使用v-cloak解决

　　　　　　　必须设置css样式否则不生效

　　　　示例：12.html

	
	
	
	
    


	

       
{{msg}}
 
       
       

       
       

	

　　不使用v-cloak

 　　解析：在创建的时候调用弹出错误，msg没有获得值所以显示原始文档{{msg}}

　　注意：chrome可能演示不出此效果，可以换其他浏览器例如火狐

 created:function(){
                    alert(111)
                }

　　使用v-cloak，需要配合样式使用，否则不生效

	
	
	
	
    


	

       
{{msg}}
 
       
       

       
       

	

　　页面显示

　　　　方式2:使用v-text，v-html

　　两者不同在于一个当成超文本一个可以识别html标签

　　v--once 数据只绑定一次

　　演示12.html

	
	
	
	
    


	

       
       
{{msg}}
 
       
       

       
       

       
{{msg}}
	

　　页面显示

 　　解析：input框内双向数据绑定，其他标签会跟随输入框的文本变化而变化，而设置了v-once的标签只在第一次引用，不再变化

　　v--pre 不编译，直接原样显示

　　如果我们就是需要显示{{}}则使用v-pre相当于其他语言的转义

 
{{msg}}

　　页面显示原始字符

 　七，过滤器

　　1，简介

　　用来过滤模型数据，在显示渲染之前进行数据处理和筛选

　　语法：{{ data | filter1(参数) | filter2(参数)}}

　　2，关于内置过滤器

　　vue1.0中内置许多过滤器，如：

　　currency，upercase，lowercase

　　limitBy

　　orderBy

　　filterBy

　　vue2.0把内置过滤器都删除了

　　如何解决

　　a，使用第三方工具库、如loadash，date-fns日期格式化、accounting.js货币格式化等

　　b，自定义过滤器

　　3，自定义过滤器

　　分类：全局过滤器，局部过滤器

　　3.1 自定义全局过滤器

　　使用全局方法Vue.filter(过滤器ID，过滤器函数)

　　自定义一个全局过滤器，传递一个数字如果大于10则保持原样，如果小于10即是个位数则补0

　　13.html

	
	
	
	
    


	

        
{{18 | addZero }}
        
{{12.345678 | number(3)}}
        
{{currentTime|date}}
	

　　解析：自定义全局过滤器addZero

{{18 | addZero }} # 把18作为参数传递给自定义全局过滤器addZero
Vue.filter('addZero',function(data){
                // console.log(data)
                return data<10?'0'+data:data
            });
# data为10
# 返回为如果data小于10则加一个字符0返回否则返回data

　　同理下面的全局过滤器除了传递原始数字还传递参数n代表取小数点后几位数

 Vue.filter('number',(data,n) => {
                // console.log(data,n)
                return data.toFixed(n)
            });

　　下面过滤器传递当前时间戳显示易理解的日期时间信息

Vue.filter('date',data => {
                // console.log(data,n)
                let d=new Date(data)
                return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
            });

　　3.2自定义局部过滤器

　　局部过滤器只能是vue示例局部使用

　　定义方式和全局过滤器类似

filter:{ // 局部过滤器
                    number:(data,n) =>{
                        return data.toFixed(n);
                    }
                }   

deleteUser(){                         if(this.nowIndex===-1){ //删除所有                             this.users=[];                         }else{                             this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个                         }                     }