day65_10_9vue循环指令与组件

一。v-once

　　v-once指令赋值给标签后，这个标签中的所有变量都不能被更改，只能被渲染一次。之后的改动不能改变该标签中的值：

<div id="app">

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

    <!-- 一旦赋值，只可主动更改 -->

    <input type="text" v-model="msg" v-once>

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

    <!-- 一旦赋值，便不可更改 -->

    <p v-once>{{ msg }}</p>

</div>

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

<script>

    new Vue({

        el: '#app',

        data: {

            msg: '初始值'

        }

    })

</script>

　　如果被赋值的是一个input表单，使用了v-model定义值，则这个表单中的默认值不可被改变，但是可以主动改变，其他的值会改变。

二。v-cloak指令

　　在vue修饰的页面中，所有的变量会事先加载{{}}，再使用script对其进行修饰，而vue中提供了一个v-cloak的属性，这个属性会在该标签所有元素加载完后消失，所以可以给它指定一些style：

<style>

    [v-cloak] {

        display: none;

    }

</style>

<!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，
当vue环境加载成功，{{}}有会被解析消失 -->

<!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，
会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 -->

<div id="app" v-cloak>

    {{ }}

    {{ }}

    {{ }}

</div>

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

<script>

    new Vue({

        el: '#app',

    })

</script>

　　可以解决页面闪烁问题。

三。条件指令。

　　对于一些诸如v-if v-show的指令，可以决定该标签是否显示，其用法是不同的：

　　v-show

　　v-show修饰了一个标签之后，其值可以是一个布尔类型，也可以是一个变量（变量代表布尔类型）：

<p v-show="isShow">show条件指令</p>

　　v-if

　　v-if表面上和v-show的用法是一样的：

<p v-if="isShow">if条件指令</p>

　　不同点：他们的不同在于，当使用v-show隐藏修饰的标签，是定义了一个style将其隐藏，而使用v-if不会显示任何东西。

　　v-if v-else-if v-else

　　这些if的用法和python的用法是一样的，前两个需要更布尔类型，最后一个不需要。

　　当有一个分支成立后会显示该分支，而其他的分支不会再显示。当所有条件都不满足时运行。

例子：

<!--

1) 两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时

         v-if是不渲染标签

         v-show以 display:none 方式渲染

-->

<div id="app">

    <p v-if="isShow">if条件指令</p>

    <p v-show="isShow">show条件指令</p>

</div>

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

<script>

    new Vue({

        el: '#app',

        data: {

            isShow: false,

        }

    })

</script>

<!--

2)     v-if="变量"

    v-else-if="变量"

    v-else

    一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示

-->

<style>

    .box {

        width: 400px;

        height: 300px;

    }

    .r { background-color: red; }

    .y { background-color: yellow }

    .b { background-color: blue; }

    .active {

        background-color: pink;

    }

</style>

<div id="app">

    <div class="em">

        <p>

            <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button>

            <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button>

            <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button>

        </p>

        <p>

            <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button>

            <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button>

            <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button>

        </p>

        <div class="box r" v-if="showName == 'rBox'"></div>

        <div class="box y" v-else-if="showName == 'yBox'"></div>

        <div class="box b" v-else></div>

    </div>

</div>

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

<script>

    new Vue({

        el: '#app',

        data: {

            showName: 'rBox'

        },

        methods: {

            changeBox(name) {

                this.showName = name;

            }

        }

    })

</script>

分页例子

四。v-pre

　　这个指令可以再vue的控制范围内形成不受vue控制的区域

<div id="app">

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

    <!-- v-pre 指令可以在vue控制范围内，形成局部vue不控制区域

    {{ }} 和 v-if 都会原样输出，不会被解析

    -->

    <p v-pre>

        {{ }}

        <span v-if="hehe"></span>

    </p>

</div>

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

<script>

    new Vue({

        el: '#app',

        data: {

            msg: 'message'

        }

    })

</script>

五。循环指令

　　循环指令使用关键字v-for，其语法如下：

<span v-for="ch in str">{{ ch }}</span>

　　对于字符串，指定的字符串是字符串中的每个字符。

　　对于for循环也可以获取其index：

<span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>

　　其中的key就是唯一标识标签的，加速渲染的。

　　也可以遍历列表：

<p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p>

　　遍历字典时，它所返回的一个是值，第二个键，第三个是index：

<p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>

