Vue 简单的总结二

表单输入绑定

数据双向绑定 v-model 绑定相同的属性当属性变化绑定的标签内容也跟着变化

v-model 只能应用像在input textare select 标签

v-model.lazy 懒监听不及时更改当失焦的时候才更改

v-model.number 限制只能输入数字

v-model.trim 取出两边空格

<body>

<div id="app">

    <label for="username">用户名：</label>

    <input type="text" v-model="msg" id="username">

    <p>{{ msg }}</p>

    <textarea placeholder="add multiple lines" v-model='msg'></textarea>

    <input type="checkbox" id="checkbox" v-model="checked">

    <label for="checkbox">{{ checked }}</label>

    <br>

    <!--多个复选框 使用列表保存-->

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">

    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

    <label for="mike">Mike</label>

    <br>

    <span>Checked names: {{ checkedNames }}</span>

    <br>

    <select v-model="selected">

        <option disabled value="">请选择</option>

        <option>A</option>

        <option>B</option>

        <option>C</option>

    </select>

    <span>Selected: {{ selected }}</span>

    <!--懒监听-->

    <input v-model.lazy="msg" >

    <!--数字显示-->

    <input v-model.number="age" type="number">

    <!--清除前后空格-->

    <input v-model.trim="msg">

</div>

<script src="vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data() {

            return {

                msg: 'alex',

                checked: false,

                checkedNames: [],

                selected:'',

                age:0

            }

        }

    })

</script>

</body>

组件化开发

我们定义的组件全部写在一个文件中，所以认为是全局的将来我们通过import导入，引用局部组件

2.局部组件

打油诗：声子挂子用子

父子组件可以不使用template，但子组件最好还是有注意：template中的标签一定要用一个标签包起来不然报这个错

总结：

1）一个子组件挂载到哪个组件，这个组件就是我的父组件；

2）以后模块化开发时，一个组件就是一个文件（一个组件包含了html，css，js），想使用这个组件时导入即可使用

<body>

<div id="app">

    <App></App>

</div>

<script src="vue.js"></script>

<script>

    //如果仅仅是实例化vue对象中 既有el 又有template，如果template中定义模板的内容

    // 那么template模板的优先级大于el

    //第一个参数是组件的名字，第二个参数 options参数 它是全局组件

    // <slot></slot>  slot是vue中提供的内容组件  它会去分发 内容

    Vue.component('VBtn',{

        data(){

            return {

            }

        },

        template:`<button>

            <slot></slot>

</button>`

    })

//    App   header Vaside  Vcontent

//    1.声子  Vue中 组件的名字 首字母要大写 跟标签区分 组件中的data必须是个函数 一定要有返回值

    let Vheader = {

        data(){

            return {

            }

        },

        //template定义模板的内容

//        Component template should contain exactly one root element

        template:`

            <div>

                <h2>日天</h2>

                <h2>日天</h2>

                <VBtn>登录</VBtn>

                <VBtn>注册</VBtn>

                <VBtn>按钮</VBtn>

                <VBtn>提交</VBtn>

            </div>

        `

    }

    let App = {

        data(){

            return {

               text:"我是日天"

            }

        },

        template:`

            <div id="a">

                <h2>{{ text }}</h2>

                <Vheader></Vheader>

                 <VBtn>删除</VBtn>

                 <br>

            </div>

        `,

        methods:{

        },

        components:{

            Vheader

        }

    }

    new Vue({

        el: '#app',

        data() {

            return {

                msg:'alex'

            }

        },

        template:`<App />`,

        components:{

            //2.挂子

            //如果key和value一样 可以只写一个

            //App:App

            App

        }

    })

</script>

</body>

1、声明子

let App = {

    data(){

        return {

        }

    },

    template:`<div>

        </div>`

}

2.挂子

挂载哪个组件，这个组件就是我的父组件 template中的模板一定要有一个根元素

components:{

            # 键和值相同可简写 正常 App：App

            App

            Son

            ...

        }

3 用子

1 可在template 中使用

template:`

            <App />    或者   <App></App>

        `,

2 没有template 可以在引用部分直接用

<div id="app">

    <App></App>

</div>

3.组件的嵌套

数据：单向数据流

4.父子组件传值

父==》子

1.在子组件中使用props声明可以直接在子组件中任意使用

2.从父组件中接收的值也可以传值给其他组件

3.父组件要定义自定义的属性

<div id="app">

    <App></App>   <!-- 使用局部组件App -->

</div>

