• Vue_组件


    1.定义方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <title>组件</title>
    </head>
    <body>
    <div id="app01">
        <today-weather></today-weather>
        <my-weather></my-weather>
    </div>
    
    <script>
        // 全局组件定义方法
        Vue.component('today-weather', {
            template: '<div><h1>今天下雨,出不去啦,全局组件</h1></div>'
        })
        var vm = new Vue({
            el: '#app01',
            data: {},
            // 局部组件定义方法
            components: {
                'my-weather': {
                    template: '<div><h1>今天下雨,出不去啦,局部组件</h1></div>'
                }
            }
        })
    </script>
    </body>
    </html>

     2.表行组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <title>表行组件</title>
    </head>
    <body>
    <div id="app01">
        <table border="1">
            <tr>
                <td>编号</td>
                <td>游戏名称</td>
            </tr>
    <!--        表行组件的引用必须用is属性引入-->
            <tr is="my_row1"></tr>
            <tr is="my_row2"></tr>
            <tr is="my_row3"></tr>
        </table>
    </div>
    
    <script>
        Vue.component('my_row1', {
            template: '<tr><td>(1)</td><td>英雄岛</td></tr>'
        })
        Vue.component('my_row2', {
            template: '<tr><td>(2)</td><td>地下城与勇士</td></tr>'
        })
        Vue.component('my_row3', {
            template: '<tr><td>(3)</td><td>英雄联盟</td></tr>'
        })
        let vm = new Vue({
            el: '#app01',
            data: {}
        })
    </script>
    </body>
    </html>

     3.数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <title>组件数据</title>
    </head>
    <body>
    <div id="app01">
        <div>今天的天气是:<my_weather></my_weather></div>
    </div>
    
    <script>
        Vue.component('my_weather', {
            template: '<span>{{today_weather}}</span>',
            // 组件中的数据必须以函数的返回值方式返回
            data: function () {
                return {
                    today_weather: '雨夹雪'
                }
            }
        })
        let vm = new Vue({
            el: '#app01',
            data: {}
        })
    </script>
    </body>
    </html>

     4.可接收参数的组件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <title>可接收参数的组件</title>
    </head>
    <body>
    <div id="app01">
        <test_result :qqq="100"></test_result>
    </div>
    
    <script>
        Vue.component('test_result', {
            // 可以用来接送参数的变量,定义再数组中
            props: ['qqq'],
            // 可以做模板当中使用
            template: '<div @click="testResult">获取到的参数为:{{qqq}}</div>',
            // 也可以再计算属性或者函数当中使用
            methods: {
                testResult: function () {
                    alert(this.qqq)
                }
            }
        })
        let vm = new Vue({
            el: '#app01',
            data: {}
        })
    </script>
    </body>
    </html>

     5.变量传递

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <title>传递变量</title>
    </head>
    <body>
    <div id="app01">
        <div><input type="text" v-model="name"></div>
    <!--    将父组件的变量传递进入子组件-->
        <div>今天的天气是:<my_weather :qqq="name"></my_weather></div>
    </div>
    
    <script>
        Vue.component('my_weather', {
            props: ['qqq'],
            template: '<span>{{qqq}}</span>',
        })
        let vm = new Vue({
            el: '#app01',
            data: {
                name: ''
            }
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    POJ 2661
    POJ 2643
    POJ 2656
    POJ 2612
    POJ 2636
    搭建WordPress个人博客
    【个人笔记】ximo早期发的脱壳教程——手脱UPX壳
    2.1【欢乐向】攻防世界新手逆向刷题被虐哭日常记录
    吾爱破解培训第一课个人笔记
    第五章 计算机组成
  • 原文地址:https://www.cnblogs.com/wangdianchao/p/13307141.html
Copyright © 2020-2023  润新知