vue学习----2.vue绑定事件&vue组件

事件绑定

		<button v-on:click="hello">点我!</button>
        methods: {
            hello: function () {
                alert(this.message);
            }
        }

双向绑定

        <p>
            输入:<input type="text" v-model="message" />
            我知道你在输入什么:{{message}}
        </p>
        <p>
            <textarea v-model="message" cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="radio" name="gender" value="男" v-model="gender" /> 男
            <input type="radio" name="gender" value="女" v-model="gender" /> 女
            性别: {{gender}}
            <select v-model="city">
 	           <option value="" disabled>-----请选择-----</option>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
            </select>
            城市: {{city}}
        </p>
            let myvue01 = new Vue({
        el:"#app",  <!-- 绑定元素 -->
        data:{
            <!-- 信息 -->
            message: "",
            flag: true,
            score: 95,
            persons: [{name: "张三",age: 18},{name: "李四",age: 20}],
            gender: "",
            city: ""
        },
        methods: {
            hello: function () {
                alert(this.message);
            }
        }
    });

Tips：注意v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将vue实例的数据作为数据来源
如果v-model表达式的初始值未能匹配任何选项，元素将被渲染为"未选中"状态，在ios中，这会使用户无法选择第一个选项，因为这样的情况下，ios是不会触发change时间，因此最好提供一个值为空的禁用选项

vue组件

组件是可复用的vue实例，一组可重用的模板

    <p>
        <yxy v-for="person in persons" v-bind:all="person"></yxy>
    </p>
    Vue.component("yxy",{
        props: ['all'],
        template: '
{{all}}
'
    });