1. 技术文章
  2. VUE组件

VUE组件

由 ≡放荡痞女 提交于 2020-02-08 00:41:53

v-once指令

　　v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<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>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '初始值'
        }
    })
</script>
</html>

v-cloak指令：防止页面闪烁

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{ }}
        {{ }}
        {{ }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
    })
</script>
</html>

条件指令

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

　　v-if是不渲染标签， v-show以 display:none 方式渲染

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- v-if   v-show 以 display:none 方式渲染 -->
<div id="app">
    <p v-if="isShow">if条件指令</p>
    <p v-show="isShow">show条件指令</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>
</html>

    v-if="变量"　　v-else-if="变量"　　v-else　　一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            height: 300px;
        }
        .r { background-color: red; }
        .y { background-color: yellow }
        .b { background-color: blue; }
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<p v-if="0">if</p>-->
    <!--<p v-else-if="">elseif</p>-->
    <!--<p v-else>else</p>-->
    <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="showName"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            showName: 'bBox'
        },
        methods: {
            changeBox(name) {
                this.showName = name;
            }
        }
    })
</script>
</html>

v-pre指令

　　v-pre指令可以在vue控制范围内，形成局部vue不控制区域(局部不解析vue语法)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <p v-pre>
        {{ }}
        <span v-if="hehe"></span>
    </p>
    <p v-pre>
        {{ }}
        <span v-if="hehe"></span>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        }
    })
</script>
</html>

循环指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <!--<p>{{ str }}</p>-->
    <!--<p>{{ str[0] }}</p>-->

    <!--<div>-->
    <!--<p v-for="ch in str">{{ ch }}</p>-->
    <!--</div>-->

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

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

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            str: 'abcd',
            arr: [1, 2, 4, 5],
            dic: {
                name: 'Hui',
                age: 80,
                gender: '靠'
            }
        }
    })
</script>
</html>

todolist留言板案例

　　留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据， 前台数据库：localStorage 和 sessionStorage， localStorage永久保存数据，  sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)， 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与

<!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(){
                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>
</html>

实例成员 - 插值表达式符号

<!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: '123'
        },
        delimiters: ['{[',']}'],
    })
</script>
</html>

计算属性

　　computed是用来声明 方法属性 的， 声明的方法属性不能在data中重复定义， 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听， 计算属性的值来源于监听方法的返回值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <p @click="fn">{{ num }}</p>
    <p>十位：{{ parseInt(num / 10 )}}</p>
    <p>个位：{{ num % 10 }}</p>

    十位：<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>
    结果：{{ result }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 99,
            shi: '',
            ge: ''
        },
        methods: {
            fn() {
                this.num -= 3;
            }
        },
        computed: {
            result(){
                return this.shi * 10 + +this.ge
            }
        }
    })
</script>
</html>

属性监听

　　watch为data中已存在的属性设置监听事件， 监听的属性值发送改变，就会触发监听事件，监听事件的方法返回值没有任何意义。

<!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;
            }
        },
        watch: {
            num() {
                this.shi = parseInt(this.num / 10);
                this.ge = this.num % 10;
            }
        }
    })
</script>
</html>

组件

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

　　分组分为根组件、全局组件与局部组件

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

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

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

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

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

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

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

　　除根组件的其他组件，数据要有局部作用域，保证组件复用时，各组件间数据的独立性

　　在多组件共处时，在哪个组件模板中出现的变量，有当前组件组件提供

局部组件

　　创建局部组件，　在父组件中注册该局部组件，在父组件的template模板中渲染该局部组件

<!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">
    <local-tag></local-tag>
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div class="box">
            <img src="img/1.jpg" alt="">
            <h3>嗨皮</h3>
            <p>马叉虫</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        components: {
            'local-tag': localTag,
        }
    })
</script>
</html>

全局组件

　　创建全局组件，在父组件的template模板中直接渲染该全局组件

<!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>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    Vue.component('global-tag',{
        template: `
        <div class="box" @click="action">
            <img src="img/1.jpg" alt="">
            <h3>嗨皮</h3>
            <p>马叉虫{{ num }}</p>
        </div>
        `,
        data() {
            return {
                num: 0
            }
        },
        methods: {
            action() {
                this.num++;
            }
        }
    });

    new Vue({
        el: '#app',
    })
</script>
</html>

组件交互-父传子

　　数据交互 - 父传子 - 通过绑定属性的方式，父组件提供数据，在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供， 在子组件实例中，通过props实例成员获得自定义属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .info {
            box-shadow: 0 3px 5px 0 pink;
            width: 200px;
            text-align: center;
            padding: 3px;
            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 = [
    {
        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']
};

new Vue({
    el: '#app',
    components: {
        info,
    },
    data: {
        infos,
    }
})
</script>
</html>

组件交互-子传父

　　数据由子组件提供， 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来，父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数

<!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: {
            deleteMsg(i) {
                this.$emit('remove_msg',i);
                this.$emit('myclick',1,2,3,4,5)
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            msgs: [],
            userMsg: ''
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = '';
                }
            },
            removeAction(i) {
              this.msgs.aplice(i, 1)
            }
            },
        components:{
                msgLi
        }
    })
</script>
</html>

 

标签
vue
js代码
html代码
meta
app
meta标签
js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!