Vue day5 案例

发表于 | 更新于: | 分类于 | | 热度 ℃

案例分布

  1. 父子组件直接传值
  2. 路由基础使用
  3. webpack-study

一、 父子组件直接传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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>
    <!-- 1.引包 -->
    <script src="./lib/vue-2.5.17.js"></script>
</head>

<body>
    <div id="app">
        <!-- 4.调用 -->
        <!-- 6.: 绑定数据-->
        <!-- 11. @添加点击事件绑定函数-->
        <msg :yf="yhf" @cl="getData"></msg>
    </div>

    <!-- 外部板块 -->
    <template id="tmp">
        <div>
            <!-- 8.在模板调用 -->
            <h1>这是一个子组件---{{yf}}</h1>
            <!-- 13.创建一个按钮用来调用传值函数 -->
            <input type="button" value="点击给父组件传值" @click="setData">
        </div>
    </template>

</body>
<script>
    // 2.创建子组件
    let msg = {
        template: '#tmp',
        // 7.定义父组件拿过来的数据
        props: ['yf'],
        // 9.定义子组件的数据
        data() {
            return {
                msgData: '这是子组件传给父组建的，我是儿子'
            }
        },
        methods: {
            // 14.定义函数用来给父组件传值
            setData(){
                this.$emit('cl',this.msgData)
            }
        }
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            // 5.定义父级数据
            yhf: '这个父组建，我是你爸爸',
            // 10.定义一个空字符串接收数据
            msData: ''
        },
        methods: {
            // 12.定义函数接收子组件的数据 data 是传过来的数据
            getData(data){
                this.msData = data
                console.log(this.msData);
            }
        },
        components: { // 3.添加组件
            msg
        }
    })
</script>

</html>

二、路由基础使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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>
    <script src="./lib/vue-2.5.17.js"></script>
    <!-- 1. 引 vue-router 包 -->
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
    <div id="app">
        <!-- 5.调用路由 -->
        <!-- 渲染路由标签 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 渲染路由容器 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 2.创建组件 登录和注册组件
    let login = {
        template: "<h1>这是登录组件，点击登录</h1>"
    }
    let register = {
        template: "<h1>这是注册组件，点击注册</h1>"
    }

    // 3.创建路由
    let router = new VueRouter({
        routes: [{ //设置路由主页重定向
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    })

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router //4.挂载路由
    })
</script>

</html>

三、webpack-study

1.案例说明

  1. 学习 webpack
    • 安装
    • 基础使用
    • 打包
  2. 学习 webpack 的webpack-dev-server
    • 安装
    • 自动打包
    • 配置
  3. 学习 webpack 的html css等打包配置

2.第三方插件

3.项目地址

-------------本文结束感谢您的阅读-------------
0%