vue（二）

表单绑定（续）

强调：冒号开头的叫属性绑定，格式为":属性名称";@开头的叫事件绑定，格式为：@事件名称

1.复选框的全选操作：通过一个状态的变量来进行控制

window.onload = function() {
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
                data: {	// 此处定义了数据的绑定
                    emails:[
                        {'id':1,'title':'今天晚上十点来我家见面','checked':false},
                        {'id':2,'title':'人家晚上哈哈哈','checked':false},
                        {'id':3,'title':'不去了','checked':false}
                    ]
                },
                computed:{
                    status:{
                        set:function(newStatus){
                            for(x=0;x<this.emails.length;x++){
                                this.emails[x].checked=newStatus;
                            }
                        },
                        get:function () {
                            return false;
                        }
                    }
                }
            }) ;	// 实例化MVVM的管理对象
        }
=============================================

<div id="msgDiv">
    <div id="inputDiv" style="float: left ;  50%">
        <input type="checkbox" value="true" v-model="status">选择全部的信息<br>
    </div>
    <div id="showDiv" style="float: left ;  50%">
        <span v-for="email in emails">
            <input type="checkbox" :id="email.id" :checked="email.checked">{{email.title}}<br>
        </span>
    </div>
</div>

2.下拉列表框--单选

window.onload = function() {
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
                data: {	// 此处定义了数据的绑定
                    selectedCityId:3,//默认选中
                    cities:[
                        {'id':1,'title':'北京'}, {'id':2,'title':'上海'},
                        {'id':3,'title':'广州'}, {'id':4,'title':'深圳'}
                    ]
                },
                computed: {
                    cityName: {
                        get: function() {
                            for (x = 0 ; x < this.cities.length ; x ++) {
                                if (this.cities[x].id == this.selectedCityId) {
                                    return this.cities[x].title ;
                                }
                            }
                        }
                    }
                }
            }) ;	// 实例化MVVM的管理对象
        }
=============================
<div id="msgDiv">
    <div id="inputDiv" style="float: left ;  50%">
        <select id="city" v-model="selectedCityId">
            <option :value="city.id" v-for="city in cities">{{city.title}}</option>
        </select>
    </div>
    <div id="showDiv" style="float: left ;  50%">
            选择的城市编号为：{{selectedCityId}},城市名称：{{cityName}}
    </div>
</div>

3.下拉列表框--多选（见笔记）

vue.js组件定义

1.局部组件：只能在当前的Vue对象中使用

window.onload = function() {
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
                components:{//定义局部组件，这个组件只针对于当前对象有效
                    "message-compnent":{
                        template:"<div>嗨皮的学习Vue.js开发框架</div>"
                    }
                }
            }) ;	// 实例化MVVM的管理对象
        }
=======================

<div id="msgDiv">
       <!-- 此元素是自定义的组件-->
    <message-compnent></message-compnent>
</div>

2.全局组件：上面定义的局部组件只能在当前的Vue对象中使用，全局组件就可以在整个的Vue项目之中进行使用

 window.onload = function() {
            Vue.component('message-compnent',{
                template:"<div>嗨皮的学习Vue.js开发框架</div>"
            });//定义Vue全局组件
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
            }) ;	// 实例化MVVM的管理对象
        }
===========================
<div id="msgDiv">
    <message-compnent></message-compnent><!-- 此元素是自定义的组件-->
</div>

3.组件事件处理：既然组件是一套完善且独立的程序逻辑代码,那么在实际的使用之中就可以进行事件的处理操作。

4.代码引用：此操作模式是在实际项目开发过程之中组件经常使用到的一种处理模式,该模式的最重要的特点在于：所有的组件单独定义,可以进行单独维护,需要的时候直接进行导入即可。

 window.onload = function() {
            Vue.component('message-component', {
                template: "#messageTemplate",
                data: function() {
                    return {'message' : '嗨皮的学习Vue.js开发框架！'}
                },
                methods: {
                    changeMessage: function() {
                        this.message = "每天要积极面对挑战人生！" ;
                    }
                },
                computed: {
                    statement : function() {
                        return this.message.split('').reverse().join('') ;
                    }
                }
            }) ; // 进行Vue全局组件
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
            }) ;	// 实例化MVVM的管理对象
        }
====================================
<div id="msgDiv">
    <message-component></message-component>	<!-- 此元素是自定义的组件-->
</div></body></html><!--template是放在html标签外面的-->
<template id="messageTemplate">
    <div>	<!-- 在组件里面一定要提供有根元素 -->
        <p>原始内容：message = {{message}}</p><p>处理数据：statement = {{statement}}</p>
        <p><input type='text' v-model='message' size='50'></p>
        <p><button @click='changeMessage'>修改数据</button></p>
    </div>"
