13/01 is.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>01</title>
</head>

<body>
    <pre>
    自定义的元素，使用 is 的特性(form 元素，使用 is 示例)
    </pre>
    <div id="app1">
        <hr>
        <table border='1'>
            <tr is="my-component1"></tr>
            <tr is="my-component2"></tr>
        </table>
        <hr>
        <input is="input1" v-model="input1">{{input1}}
        <hr>
        <textarea is="textarea1" v-model="textarea1"></textarea>{{textarea1}}
        <hr>
        <input is="checkbox_bike" v-model="checkbox_bike">{{checkbox_bike}}
        <input is="checkbox_car" v-model="checkbox_car">{{checkbox_car}}
        <hr> 男性：
        <input type="radio" is="radio_sex1" v-model="radio1"/>
        <br /> 女性：
        <input type="radio" is="radio_sex2" v-model='radio1'/>
        {{radio1}}
        <hr>
        <select is="select1" v-model="select1"></select>
    {{select1}}
    </div>
    <script>
    var select1 =Vue.extend({
        template:'<select ><option selected>A</option><option>B</option><option>C</option></select>'
    });
    var radio_sex1 = Vue.extend({
        template:'<input type="radio" checked="checked" name="Sex" value="male" />'
    });
    var radio_sex2=Vue.extend({
        template:'<input type="radio" name="Sex" value="female" />'
    });
    var checkbox_bike = Vue.extend({
        template: '<input type="checkbox" name="Bike">'
    });
    var checkbox_car = Vue.extend({
        template: '<input type="checkbox" name="Car">'
    });

    var textarea1 = Vue.extend({
        template: '<textarea rows="10" cols="30">台湾小凡使用 textarea</textarea>'
    });
    var input1 = Vue.extend({
        template: '<input type="text" value="台湾小凡使用 textbox" id="input1" name="input1" >'
    });
    var tr1 = Vue.extend({
        template: '<tr><td>项目1</td><td>{{a}}</td></tr>',
        data: function() {
            return {
                a: '学 vue ，还蛮开心的~'
            }
        }
    });
    var tr2 = Vue.extend({
        template: '<tr><td>项目2</td><td>{{a}}</td></tr>',
        data: function() {
            return {
                a: '每一个示例，都有价值'
            }
        }
    });

    var vm = new Vue({
        el: '#app1',
        components: {
            'my-component1': tr1,
            'my-component2': tr2,
            'input1': input1,
            'textarea1': textarea1,
            'checkbox_bike': checkbox_bike,
            'checkbox_car': checkbox_car,
            'radio_sex1':radio_sex1,
            'radio_sex2':radio_sex2,
            'select1':select1
        },
        data: {
            'input1': '',
            'textarea1': '',
            'checkbox_bike':'',
            'checkbox_car':'',
            'radio1':'',
            'select1':''
        }
    });
    </script>
</body>

</html>