Vue.js基础总结

一、Vue使用介绍

Vue不支持IE8，因为使用了ES5的很多特性。可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了。开发版本可以使用vue-devtools检查代码，生产版本不可以使用vue-devtools。

二、vue-router实践练习

1、传参及获取传参

通过$route获取相应参数

    
  
     
    
      
       jack
          
          
          
      
       midy
        //通过to传递参数  
     
  
     
    
        
     
    

2、子路由

路由中设置children，其也是一个数组

    
  
     
    
      
       jack
          
      
       midy
        
     
  
     
    
        
     
    

3、手动访问和传参

this.router.push()方法

    
  
     
    
      
       主页
          
      
       jack
          
      
       midy
          
      路由自动访问  
     
  
     
    
        
     
    

4、命名视图

给router-view定义name属性

    
  
     
    
      
       用户管理
          
      
       帖子管理
        
     
  
     
          //分别为router-view 定义name属性，在下面定义显示内容    
            
        
     
    

5、导航钩子

实现的功能：如果用户在未登录状态下访问"/post"或"/post/more"页面，则会跳转到"/login"页面.

//方法一：通过判断路由的方式
    
  
     
    
      
       主页
          
      
       登录
          
      
       帖子管理
          
        
     
    
//方法二：在路由中设定meta属性
    
  
     
    
      
       主页
          
      
       登录
          
      
       帖子管理
          
        
     
    

三、易错知识点——组件

1、父组件向子组件传递信息时：

在html中定义或者绑定属性的时候要符合kebab-case规则

在js中定义的属性名称如果是"camelCase"规则，则在html定义或者绑定value的时候要用"kebab-case"规则。

Vue.component("child2", {    //在js中用驼峰命名法    props: ["myMessage2"],    template: "
    
     myMessage2: {
   {myMessage2}}
    
"});

注意：下图中的<child></child>才是字符串模板，是通过template生成的，在这里的props需要使用kebab-case形式，在js中使用camelCase形式。

2、prop验证属性

注意：下图所说的"诸如data,computed 或methods等实例属性还无法使用"，指的是子组件自身定义的data,computed,methods属性。而非父组件的相应属性。

3、props中default属性

注意：使用default属性时，在父组件绑定的数据不需要再data函数中赋值。

在组件中的props中,针对String，Number类型中的default，直接对应值。其他类型的default是函数。（如果使用default属性，就不能加上required：true属性）如下：

//son组件的props属性props:{    msg:{      type:String,      default: "abc"    },    num:{      type:Number,      default:10    },    myObj:{      type:Object,      //default为函数      default: function (){        return {name:"joy"}      }    }  }    //parent组件传递的值
    

4、作用域插槽

插槽的数据是子传父的！！！

注：在vue 2.5.0之前，"slot-scope"必须使用到template身上。如下：

//2.5.0之前写法——父组件
    //2.5.0以后版本写——父组件
    //对应的子组件
    

5、动态组件

四、易错知识点——自定义指令

1、全局定义指令：directive！！！

全局指令需要在main.js中去定义，如下：

//mian.js,全局定义中用directive。Vue.directive('focus',{  inserted:function(el){    el.focus();  }})//hello.vue
    

2、局部定义指令：directives！！！

五、易错知识点——路由

1、路由使用对象形式

//通过urlData.*获得相应值
    
     helloworld
    
    
     parent
    
    data(){    return{      urlData:{        hello:'/',        parent:'/parent'      }    }  }

2、路由传递参数（常用此方法！！！）

首先，在router/index.js文件中：

export default new Router({  routes: [    {      //冒号后面跟着参数      path:'/parent/:father',      name:'parent',      component: parent    }  ]})

然后在parent.vue组件

最后，找到parent对应的路由设置组件，配置如下

//router-link的name属性对应的是parent.vue组件的name值.params是传递过去的路由参数
    
     parent
    

注意：这样的传递参数方式，最后的路由形式为：'localhost:8080/parent/father/1'。这种事很常见的路由传递参数。

3、路由嵌套:children

在router/index.js文件中:

export default new Router({  routes: [    {      path:"/",      name:"HelloWorld",      component:HelloWorld    },    {      path:'/parent',      name:'parent',      //重定向，默认进来就显示father组件的内容，在parent组件路由中配置      redirect:"/parent/father",      component: parent,      children:[        {        //这里的path不加'/',直接写名字即可,它会自动补全前面的路径          path:'father',          name:'father',          component:Father        },        {          path:'mother',          name:'mother',          component:Mother        }      ]    }  ]})

在parent组件中:

//这里的to属性值要写完整的路径
    
     father
    
    
     mother
    
    

4、路由高亮

（1）、被选中的路由会带有"router-link-exact-active 、router-link-active"样式，所以可以给激活状态的路由设置样式。

//添加激活样式.router-link-active{color:red;}

注意：此时会有一个问题，对于首页路由"/"，会在同级路由被选中的时候依然会带有router-ink-active类名，这时候需要做在首页路由做修改:

//在router-link上添加exact属性
    
     home
    

（2）router-link-active这个激活类名比较长，对此，我们可以在router/index.js中进行全局配置：

export default new Router({  //全局设置linkActiveClass为acitve,这样激活状态的class就会变为active,相应的样式就可以改为.active{color:red;}  linkActiveClass:"active",  routes: [    {      path:'/',      name:HelloWorld,      component:HelloWorld    },    {      path:'/parent/:father',      name:'parent',      component: parent    }  ]})

六、易错知识点——methods

（1）、箭头函数不可用

注意： 在methods属性中定义的方法不能使用箭头函数，因为此时的this指向的是window，而不是Vue实例。

(2)、

//此处直接调用事件，并没有'()'click me methods:{    showSome :function (event){       //得到的就是鼠标事件        console.log(event)    }}

结果：

(3)、

//此处直接调用事件，并加上'()',但是并没有参数传递![图片描述][4]click me methods:{    showSome :function (event){    //这样得到event就是'undefined'        console.log(event)    }}

结果：

(4)、

//此处直接调事件，如果想获得鼠标事件，传递的参数必须是$event否则就不要传递参数了click me methods:{    showSome :function (event){    //这样得到event就是'鼠标事件'        console.log(event)    }}

结果：

!!! (5)、methods 和 computed 不同使用方式：

computed可以向methods一样传递参数：解决办法是使用闭包

//key是传递的参数computed:{    getTitle(key):function(){        return function(){            return key + "abc"        }    }}

七、易错知识点——select默认选中

1、vue中设置select默认选中：v-model

结果如图所示：

八、易错知识点——v-model

1、一般form表单会使用v-model比较多，实现数据的双向绑定

要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 sth。进而实现了数据双向绑定。

总结：

在给元素添加v-model属性时，默认会把value作为元素的属性，然后把input 事件作为实时传递value的触发事件。

//子组件Vue.component('currency-input', {  template: `                        `})//父组件中调用子组件