</template>

5.调用原生函数：即调用new Vue({...})中的method下的自定义函数

window.onload = function() {
            Vue.component('message-component', {
                template: "#messageTemplate",
                methods: {
                    show: function() {
                        console.log("【message-component】****************************") ;
                    }
                }
            }) ; // 进行Vue全局组件
            app = new Vue({　　//黄色字体的部分就是一个Vue对象
                el: '#msgDiv',		// 设置要进行渲染的根元素
                methods: {	// 组件引用的对象
                    printInfo: function() {
                        console.log('【Vue对象】 *****************************')
                    }
                }
            }) ;	// 实例化MVVM的管理对象
        }
===============================
<div id="msgDiv">
    <!-- 在这段组件的代码里面绑定了一个原生的JS的处理函数，即绑定了vue对象里的处理函数 -->
    <message-component @click.native="printInfo"></message-component>	<!-- 此元素是自定义的组件，执行模板中的任何按钮都会触发此事件,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　如果模板中的按钮也绑定了组件内的函数，则会先执行组件内的函数再执行vue对象中的函数-->
</div></body></html>
<template id="messageTemplate">
    <div>	<!-- 在组件里面一定要提供有根元素 -->
        <p><button>调用Vue对象的原生JS事件</button></p>
        <p><button @click='show'>组件内的按钮</button></p>
    </div>
</template>

6.props数据绑定：

　　● 绑定属性不修改：如果要想让外部的父组件(Vue)与子组件（template）中的数据产生关联,则必须通过 props属性来定义,同时在组件引用的时候还必须配置子组件中的数据变量(驼峰命名更换为“-”)与父组件的data捆绑配置。

window.onload = function() {
            Vue.component('message-component', {
                template: "#messageTemplate",
                props:['myName','myAge'],//在子组件中通过props属性来定义
                computed:{
                    info:function () {
                        return '姓名：'+this.myName+',年龄：'+this.myAge;
                    }
                }
            }) ; // 定义Vue全局组件
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
                data: {	// 进行父组件的定义
                    name:'小李老师',
                    age:18
                }
            }) ;	// 实例化MVVM的管理对象
        }
===========================
<div id="msgDiv">
    <!-- 在这段组件的代码里面绑定了一个原生的JS的处理函数 -->
    <message-component :my-name="name" :my-age="age"></message-component>	<!-- 在使用组件的地方（将驼峰命名更换成"-"）加父组件的绑定-->
</div></body></html>
<template id="messageTemplate">
    <div>	<!-- 在组件里面一定要提供有根元素 -->
        <div>姓名：{{myName}}</div>
        <div>年龄：{{myAge}}</div>
        <div>信息：{{info}}</div>
    </div>
</template>

　　● 数据类型：在进行 props属性定义的时候,除了可以明确的写出具体的属性名称之外,实际上也可以针对于属性类型进行设置,在 Vue.js程序里面支持的属性类型: String、 Number、 Boolean、 Function、 Object、Array等,如果要想进行数据类型的描述,也可以修改 props属性配置：

window.onload = function() {
            Vue.component('message-component', {
                template: "#messageTemplate",
                props:{'myName':String,//定义数据类型
                        'myAge':Number//定义数据类型
                },
                computed:{
                    info:function () {
                        return '姓名：'+this.myName+',年龄：'+this.myAge;
                    }
                }
            }) ; // 定义Vue全局组件
            app = new Vue({
                el: '#msgDiv',		// 设置要进行渲染的根元素
                data: {	// 进行父组件的定义
                    name:'小李老师',
                    age:18
                }
            }) ;	// 实例化MVVM的管理对象
        }

　　　　由于此时已经为子组件中的属性配置了具体的类型,这样在程序使用的过程之中,如果设置的类型有问题,则会自动在后台（控制台console下）进行程序的报错处理。

　　● 数据验证：

props: {
                    'myName': {
                        type: String ,	// 设置数据类型
                        default: function() {	// 描述一个默认的返回结果
                            return "还未设置名字" ;
                        }
                    } ,
                    'myAge': {　　//如果不满足以下的条件，控制台console下会报错
                        type: Number ,
                        required: true ,	// 必须配置此属性
                        validator: function(value) {
                            return value > 18 ;	// 设置可以设置的正确内容
                        }
                    }
                },
=========================
<div id="msgDiv">
    <!-- 在这段组件的代码里面绑定了一个原生的JS的处理函数 -->
    <message-component :my-name="name" :my-age="age"/>	<!-- 此元素是自定义的组件-->
</div>

7. 属性继承：

　　● 默认继承：