　　todolist例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        li:hover {

            color: red;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="app">

        <p>

            <input type="text" v-model="userMsg">

            <button type="button" @click="sendMsg">留言</button>

        </p>

        <ul>

            <li v-for="(msg, index) in msgs" @click="deleteMsg(index)">

                {{ msg }}

            </li>

        </ul>

    </div>

</body>

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

<script>

    new Vue({

        el: '#app',

        data: {

            msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],  // 所有留言

            userMsg: '',  // 用户留言

        },

        methods: {

            sendMsg() {  // 留言事件

                // 尾增

                // this.msgs.push(this.userMsg);

                // 首增

                // this.msgs.unshift(this.userMsg);

                let userMsg = this.userMsg;

                if (userMsg) {

                    this.msgs.unshift(userMsg);  // 渲染给页面

                    localStorage.msgs = JSON.stringify(this.msgs);  // 同步到数据库

                    this.userMsg = '';  // 清空留言框

                }

            },

            deleteMsg(index) {

                // 开始索引  操作长度  操作的结果们

                this.msgs.splice(index, 1)

            }

        }

    })

</script>

<script>

    // localStorage['num'] = 10;

    // sessionStorage.num = 888;

    // console.log(localStorage.num);

    // localStorage.msgs = JSON.stringify(['1111', '2222']);

    // console.log(JSON.parse(localStorage.msgs));

    // console.log(JSON.parse(localStorage.msgs)[0]);

</script>

</html>

例子

　　其中的注意点是:

　　设置浏览器永久数据：

localStorage['num'] = 10;

　　设置浏览器窗口绑定数据：

sessionStorage.num = 888;

　　设置的数据都是以字符串的形式，如果需要以列表的方式正常操作，需要json序列化。

　　操作一个列表使用方法：

this.msgs.splice(index, 1)

六。修改符号

　　可以使用dilimiters来修改固定的关键符号{{}}：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="app">

        {{ msg }}

        {[ msg ]}

    </div>

</body>

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

<script>

    new Vue({

        el: '#app',

        data: {

            msg: '12345'

        },

        // delimiters: ['{{', '}}'],

        delimiters: ['{[', ']}'],

    })

</script>

</html>

七。计算属性。

　　在一个属性分为两个进行监听时，可以直接操作data：

        <p @click="fn">{{ num }}</p>

        <p>十位：{{ parseInt(num / 10) }}</p>

        <p>个位：{{ num % 10 }}</p>

　　而如果需要对两个变量值进行操作成一个变量需要使用关键字computed：

        十位:<input type="number" v-model="shi" min="0" max="9">

        个位:<input type="number" v-model="ge" min="0" max="9">

        结果：<b>{{ shi * 10 + +ge }}</b>

        结果：<b>{{ result }}</b>

        computed: {

            result() {

                // console.log('该方法被调用了');

                // this.shi;

                // this.ge;

                return this.shi * 10 + +this.ge

            }

        }

　　其中：

　　一个可转化成数字的字符串在前面添加+符号会转换成数字类型。

　　computed的定义规则：

　　1) computed是用来声明方法属性的。

　　2) 声明的方法属性不能在data中重复定义。

　　3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听。

　　4) 计算属性的值来源于监听方法的返回值。

八。属性监听：

　　watch。当多个属性依赖于一个值时，可以使用该关键字定义。

　　其规则如下：

　　1) watch为data中已存在的属性设置监听事件。

　　2) 监听的属性值发送改变，就会触发监听事件。

　　3) 监听事件的方法返回值没有任何意义。

　　例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="app">

        <!-- 多个变量的值依赖一个变量，该变量发生改变，所有依赖变量都会改变 -->

        <p @click="fn">{{ num }}</p>

        <p>十位：{{ shi }}</p>

        <p>个位：{{ ge }}</p>

    </div>

</body>

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

<script>

    new Vue({

        el: '#app',

        data: {

            num: 99,

            shi: 0,

            ge: 0,

        },

        methods: {

            fn() {

                this.num -= 3;

            }

        },

        // 1) watch为data中已存在的属性设置监听事件

        // 2) 监听的属性值发送改变，就会触发监听事件

        // 3) 监听事件的方法返回值没有任何意义

        watch: {

            num () {

                // console.log('num改变了')

                this.shi = parseInt(this.num / 10);

                this.ge = this.num % 10;

                // return '12345'

            }

        }

    })

</script>

</html>

九。组件。

　　组件分为三类：根组件，局部组件，全局组件。

　　组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用。

　　根组件的定义就是唯一的new出的实例。所有被new Vue产生的组件，在项目开发阶段，一个项目产生一个根组件。

　　全局组件就是不用注册，九可以称为任何一个组件的子组件。

　　局部组件就是必须在根组件进行注册的组件。

　　每个组件都有自身的html，css和js，都在一个template中。

　　根组件:

