一、vue简绍

　　1. Vue.js是什么

　　   Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e。 版本分为v1.0 和 v2.0　　

　　2、Vue.js的特点

　　　　1、 是一个构建用户界面的框架

　　　　2、是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定

　　　　3、数据驱动+组件化的前端开发（核心思想）

　　　　4、通过简单的API实现**响应式的数据绑定**和**组合的视图组件**

　　　　5、更容易上手、小巧

　　3、为什么要学Vue.js

　　　　1、简单、易学、更轻量

　　　　2、 指令以v-xxx开头，好记

　　　　3、 + HTML代码+JSON数据，再创建一个vue实例

二、vue语法格式介绍

js:		new Vue({			el:'#itany', //指定关联的选择器			data:{ //存储数据				msg:'Hello World',				name:'tom'			},			methods:{//存储方法				showme:function(temp){
    　　　　　　　　　　　　　　　　　　　　alter(temp)				}}		});	html:		
     
      		   {
    {msg}}    //两对大括号{
    {}}称为模板，用来进行数据的绑定显示在页面中		
     

三、安装vue-devtools插件，便于在chrome中调试vue

    
                      
      
               {
     {msg}} 
           
      
    
        {
     {msg}}    

 

四、Vue常用指令

　　1、v-model：双向数据绑定，一般用于表单元素

    
                      
          
          
      
               用户名：
               
       
        {
     {name}} 
       
        {
     {age}} 
       
        {
     {flag}} 
       
        {
     {nums}} 
       
        {
     {user}}    
      

 

　　2、 v-for：对数组或对象进行循环操作（：在vue1.0中提供了隐式变量，如$index、$key，在vue2.0中去除了隐式变量，已被废除）

    
                      
      
        
               
       
            
                    
                    
                    
                    
          //循环体如果是个数组，v代表的是数值，k代表的是索引值            
         //循环体如果是个字典，v代表的是值，k代表的是键            
                    
                    
        
                {
     {index+1}},{
     {user.id}},{
     {user.name}},{
     {user.age}}            
        
       
    
      

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

    
                      
      
        
               
       点我        
       向数组中添加一个元素        
       
        {
     {arr}}        
       
                
       鼠标经过        
       鼠标双击    
      

 

　　4、v-show/v-if ：用来显示或隐藏元素，(v-show是通过display实现，v-if是每次删除后再重新创建)

    
                      
      
        
               
               
       隐藏 #flag=!flag表示对flag进行取反        
       
        
       
        欢迎来到南京网博
       
    
      

　　5、v-text和v-html ：用来显示标签文本

    
              
              
      
        
       
{
    {temp}}
        
               
       
        
       
        {
    {temp+'我不相信！！'}}
       
        
       
        {
    {temp2?888:999}}
       
    
      

 

　　6、v-if\v-else指令：根据表达式的真假值，动态地插入、移除元素

    
                  
      
        
       
老师来了是889977689999999
        
       
65554567677777
    
      

 

　　7、v-bind指令：绑定元素的属性，可以动态改变

    
          
          
                  
      
        
        baidu        
       baidu2    
      

 

 五、vue+boostrap练习

    
                  
                      
      
        
       
添加用户
        
       
            
        
                
         姓  名：                
         
                    
                          
         
            
        
            
        
                
         年  龄：                
         
                    
                          
         
            
        
            
        
                
         邮  箱：                
         
                    
                          
         
            
        
            
        
                
                         
                     
        
        
       
        
       
        
       
                    
         用户列表
        
                    
                         
                              
序号
                              
姓名
                              
年龄
                              
邮箱
                              
操作
                         
                    
                    
                         
                              
{
    {index+1}}
                              
{
    {user.name}}
                              
{
    {user.age}}
                              
{
    {user.email}}
                              
//data-toggle表示的是行为是model模态对话框，data-target表示的是弹出模态对话框的目标                        删除                    
                         
                         
                              
                        删除所有                    
                         
                    
               
        
       //固定写法,模态对话框里面都是包裹三次，model》model-dialog》model-content》然后再写模态对话框的头部和身体数据        
       
            
        
                
         
                    
          
                        
           //ata-dismiss="modal"取消模态对话框，class="close"表示叉 × //通过？ :进行if/else判断，因为当js代码加载到这里时此时的nowindex的值默认为-1，所以user[nowindex]是取不到值的，如果娶不到值就为空                        
           
确认要删除用户：{ {users[nowIndex]?users[nowIndex].name:''}} 吗？
                        
           
确认要删除所有用户吗？
                    
          
                    
          
                        
           取消                        
           确认                    
          
                
         
            
        
        
       
    
      

 

六、事件和属性详解

　　1、 事件

　　　　1、 事件简写

　　　　　　v-on:click=""  ----简写方式 @click=""

