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>

posted @ 2018-11-28 22:30 heshun 阅读(134) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

heshun