　　根组件中，有template，其中只能有一个根标签，如果有两个则只渲染第一个。

　　根组件之间不能进行信息交互。

　　如果根组件中有渲染了html标签后，原根标签中的元素可以覆盖。如果template中没有元素，就会显示原标签中的元素，而如果是空格则会留下一个div标签。

　　例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="app">

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

    </div>

    <div id="main">

    </div>

</body>

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

<script>

    // 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用

    // 2) 分组分为根组件、全局组件与局部组件

    //      根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件

    //      全局组件：不用注册，就可以成为任何一个组件的子组件

    //      局部组件：必须注册，才可以成为注册该局部组件的子组件

    // 3) 每一个组件都有自身的html结构，css样式，js逻辑

    //      每一个组件其实都有自己的template，就是用来标识自己html结构的

    //      template模板中有且只有一个根标签

    //      根组件一般不提供template，就由挂载点的真实DOM提供html结构

    new Vue({

        el: '#app',

        data: {

            msg: 'message',

            c1: 'red'

        },

        template: `

        <div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div>

        `,

        methods: {

            fn() {

                alert(this.msg)

            }

        }

    });

    new Vue({

        el: '#main',

        data: {

            msg: 'message'

        }

    })

</script>

</html>

　　局部组件：

　　局部组件的创建方法是：

    let localTag = {

        template: `

        <div class="box">

            <img src="img/666.jpg" alt="">

            <h3>凤哥</h3>

            <p>马叉虫❤马叉虫</p>

        </div>

        `

    };

　　其中localtag就是该组件可以被注册的名字，所以需要在根组件进行注册，注册需要使用关键字：components：

        components: {

            // mcc: localTag,

            // localTag,

            'local-tag': localTag,

        }

　　script中的驼峰就是html中的-分法。

　　注册好之后就可以在根标签中使用：

    <div id="app">

        <!--<mcc></mcc>-->

        <local-tag></local-tag>

        <local-tag></local-tag>

    </div>

　　例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            box-shadow: 0 3px 5px 0 #666;

            width: 240px;

            height: 300px;

            text-align: center;

            padding: 20px 0;

            float: left;

            margin: 5px;

        }

        .box img {

            width: 200px;

        }

    </style>

</head>

<body>

    <div id="app">

        <!--<mcc></mcc>-->

        <local-tag></local-tag>

        <local-tag></local-tag>

    </div>

</body>

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

<script>

    // 创建一个局部组件

    // 1) 创建局部组件

    // 2) 在父组件中注册该局部组件

    // 3) 在父组件的template模板中渲染该局部组件

    let localTag = {

        template: `

        <div class="box">

            <img src="img/666.jpg" alt="">

            <h3>凤哥</h3>

            <p>马叉虫❤马叉虫</p>

        </div>

        `

    };

    new Vue({

        el: '#app',

        components: {

            // mcc: localTag,

            // localTag,

            'local-tag': localTag,

        }

    })

</script>

</html>

例子

　　全局组件：

　　创建全局组件的方法是：

    Vue.component('global-tag', {

        template: `

        <div class="box" @click="action">

            <img src="img/666.jpg" alt="">

            <h3>凤哥</h3>

            <p>马叉虫❤{{ num }}</p>

        </div>

        `,

　　组件名字就是global-tag，这个组件就可以直接在html中使用：

    <div id="app">

        <global-tag></global-tag>

        <global-tag></global-tag>

        <global-tag></global-tag>

    </div>

　　在全局组件被多次调用时，会使用同一个数据，操作的也是同一个数据，为了实现数据的隔离，需要使用data方法进行设置：

        data () {

            return {

                num: 0

            }

        },

　　设置的数据是以函数的方法进行反馈，即开辟一个新的空间。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            box-shadow: 0 3px 5px 0 #666;

            width: 240px;

            height: 300px;

            text-align: center;

            padding: 20px 0;

            float: left;

            margin: 5px;

        }

        .box img {

            width: 200px;

        }

    </style>

</head>

<body>

    <div id="app">

        <global-tag></global-tag>

        <global-tag></global-tag>

        <global-tag></global-tag>

    </div>

</body>

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

<script>

    // 1) 创建全局组件

    // 2) 在父组件的template模板中直接渲染该全局组件

    Vue.component('global-tag', {

        template: `

        <div class="box" @click="action">

            <img src="img/666.jpg" alt="">

            <h3>凤哥</h3>

            <p>马叉虫❤{{ num }}</p>

        </div>

        `,

        data () {

            return {

                num: 0

            }

        },

        methods: {

            action() {

                this.num++;

            }

        }

    });

    // 数据局部化分析导入

    // a = function () {

    //     return {num: 10}

    // };

    // b1 = a();

    // b2 = a();

    // b3 = a();

    new Vue({

        el: '#app',

    })

</script>

</html>

例子

十。组件之间的交互：

　　在父组件中，需要传递信息给子组件，需要进行一系列的处理。

　　首先，在父组件中获取到了一组数据，而子组件需要对这一些列数据进行循环时，需要和子组件进行一一对应。

　　步骤如下：

　　1) 父组件提供数据

