vue小细节(2)

render: h => h(App)理解：

//ES5：
render: function (createElement) {
    return createElement(App);
}
//ES6:
render (createElement) {
    return createElement(App);
}

//再进一步缩写为：

 
render (h){
    return h(App);
}
//再按照箭头函数的写法就变成：
render: h => h(App);

createElement 函数是用来生成 HTML DOM 元素的（VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数（挂载函数)，渲染成真实 DOM 节点，并挂载到根节点上。）
也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。
因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）

VueRouter:

router.beforeEach((to, from, next) => {
    if(author!="admin"){
        next('/login');
    }else{
          //放行
            next();
    }
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

html中：

<div> 

<router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
    routes: routes    (可缩写为:routes)
) }) 

<!--  // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由
    // 从而让整个应用都有路由功能-->

 const app = new Vue({ router }).$mount('#app') 

   <!-- 现在，应用已经启动了-->

</script>

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

vue里面提供了三大类钩子，两种函数
1、全局钩子

router.beforeEach((to, from, next) => {}

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

2、某个路由的钩子

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

3、组件内钩子

.......

说明：钩子函数的用法：它是和data,methods平级的。

2.1 Vue Bus总线：

const Bus = new Vue()

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

将Bus注入到Vue根对象中，

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

示例代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <c1></c1>
    <c2></c2>
</div>

<script>
    var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
    Vue.component('c1',{ //这里已全局组件为例，同样，单文件组件和局部组件也同样适用
        template:'<div>{{msg}}</div>',
        data: () => ({
            msg: 'Hello World!'
        }),
        created() {
            Bus.$on('setMsg', content => {
                this.msg = content;
            });
        }
    });
    Vue.component('c2',{
        template: '<button @click="sendEvent">Say Hi</button>',
        methods: {
            sendEvent() {
                Bus.$emit('setMsg', 'Hi Vue!');
            }
        }
    });
    var app= new Vue({
        el:'#app'
    })

</script>
</body>
</html>

运行如下：

posted @ 2018-10-18 19:22 goodshred 阅读(235) 评论(0) 编辑收藏举报

刷新页面返回顶部

goodshred

vue小细节(2)

公告