　　　　2、事件对象$event  

　　　　　　包含事件相关信息，如事件源（target）、事件类型（type）、偏移量 （offsetx）、、、、

　　　　　　示例：

    
                      
      
        
       点我        
       点我        
       
        
       Click Me//vue中的$event等价于js中的event对象    
      

 

　　　　3、 事件冒泡(当你在一个元素中触发一个事件时这个事件会传播，默认时向上传播，这就是冒泡)

　　　　　　阻止事件冒泡：

      　　　　 　　  方式1：原生js方式，依赖于事件对象

       　　　　  　　方式2：vue方式，不依赖于事件对象（@click.stop，通过修饰符来完成）

　　　　　　示例：

    
                      
      
        
       
            
        
                
         //$event是个事件对象                点我//通过vue方式解决事件冒泡，不依赖于事件对象，会自动调用stopPropagation()方法            
        
       
        
       
        
               
       俺是链接    
      

 

　　　　4、 事件默认行为

    　　　　  阻止默认行为：

       　　　　　　方式1：原生js方式，依赖于事件对象

　　　　　　　　方式2：vue方式，不依赖于事件对象（@click.prevent，通过修饰符来完成）

　　　　　　示例：

    
                      
      
            
       
        
               
       俺是链接    
      

 

　　　　5、 键盘事件

　　　　　　回车键：@keydown.13 或@keydown.enter。。。

　　　　　　上键：@keydown.38 或@keydown.up。。。。

　　　　　　 默认vue2.o没有@keydown.a/b/c这26个英文字母的事件，但是可以自定义键盘事件，也称为自定义键码或自定义键位别名

　　　　　　示例：

    
                      
      
        
               
                       
               
               
               
               
               用户名：
                       
               
       只触发一次    
      

 

 

　　　　6、 事件修饰符  

　　　　　　stop - 调用 event.stopPropagation()。

　　　　　　prevent - 调用 event.preventDefault()。

　　　　　　capture - 添加事件侦听器时使用 capture 模式。

　　　　　　self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

　　　　　　{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

　　　　　　native - 监听组件根元素的原生事件。

　　　　　　once - 只触发一次回调。

　　　　　　left - (2.2.0) 只当点击鼠标左键时触发。

　　　　　　right - (2.2.0) 只当点击鼠标右键时触发。

　　　　　　middle - (2.2.0) 只当点击鼠标中键时触发。

　　　　　　passive - (2.3.0) 以 { passive: true } 模式添加侦听器

　　2、属性

　　　　1、属性绑定和属性的简写   

　　　　　　v-bind 用于属性绑定， v-bind:属性=""

　　 　　　　属性的简写：v-bind:src="" 简写为 :src=""

　　　　　　示例：

 

　　　　2、 class和style属性

　　　　　　示例：

    
                          
      
        
               
         
               
        
               
               
               
               
               
               
               
               
               
                       
                 
       
itany
         
       
itany
    
      

 

七、 模板

　　1、 简介

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

　　　　2、模板就是{

{}}双大括号，用来进行数据绑定，显示在页面中。{

{}}也称为Mustache语法

　　2、 数据绑定的方式

　　　　1、双向绑定：v-model

　　　　2、单向绑定   

　　　　　　方式1：使用两对大括号{

{}}，可能会出现闪烁的问题，可以使用v-cloak解决，就是数据没显示出来那个双大括号不要显示

　　　　　　方式2：使用v-text、v-html

　　3、其他指令

　　　　v-once 数据只绑定一次

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

　　4、示例：

    
                          
      
        
          //数据的双向绑定        
       
aaa{
    {msg}}
  //数据的单项绑定        
       
aaa{
    {msg}}
                
       
        
       
        
       
{
    {msg}}
  //只是显示一次编译的数据        
       
{
    {msg}}
//比如我就想显示两个大括号和数据，就可以不用编译    
      

 

 

八、 过滤器

　　1、 简介

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

    　　　语法：{

{ data | filter1(参数) | filter2(参数)}} #也可以不用传递参数

　　2、关于内置过滤器

   　   　1、 vue1.0中内置许多过滤器，如：currency、uppercase、lowercase limitBy、 orderBy、 filterBy

　　  　2、vue2.0中已经删除了所有内置过滤器，全部被废除

　　 　 3、 解决办法：

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

　　　　　　2、使用自定义过滤器

　　3、 自定义过滤器

　　　　1、 自定义全局过滤器

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

　　　　2、自定义局部过滤器   

　　　　　　自定义局部过滤器和自定义全局过滤器的方式相同，只不过他们俩编写的位置不同而已，引入方式都是一样的。

　　4、示例：

    
                      
      
        
                       
               
       
{
    {
    12.345678 | number(2)}}
        
               
       
{
    {currentTime | date}}