　　2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供

　　3) 在子组件实例中，通过props实例成员获得自定义属性

　　父组件中需要为子组件自定义属性，并传值:

    <div id="app">

        <info v-for="info in infos" :key="info.image" :myinfo="info"></info>

    </div>

　　子组件中需要使用props实例成员获取自定义属性值：

    let info = {

        template: `

        <div class="info">

            <img :src="myinfo.image" alt="">

            <p><b>{{ myinfo.title }}</b></p>

        </div>

        `,

        props: ['myinfo']

    };

　　如从即可调用父组件中的值。例子：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .info {

            text-align: center;

            width: 200px;

            padding: 3px;

            box-shadow: 0 3px 5px 0 pink;

            float: left;

            margin: 5px;

        }

        .info img {

            width: 200px;

        }

    </style>

</head>

<body>

    <div id="app">

        <info v-for="info in infos" :key="info.image" :myinfo="info"></info>

    </div>

</body>

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

<script>

    // 伪代码：模拟数据从后台请求

    /*

    let infos = '';

    document.onload = function () {

        $.ajax({

            url: '/images/',

            type: 'get',

            success (response) {

                infos = response.data

            }

        })

    };

     */

    let infos = [

        {

            image: 'img/001.png',

            title: '小猫'

        },

        {

            image: 'img/002.png',

            title: '蛋糕'

        },

        {

            image: 'img/003.png',

            title: '蓝糕'

        },

        {

            image: 'img/004.png',

            title: '恶犬'

        },

    ];

    let info = {

        template: `

        <div class="info">

            <img :src="myinfo.image" alt="">

            <p><b>{{ myinfo.title }}</b></p>

        </div>

        `,

        props: ['myinfo']

    };

    // 数据交互 - 父传子 - 通过绑定属性的方式

    // 1) 父组件提供数据

    // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供

    // 3) 在子组件实例中，通过props实例成员获得自定义属性

    new Vue({

        el: '#app',

        components: {

            info,

        },

        data: {

            infos,

        }

    })

</script>

</html>

　　子传父：

　　当留言需要删除是，使用组件实现，需要在子组件中使用自定义事件将数据携带出来，传递给父组件进行真正的删除：

　　1) 数据由子组件提供

　　2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来

　　3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

　　自定义属性方式如下，要在原模板中定义：

<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" 
:msg="msg" :index="i" :key="msg"></msg-li>

　　而在系统事件触发后，通过$emit('事件名'，数据)的方式触发自定义事件：

        methods: {

            // 系统的click事件

            deleteMsg(i) {

                // $emit('自定义事件名', 参数们)

                this.$emit('remove_msg', i);

                this.$emit('myclick', 1, 2, 3, 4, 5)

            }

        }

　　总例子如下：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .close:hover {

            cursor: pointer;

            color: red;

        }

    </style>

</head>

<body>

    <div id="app">

        <p>

            <input type="text" v-model="userMsg">

            <button @click="sendMsg">留言</button>

        </p>

        <ul>

            <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>

        </ul>

    </div>

</body>

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

<script>

    let msgLi = {

        template: `

        <li>

            <span class="close" @click="deleteMsg(index)">x </span>

            <span>第{{ index + 1 }}条：</span>

            <span>{{ msg }}</span>

        </li>

        `,

        props: ['msg', 'index'],

        methods: {

            // 系统的click事件

            deleteMsg(i) {

                // $emit('自定义事件名', 参数们)

                this.$emit('remove_msg', i);

                this.$emit('myclick', 1, 2, 3, 4, 5)

            }

        }

    };

    // 组件交互-子传父

    // 1) 数据由子组件提供

    // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来

    // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

    new Vue({

        el: '#app',

        data: {

            msgs: [],

            userMsg: ''

        },

        methods: {

            sendMsg() {

                if (this.userMsg) {

                    this.msgs.push(this.userMsg);

                    this.userMsg = "";

                }

            },

            removeAction(i) {

                this.msgs.splice(i, 1)

            }

        },

        components: {

            msgLi

        }

    })

</script>

</html>

巴特西

day65_10_9vue循环指令与组件

最新文章

热门文章