Vue学习笔记——Vue个人小结

版权声明：Stephen-James的学习笔记 https://blog.csdn.net/guanxiaoyu002/article/details/81115380

1、 Vue.directive('自定义标签名称，如v-stephen', function(el,binding){

        el.style='color:'+binding.value;

     })

2、Vue.extend()：定义的是静态标签，没有传递任何参数

     写法两种：

          (1). 定义标签法：<author></author>      // 不带任何属性

          (2). 挂载在普通标签中：<div id＝"author"></div>     // 普通标签中

上述两种方法定义静态标签必须使用

new authorExtend().$mount('#author'); //普通id法

 

new authorExtend().$mount('author'); //标签法

对标签进行初始化

 

JS:

var authorExtend = Vue.extend({

    template:"<p><a    :href="authorUrl">{{authorName}}</a></p>",

        data:function(){

             return{

                authorName:'Stephen',

             authorUrl:'http://www.baidu.com'      // 这里http的传输协议必须加上

         }

    }

})

 

3、Vue.set

Vue.set(app.arr,1,'ddd');

 

4、template标签写在选项（Vue）里，使用``符号括在其中，``是Tab按键上的。

 

5、组件分为全局组件（在JavaScript里定义Vue.comonent(...)）、局部组件（在选项（Vue）里定义的components:{...}）

 

6、组件属性的定义

props:['here']

 

7、父子组件嵌套

var jspang = {

            template:`<div>

                    <p> Panda from China!</p>

                    <city></city>

            </div>`,

            components:{

                "city":city

            }

        }

 

8、component标签

<component v-bind:is="who"></component>

 

9、template标签  

 

<script type="x-template" id="demo3">

 

10、propsData 在全局扩展时进行传递数据

     new header_a({propsData:{a:1}}).$mount('header');

 

11、computed 对原数据进行改造输出（包括格式的编辑，大小写转换，顺序重排，添加符号……）

computed:{

    newPrice:function(){

        return this.price='￥' + this.price + '元';

    }

}

 

12、methods选项中构造器里的原生事件 

<p><btn @click.native="add(3)"></btn></p>

 

13、子路由的配置：

children:[

        {path:'/',component:Hi},

        {path:'hi1',component:Hi1},

        {path:'hi2',component:Hi2},

    ]

 

14、参数传递

1、route.name传值

// router/index.js

routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello

    }

]

//  components/Hello.vue

<p>{{ $route.name}}</p>

 

2、route-link标签传值

// app.vue

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

// router/index.js

{path:'/hi1',name:'hi1',component:Hi1}

// components/Hi1.vue

{{$route.params.username}}

 

15、单页面多路由：一个vue文件中存放多个route-view

// app.vue

<router-view ></router-view>

<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>

<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

 

// route/index.js

routes: [

    {

      path: '/',

      components: {

        default:Hello,

        left:Hi1,

        right:Hi2

      }

    },{

      path: '/Hi',

      components: {

        default:Hello,

        left:Hi2,

        right:Hi1

      }

    }

 

  ]

 

16、url传递参数

// index.js

path:'/params/:newsId/:newsTitle'

 

// app.vue

<router-link to="/params/198/jspang website is very good">params</router-link>

 

//components下vue文件引用

<p>新闻ID：{{ $route.params.newsId}}</p>

<p>新闻标题：{{ $route.params.newsTitle}}</p>

 

正则：path:'/params/:newsId(\\d+)/:newsTitle' // 只允许newsId为数字

 

17、重定向和别名

// index.js

path:'/goback',

redirect:'/'

 

// 别名

path: '/hi1',

component: Hi1,

alias:'/jspang'

 

18、过度动画

<transition name="fade" mode="out-in">

  <router-view ></router-view>

</transition>

 

19、404页面处理

{

   path:'*',

   component:Error

}

 

20、模板中的钩子函数

beforeRouteEnter:(to,from,next)=>{

    console.log("准备进入路由模板");

    next();

  },

beforeRouteLeave:(to, from, next)=> {

    console.log("准备离开路由模板");

    next();

  }

 

21、编程式导航：

methods:{

    goback(){

      this.$router.go(-1); //返回

      this.$router.go(1);//前进

      this.$router.push('/');//返回首页

    }

  }

 

阅读更多