16.Vue②

一、组件（Component）（重点）

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

1、局部组件

创建 01-1-局部组件.html

定义组件

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

　　使用组件

<div id="app">
    <Navbar></Navbar>
</div>

2、全局组件

创建 01-2-全局组件.html

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

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

　　通过script引入组件文件

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

二、实例生命周期

创建 03-vue实例的生命周期.html

主要为created()和mounted()方法。debugger为Vue中的断点

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

<head>
    <meta charset="UTF-8">
    <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">
        hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            created() {
                debugger
                //在页面渲染前执行
                console.log("created...")
            },
            mounted() {
                debugger
                //在页面渲染后执行
                console.log("mounted...")
            }
        })
    </script>
</body>

</html>

三、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

创建 04-路由.html

1、引入js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

2、编写html

<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>

3、编写js

<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({
        el: '#app',
        router
    })

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

四、axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

1.获取数据

<body>
    <div id="app">
        <!-- 把userList数组中的数据进行显示 使用v-for指令 -->
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: {//在data定义变量和初始值
                //定义变量，值空数组
                userList:[]
            },
            created() {//页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
                //创建方法 查询所有用户数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response=>{
                            //resonse就是请求之后返回数据
                            // console.log(response)
                            //通过response获取具体数据，复制给定义空数组
                            this.userList = response.data.data.items
                            console.log(this.userList)
                        })//请求成果执行then方法
                        .catch(error=>{

                        })//请求失败执行catch方法
                }
            }
        })
    </script>
</body>

2、显示数据

<div id="app">
        <!-- 把userList数组中的数据进行显示 使用v-for指令 -->
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
</div>

五、element-ui：

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

创建 06-element-ui.html

将element-ui引入到项目

1、引入css

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、引入js

<!-- import Vue before Element -->
<script src="vue.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js"></script>

3、编写html

<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>

4、编写js

<script>
    new Vue({
      el: '#app',
      data: function () {//定义Vue中data的另一种方式
        return { visible: false }
      }
    })
</script>

posted @ 2021-03-14 15:57 记录人生阅读(72) 评论(0) 收藏举报

刷新页面返回顶部