vue 2

目录

• 复习
• 今日
• 指令
  • 条件指令
  • 循环指令
  • 评论案例
  • 解决插值表达式符号冲突
• 总结
• 组件
  • 局部组件
  • 全局组件
  • 组件间的交互：父传子
  • 组件间的交互：子传父

复习

"""
1、vue框架：渐进式js框架
2、优点：数据双向绑定 虚拟DOM 数据驱动 单页面
3、下载导入 | CDN
4、简单操作：数据、事件、样式
5、指令：文本、事件、属性、表单、条件
"""

今日

"""
1、剩余指令：条件、循环
2、实例成员：computed、watch、生命周期钩子
3、组件：局部、全局、组件间交互
"""

指令

条件指令

<div id="app">
    <p v-if="r1" key="p_r1">if条件</p>
    <p v-show="r2">show条件</p>
    <!--{{ num + 1 - 5 * 2 + '好的' }}-->

    <ul>
        <!--v-else会默认与v-if等有条件的分支绑定-->
        <!--v-else-if必须由条件才和有条件v-if分支绑定-->
        <li v-if="tag == 1">111</li>
        <li v-else-if="tag == 2">222</li>
        <li v-else>333</li>
    </ul>

    <ul>
        <li @click="action('a')">a</li>
        <li @click="action('b')">b</li>
        <li @click="action('c')">c</li>
    </ul>

    <ul>
        <li v-show="flag == 'a'">aaa</li>
        <li v-show="flag == 'b'">bbb</li>
        <li v-show="flag == 'c'">ccc</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            r1: false,
            r2: false,
            tag: 2,
            flag: 'a'
        },
        methods: {
            action: function (s) {
                this.flag = s
            }
        }
    })
</script>

循环指令

<div id="app">
    <p>{{ nums[2] }}</p>
    <ul>
        <!-- 只遍历值 -->
        <li v-for="num in nums">{{ num }}</li>
    </ul>

    <ul>
        <!-- 值与索引 -->
        <li v-for="(num, index) in nums">{{ num }} {{ index }}</li>
    </ul>

    <ul>
        <!-- 值，键，索引 -->
        <li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            nums: [5, 3, 2, 1, 4],
            people: {
                'name': 'Owen',
                'age': 17.5,
                'gender': 'others'
            }
        }
    })
</script>

评论案例

<style>
    span {
        margin-left: 100px;
        cursor: pointer;
        color: green;
    }
    span:hover {
        color: red;
    }
</style>

<div id="app">
    <p>
        <input type="text" v-model="val">
        <button @click="add">评论</button>
    </p>
    <ul>
        <li v-for="(info, i) in infos">
            {{ info }}
            <span @click="del(i)">x</span>
        </li>
    </ul>
</div>

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

<script>
    new Vue({
        el: '#app',
        data: {
            infos: [],  // 管理所有留言
            val: ''  // 管理当前留言
        },
        methods: {
            del: function (i) {
                // splice: 从哪个索引开始  操作的位数  操作成的结果(可变长)
                this.infos.splice(i, 1)  // 删除留言
            },
            add: function () {
                let val = this.val;
                if (val) {
                    this.infos.splice(0, 0, val);  // 留言
                    this.val = ''  // 输入框置空
                }
            }
        }
    })
</script>

解决插值表达式符号冲突

<div id="app">
    ${ msg }
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '12345'
        },
        delimiters: ['${', '}']
    })
</script>

总结

"""
指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href  |  :href  :class='c1'  :class='[c1, c2]'  :style='s1'
		（s1={color: "red"}）
事件：v-on:click  |  @click   @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show  v-if v-else-if v-else
循环：v-for="(value, index) in list"   v-for="(value, key, index) in dict"

成员:
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明
"""

组件

# 组件：有html模板，有css样式，有js逻辑的集合体
# 根组件的模板就使用挂载点，子组件必须自己定义template(局部子组件、全局子组件)

局部组件

<div id="app">
    <!--div.box>h1{标题}+(p.p${文本内容}*2)-->
    <abc></abc>
    <abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
    // 定义局部组件
    let localTag = {
        // 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
        // 2.data的值就是一个存放数据的字典
        // 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
        data: function () {
            return {
                count: 0,
                // r: ''
            }
        },
        template: `
        <div class="box" style="border: solid; width: 100px">
            <h1>标题</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
            <button @click="send"></button>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
            // 结合JQ完成组件与后台的交互
            // send: function () {
            //     $.ajax({
            //         url:,
            //         type:,
            //         data:，
            //         success: function (result) {
            //             this.r = result
            //         }
            //     })
            // },
            // watch: {
            //     r: function () {
            //
            //     }
            // }
        }
    };

    new Vue({
        el: '#app',
        data: {

        },
        // 局部组件必须注册
        components: {
            'abc': localTag
        }
    })
</script>

全局组件

<div id="app">
    <!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
    <old-boy></old-boy>
</div>

<script src="js/vue.js"></script>
<script>
    // Vue.component(组件名, {组件主体});
    Vue.component('oldBoy', {
        data: function () {
            return {
                count: 0
            }
        },
        template: `
        <div class="box" style="border: solid; width: 100px">
            <h1>全局</h1>
            <p class="p1">文本内容</p>
            <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
        </div>
        `,
        methods: {
            action: function () {
                this.count++
            },
        }
    });
    // 全局组件无需注册
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>

组件间的交互：父传子

<div id="app">
    <!-- local-tag就可以理解为自定义标签，使用msg变量值由父组件提供 -->
    <!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
    <!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
    <local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        // 子组件拿自定义属性
        props: ['owen'],
        template: `
        <div>
            <h1>信息</h1>
            <p>{{ owen }}</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        data: {
            msg: '父级的信息'
        },
        components: {
            // 'localTag': localTag,
            // localTag: localTag,
            localTag  // 在页面中 <local-tag>
        }
    })
</script>

组件间的交互：子传父

<div id="app">
    <h1>{{ title }}</h1>
    <global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag', {
        template: `
        <div>
            <input type="text" v-model="msg">
            <!--<button @click="action">修改标题</button>-->
        </div>
        `,
        data: function () {
            return {
                msg: ''
            }
        },
        methods: {
            // action: function () {
            //     let msg = this.msg;
            //     // recv是自定义的事件
            //     this.$emit('recv', msg)
            // }
        },
        watch: {
            msg: function () {  // 只要msg只有变化，就将值同步给父组件
                this.$emit('recv', this.msg)
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            title: '父组件定义的标题'
        },
        methods: {
            get_title: function (msg) {
                this.title = msg
            }
        }
    })
</script>