前端技术知识梳理（es6、VUE、element UI）——扫盲篇（第三篇）

es6、VUE、element UI（三）

vue重点知识讲解

组件

局部组件
全局组件

自定义指令

局部指令
全局指令

实例的生命周期
路由

element-ui

vue重点知识讲解

组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

局部组件

<div id="app">
            <Navbar></Navbar>
</div>
<script src="../api/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        // 定义局部组件，这里可以定义多个局部组件
        components: {
            //组件的名字
            'Navbar': {
                //组件的内容
                template: '<ul><li>首页</li><li>学员管理</li></ul>'
            }
        }
    })
</script>

运行结果如下：
在这里插入图片描述

全局组件

1.定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

2.引用全局组件

<div id="app">
    <Navbar></Navbar>
</div>
<script src="../api/vue.min.js"></script>
<script src="../component/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

运行结果如下：
在这里插入图片描述

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

局部指令

<div id="app">
   <input v-focus>
</div>
<script src="../api/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        // 局部指令的定义
        directives: {
            // 定义一个局部自定义指令 `v-focus`
            focus: {
                // 当被绑定的元素插入到 DOM 中时……
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        }
    })
</script>

运行结果如下：
在这里插入图片描述

全局指令

1.定义全局指令：directives/focus.js

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted(el) {
        // 聚焦元素
        el.focus()
    }
})

2.引用全局指令

<div id="app">
   <input v-focus>
</div>
<script src="../api/vue.min.js"></script>
<script src="../directives/focus.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

运行结果如下：
在这里插入图片描述

实例的生命周期

在这里插入图片描述
这个案例很清晰，可以一目了然的看到VUE实例的生命周期

<div id="app">
    <button @click="update">update</button>
    <h3 id="h3">{{ message }}</h3>
</div>
<script src="../api/vue.min.js"></script>
<script src="../directives/focus.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        methods: {
            show() {
                console.log('执行show方法')
            },
            update() {
                this.message = '玻璃好上霜'
            }
        },
        //===创建时的四个事件
        beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
            console.log(this.message) //undefined
            this.show() //TypeError: this.show is not a function
            // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
        },
        created() { // 第二个被执行的钩子方法
            console.log(this.message) //床前明月光
            this.show() //执行show方法
            // created执行时，data 和 methods 都已经被初始化好了！
            // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
        },
        beforeMount() { // 第三个被执行的钩子方法
            console.log(document.getElementById('h3').innerText) //{{ message }}
            // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
        },
        mounted() { // 第四个被执行的钩子方法
            console.log(document.getElementById('h3').innerText) //床前明月光
            // 内存中的模板已经渲染到页面，用户已经可以看见内容
        },
        //===运行中的两个事件
        beforeUpdate() { // 数据更新的前一刻
            console.log('界面显示的内容：' + document.getElementById('h3').innerText)
            console.log('data 中的 message 数据是：' + this.message)
            // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
        },
        updated() {
            console.log('界面显示的内容：' + document.getElementById('h3').innerText)
            console.log('data 中的 message 数据是：' + this.message)
            // updated执行时，内存中的数据已更新，并且页面已经被渲染
        }
    })
</script>

运行结果如下：
在这里插入图片描述
点击update按钮后显示如下：

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

<div id="app">
        <h1>Hello App!</h1>
           <p>
                   
            <!-- 使用 router-link 组件来导航. -->
                   
            <!-- 通过传入 `to` 属性指定链接. -->
                   
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                   <router-link to="/">首页</router-link>
                   <router-link to="/student">会员管理</router-link>
                   <router-link to="/teacher">讲师管理</router-link>
               </p>
           
        <!-- 路由出口 -->
           
        <!-- 路由匹配到的组件将渲染在这里 -->
           <router-view></router-view>
    </div>
    <script src="../api/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

// 现在，应用已经启动了！
</script>

运行结果如下：
在这里插入图片描述
点击会员管理

element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建
官网： http://element-cn.eleme.io/#/zh-CN

<!DOCTYPE html>
<html lang="en">

<head>
     
    <meta charset="UTF-8">
     
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>

<body>
     <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
                   <p>Try Element</p>
        </el-dialog>
    </div>
    <script src="../api/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            }
        })
    </script>
    <style>
    </style>
</body>

</html>