Vue2.5-2.6-3.0 开发去哪儿网App 从零基础入门到实战项目开发【学习笔记】

有些比较简单的

一、vue 事件

1.获取event

可以不带参数获取$event，同时vue也支持传入$event获取

https://www.jianshu.com/p/3f2c664e43d8

    <div id="app">
        <button @click="handleClick">直接写函数名称</button>
        <button @click="handleClick($event)">函数传入参数</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                handleClick:function(e){
                    console.log(e);
                }
            }
        })
    </script>

2.事件修饰符

• .stop - 调用 event.stopPropagation()。停止冒泡
• .prevent - 调用 event.preventDefault()。 阻止默认行为
• .capture - 添加事件侦听器时使用 capture 模式。事件捕获，从外到内
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。点击本身才有效
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

二、表单绑定

表单修饰符

    <div id="app">
        <input type="text" v-model="value">
        <!-- lazy 让v-model偷懒，失去焦点的时候才同步  -->
        <input type="text" v-model.lazy="value">
        <!-- 如果数据是数字，就会把value转换成number类型 -->
        <input type="text" v-model.number="value">
        <!-- 去除前面和后面的空格 -->
        <input type="text" v-model.trim="value">

        {{value}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data() {
                return {
                    value:''
                }
            },
            watch: {
                value:function(){
                    console.log(typeof this.value )
                }
            }
        })
    </script>

三、父子组件传值

1.简单的示例

    <div id="app">
        <!-- 可以通过ref获取dom节点 -->
        <div ref="hello" @click="handleClick">hello world </div>
        <!-- 父组件向子组件传值是通过属性的方式 -->
        <counter ref="one" :count="one" @change="handleChange"></counter>
        <counter ref="two" :count="two" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
    <script>

        Vue.component("counter", {
            template: "<div @click='hanleClick'>{{number}}</div>",
            props: {
                count: Number
            },
            data() {
                return {
                    //  vue 是单向数据流，不能直接修改props里面的值
                    number: this.count
                }
            },
            methods: {
                hanleClick: function () {
                    this.number = this.number + 2;
                    //子组件向父组件传值是通过事件触发this.$emit("事件名称",参数1,参数2...)
                    this.$emit("change", 2);
                }
            },
        })

        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    one: 2,
                    two: 3,
                    total: 5
                }
            },
            methods: {
                handleClick: function () {
                    console.log(this.$refs.hello);
                },
                handleChange: function (e) {
                    console.log(e);
                    this.total = this.$refs.one.number + this.$refs.two.number
                }
            },
        })
    </script>

2.props效验

        Vue.component("child", {
            template: "<div @click='hanleClick'>{{content}}</div>",
            props: {
                content:{
                    //支持对象
                    type:String,
                    required:true,
                    default:"默认值",
                    validator:function(value){
                        //校验器
                        return (value.length)>5
                    }
                }
            }
        })

3.父组件触发子组件原生事件

方法一

有时候我们会在子组件上写点击事件，但是其实是不会被触发的,需要在子组件加this.$emit('click')向外触发click事件给父组件

    <div id="app">
        <child @click="handleClick"></child>        
    </div>
    <script>

        Vue.component("child", {
            template: "<div @click='hanleChildClick'>子组件</div>",
            methods:{
                hanleChildClick:function(){
                    alert("child click")
                    // 需要这里加this.$emit('click');向外触发给父组件
                    this.$emit('click');
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data() {
                return{

                }
            },
            methods: {
                handleClick: function () {
                    alert("click")
                }
            },
        })
    </script>

方法二

直接在父组件中加native即可

<child @click.native="handleClick"></child>        

4.非父子组件传值

    <div id="app">
        <child content="one"></child>
        <child content="two"></child>
    </div>
    <script>
        // 非父子组件传值(Bus/总线/发布订阅模式/观察者模式)
        Vue.prototype.bus = new Vue()

        Vue.component("child", {
            template: "<div @click='hanleChildClick'>{{selfContent}}</div>",
            data() {
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: String
            },
            methods: {
                hanleChildClick: function () {
                    //这里使用bus触发
                    this.bus.$emit("change", this.selfContent);
                }
            },
            mounted() {
                const _this = this
                //这里使用bus监听一下事件
                this.bus.$on("change", function (val) {
                    _this.selfContent = val
                    console.log(val);
                });
            },
        })
        var vm = new Vue({
            el: "#app"
        })
    </script>

四、插槽

1.普通插槽和具名插槽

插槽比较简单也很重要，要注意的是可以使用slot="slotname"来指定具名插槽，然后子组件需要<slot name="slotname">默认内容</slot>来申明一下

    <div id="app">
        <child>普通插槽</child>
        <child2>
            <h2>具名插槽</h2>
            <div slot="header">头部</div>
            <div slot="center">身体</div>
            <div slot="footer">尾巴</div>
        </child2>
    </div>
    <script>
        Vue.component("child", {
            template: `<div>
                        <slot></slot>
                      </div>`,  
        })

        Vue.component("child2", {
            template: `<div>
                        <slot name="header">默认头部</slot>
                        <slot name="center">默认身体</slot>
                        <slot name="footer">默认尾巴</slot>
                      </div>`,
        })
        var vm = new Vue({
            el: "#app"
        })
    </script>

2.作用域插槽

其实就是如果你想在子组件循环，然后循环的样式并不是子组件决定而是父组件去写样式，就需要使用作用域插槽，然后给一个属性为：slot-scope="scope"，其中scope的值为

    <!--打印出：scope的值为 { "item": 1, "keys": 0 } -->
    <div id="app">
        <child>
            <template slot-scope="scope">
                <h2>
                {{scope}} 
                </h2>
            </template>
        </child>
    </div>
    <script>
        Vue.component("child", {
            data() {
                return {
                    list:[1,2,3,4],
                    keys:0
                }
            },
            template: `<div>
                        <ul>
                            <slot
                                v-for="(item,keys) of list"
                                :item="item" :keys="keys"
                            >
                            </slot>
                        </ul>
                        <slot></slot>
                      </div>`,
        })

        var vm = new Vue({
            el: "#app"
        })
    </script>