提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue: 代码小记

Vue代码 小记
2023-09-27 14:23:58 时间

1.事件派发：子控件->父控件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            <div>message : {{ message | json }}</div>
            <input type="hidden" v-model="message | json" />
            <child-component></child-component>
        </div>

        <template id="child-component">
            <input type="text" v-model="msg" />
            <button @click="notify">添加事件</button>
        </template>
    </body>
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script>

        var app = new Vue({
            el:"#app",
            data:{
                message:[]
            },
            components:{
                'child-component':{
                    template:'#child-component',
                    data:function(){
                        return {
                            msg:''
                        }
                    },
                    methods:{
                        notify:function(){
                            if($.trim(this.msg)){
                                // 派发事件
                                this.$dispatch('child-msg', this.msg, 222);
                                this.msg = '';
                            }
                        }   
                    }
                }
            },
            // 事件
            events:{
                'child-msg':function(msg, data2){
                    this.message.push(msg);
                    console.log(this.message);
                    console.log(data2);
                }
            }
        });

    </script>
</html>
View Code

2.事件广播：父控件->子控件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="msg" />
            <child-component></child-component>
            <button @click="notify">广播事件</button>
        </div>

        <template id="child-component">
            <ul>
                <li v-for="item in messages">
                    录入内容：{{ item }}
                </li>
            </ul>
        </template>
    </body>
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script>

        // 注册组件
        Vue.component('child-component', {
            template:'#child-component',
            data:function(){
                return {
                    messages:[]
                }
            },
            events:{
                'parent-msg':function(msg, data2){
                    console.log(data2);
                    this.messages.push(msg);
                }
            }
        });

        var app = new Vue({
            el:'#app',
            data:{
                msg:''
            },
            methods:{
                notify:function(){
                    if($.trim(this.msg)){

                        // console.log(this.msg);
                        // 广播
                        this.$broadcast('parent-msg', this.msg, 333);
                        this.msg = '';
                    }
                }
            }
        });

    </script>
</html>
View Code

3.ajax

ajax-helper.js
function AjaxHelper() {
    this.ajax = function(url, type, dataType, data, callback) {
        $.ajax({
            url: url,
            type: type,
            dataType: dataType,
            data: data,
            success: callback,
            error: function(xhr, errorType, error) {
                // alert('Ajax request error, errorType: ' + errorType +  ', error: ' + error)
                console.log('Ajax request error, errorType: ' + errorType +  ', error: ' + error);
            }
        })
    }
}
AjaxHelper.prototype.get = function(url, data, callback) {
    this.ajax(url, 'GET', 'json', data, callback)
}
AjaxHelper.prototype.post = function(url, data, callback) {
    this.ajax(url, 'POST', 'json', data, callback)
}

AjaxHelper.prototype.put = function(url, data, callback) {
    this.ajax(url, 'PUT', 'json', data, callback)
}

AjaxHelper.prototype.delete = function(url, data, callback) {
    this.ajax(url, 'DELETE', 'json', data, callback)
}

AjaxHelper.prototype.jsonp = function(url, data, callback) {
    this.ajax(url, 'GET', 'jsonp', data, callback)
}

AjaxHelper.prototype.constructor = AjaxHelper
View Code

server.php

<?php

$op = $_REQUEST;

if(empty($op)){
    $op = 'people';
}
else{
    $op = $_REQUEST['op'];
}

$data = array();

if($op == 'people'){

    $people = array(
        array('name'=>'keenleung', 'age'=>25),
        array('name'=>'keenleung2', 'age'=>26),
    );
    $data = $people;
}

echo json_encode(array(
    'status' => 'success',
    'data' => $data
));
View Code

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            template, simple-table{
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <simple-table></simple-table>
        </div>

        <template id="simple-table">
            <table>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
                <tr v-for="row in rows">
                    <td>{{ row.name }}</td>
                    <td>{{ row.age }}</td>
                </tr>
            </table>
        </template>
    </body>
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script src="ajax-helper.js"></script>
    <script>

        var ajaxHelper = new AjaxHelper();

        var app = new Vue({
            el:'#app',
            components:{
               'simple-table':{
                   template:'#simple-table',
                   data:function(){
                       return {
                           rows:[],
                           // 本地服务器
                           url:'http://www.mysites.com/vue/server.php',
                       }
                   },
                   methods:{
                       getRows:function(){
                           var vm = this;
                           callback = function(data){
                            //    console.log(data);
                               
                               // 设置值
                               vm.$set('rows', data.data);

                               // 获取值    
                               console.log(vm.$get('rows'));
                           }

                           ajaxHelper.get(vm.url, null, callback);
                       }
                   },
                   // 执行方法
                   ready:function(){
                       this.getRows();
                   }
               }
            }
        });
    </script>
</html>
View Code

 

 

 

相关文章