创建实例对象

注意这里的el 和 data都是固定写法 

1 
     
       2     
      
        3         {
    {title}} 4     
      
 5 
     
 6  7  8 

 插值:  我们可以在大括号里插很多东西

1 
     
       2     
      
        3         {
   {1>2?"真的":"假的"}} 4     
      
 5 
     
 6  7  8 

如上我们就会在页面上看到一个结果   写着   假的  双大括号里边是会帮我们自动运算的

指令系统

我们首先来下下面这个例子:

1 
     
       2     
      
        3         {
    {title}} 4     
      
 5     
      切换 6 
     
 7  8  9 

vue给我们提供了很多指令:

1 v-show : 和 v-if 差不多 , 但是会减少很多开销2 v-bind : 绑定标签属性  有简便写法可以直接写个  :3 v-on : 绑定事件  简便写法  @ 4 v-for : 列表渲染 5 v-html : 插入标签 6 v-model : 双向绑定 自适应用表单控件

简易轮播图:

1  2  3  4     
      5      6     16 17 18 19 
     
      20     
      21     
      
       22         
       
{
   {a+1}}
23     
      
24     
      下一张25     
      上一张26 
     
27 28 29 73 74 

计算属性:

双向绑定

1  2  3  4     
      5      6  7  8 
     
       9     
      10     
      
       {
   { getvalue }}
      
11 
     
12 13 36 37 

在线音乐播放 两个版本 如下:

1  2  3  4     
      5      6     15 16 17 
     
      18 
      19     
      
       20         
       
21             
{
   {v.name}}
22         
23     
      
24 
     
25 26 27 28 29 55 56 

用计算属性版本:

1  2  3  4     
      5      6     15 16 17 
     
      18 
      19     
      
       20         
       
21             
{
   {v.name}}
22         
23     
      
24 
     
25 26 27 28 29 60 61 

 创建一个vue项目:

vue init webpack-simple npm install vue-router --save  //安装路由

 父子传值:

给子组件传值首先我们需要给子组件绑定一个属性:
     然后需要在子组件声明他的类型:props:{          test:Number        }然后我们就可以调用了给父组件传值:首先我们给子组件绑定一个自定义方法:
     然后给子组件绑定一个事件登陆{
   {test}}我们写在父组件里边的方法作为第一个参数,我们需要传的数据作为第二个参数 放在我们子组件里用.$emit调用methods:{          test2(){            this.$emit("test2","123")          }        }父组件这里就可以调用我们传过来从参数了:test2(str){            alert(str);          }

 获取当前路径

1 this.$route.path

 传参数的视图:

     
      {
   {data.title}}
     

 拦截器

1 // 拦截器 2 router.beforeEach(function (to,from,next) { 3    if(to.meta.requireAuth){ 4      //要去的url需要登陆才能访问 5       if (store.state.user.token){ 6         next() 7       }else { 8         next({name:'login',query:{backUrl:to.fullPath}}) 9       }10    }else {11       next()12    }13 14 });15 16 17 18 {19       path: '/course/:id',20       name: 'courseDetail',21       component: courseDetail,22       meta:{23         requireAuth:true24       }25 26 27 28 29  var url = this.$route.query.backUrl;30               if (url){31                 this.$router.push({'path':url})32               }else {33                 this.$router.push({path:'/'})34               }