<script>

    // 声明一个局部组件Vheader

    let Vheader = {

        data(){

            return {

            }

        },

  // 挂载父组件的属性，该组件中就可以使用，从父组件接收到的值也可再传给其子组件

        props:['msg','post'],

        template:`

            <div class="vheader">

                <h2>子组件Vheader start</h2>

                <p>{{ msg }}</p>

                <p>{{ post.title }}</p>

                <h2>子组件Vheader end</h2>

            </div>

        `

    };

    // 声明一个局部组件App

    let App = {

        data(){

            return {

                text:"我是父组件App的数据",

                app_post:{

                    id: 1,

                    title: 'hello world'

                }

            }

        },

        //

        template:`

            <div class="app">

                <Vheader :msg='text' :post='app_post'></Vheader>

            </div>

        `,

        components:{

            Vheader  // 挂载局部组件Vheader

        }

    };

    new Vue({

        el: '#app',

        data() {

            return {

            }

        },

        components:{

            App  // 挂载局部组件App

        }

    })

</script>

子==》父

1、子组件中通过$emit()触发父组件中自定义的事件

2、父组件中声明自定义的事件介绍

<div id="app">

    <App></App>   <!-- 使用局部组件App -->

</div>

<script>

    // 声明一个全局组件VBtn

    Vue.component('VBtn',{

        data(){

            return {}

        },

        props:['id'],  // 父组件Vheader传递过来的值

        template:`

            <button @click="clickHandler">{{ id }}</button>

        `,

        methods:{

            clickHandler(){

                console.log(this);  // 每个组件中的this指的是当前组件对象

                // this.$emit('父组件中声明的自定义的事件', ' 传值')

                this.id++;

                this.$emit('click_Handler', this.id);

            }

        }

    });

    // 声明一个局部组件Vheader

    let Vheader = {

        data(){

            return {}

        },

        props:['post'],  // 父组件App传递过来的数据

        template:`

            <div class="vheader">

                <VBtn :id='post.id' @click_Handler="fuClickHandler"></VBtn>

            </div>

        `,

        methods:{

            fuClickHandler(val){

                this.$emit('fatherHandler', val)  // 往父组件App传值

            }

        }

    };

    // 声明一个局部组件App

    let App = {

        data(){

            return {

                app_post:{

                    id: 1,

                    title: 'hello world'

                }

            }

        },

        template:`

            <div class="app">

                {{ app_post.id }}

                <Vheader :post='app_post' @fatherHandler="father_handler"></Vheader>

            </div>

        `,

        methods:{

          father_handler(val){

              this.app_post.id = val

          }

        },

        components:{

            Vheader  // 挂载局部组件Vheader

        }

    };

    new Vue({

        el: '#app',

        data() {

            return {}

        },

        components:{

            App  // 挂载局部组件App

        }

    })

</script>

5.平行组件传值

使用$on()和$emit() 绑定的是同一个实例化对象

A===>B组件传值

1、声明一个Vue对象(bus 对象), 只是用来传值　　

2、B组件中要使用$on(‘事件的名字’,function(){})

3、A组件中使用$emit('事件的名字',值)

4、注意: 记住平行组件传值前提是这两个方法必须绑定在同一个实例化对象(bus)上

<div id="app">

    <App></App>   <!-- 使用局部组件App -->

</div>

<script>

    // TestA ==》 TestB 传值

    // 平行组件传值前提：这两个方法必须绑定在同一个实例化对象(bus)上

    let bus = new Vue();  // 声明一个Vue对象，只是用来平行组件间传值

    // TestB要声明事件 bus.$on('事件的名字', function(val){})

    // TestA要触发事件 bus.$emit('TestA组件中声明的事件名', '值')

    // 声明一个全局组件TestB

    Vue.component('TestB',{

        data(){

            return {

                text: ""

            }

        },

        template:`

            <h2>{{ text }}</h2>

        `,

        created(){

            // 声明事件

            bus.$on('testData', (val) => {   // 注意这里用箭头函数

                this.text = val

            })

        }

    });

    // 声明一个全局组件TestA

    Vue.component('TestA',{

        data(){

            return {

                msg: "我是子组件TestA的数据"

            }

        },

        template:`

            <button @click="clickHandler">TestA组件中按钮</button>

        `,

        methods:{

            // 定义触发的函数

            clickHandler(){

                console.log(bus);

                bus.$emit('testData', this.msg)

            }

        }

    });

    // 声明一个局部组件Vheader

    let Vheader = {

        data(){

            return {}

        },

        template:`

            <div class="vheader">

                <TestA></TestA>

                <TestB></TestB>

            </div>

        `,

    };

    // 声明一个局部组件App

    let App = {

        data(){

            return {}

        },

        template:`

            <div class="app">

                <Vheader></Vheader>

            </div>

        `,

        components:{

            Vheader  // 挂载局部组件Vheader

        }

    };

    // 根组件，可以没有template属性，直接在el中使用子组件

    new Vue({

        el: '#app',

        data() {

            return {}

        },

        components:{

            App  // 挂载局部组件App

        }

    })

</script>