码迷,mamicode.com
首页 > 其他好文 > 详细

vue基本02

时间:2019-10-10 00:33:57      浏览:31      评论:0      收藏:0      [点我收藏+]

标签:lang   成功   nload   临时   padding   shadow   gif   事宜   语法   

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>

应用处就是比如在被v-model绑定的标签上加上v-once的属性,它就不会随着另外一个标签的值更改而更改。

v-cloak指令(懂得)

"""
v-cloak:防止页面闪烁
"""
<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>

条件指令

<!--
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指令(懂得)

"""
v-pre指令可以在vue控制范围内,构成部分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>

轮回指令

"""
1) 遍历字符串:可以只逐一遍历字符,也能够连同遍历索引
    <p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>
    
2) 遍历数组:可以只逐一遍历成员元素,也能够连同遍历索引
    <p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>
    
3) 遍历对象:可以只逐一遍历成员元素,也能够连同遍历成员键(key),还可以遍历成员key索引
    <p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
"""
<div id="app">
    <p>{{ str }}</p>
    <p>{{ str[0] }}</p>
    <div>
        <span v-for="ch in str">{{ ch }}</span>
    </div>
    <div>
        <!--针对轮回遍历的标签,经过过程会供给key属性来优化衬着速度,但key的值必须唯一(key可以不消供给) -->
        <span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
    </div>


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


    <div>
        <p v-for="ele in dic">{{ 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>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            str: abc123呵呵,
            arr: [3, 4, 1, 2, 5],
            dic: {
                name: Tank,
                age: 80,
                gender: 哇塞,
            }
        }
    })
</script>

todolist留言板案例

"""
1) 留言就是往留言数组中添加数据,删除留言就是从留言数组中移除数据

2) 前台数据库:localStorage 和 sessionStorage
    localStorage永久保存数据
    sessionStorage临时保存数据(当所属页面标签被封闭,数据被清空)
    
3) 前台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() {  // 留言事宜
                // 尾增
                // 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>

实例成员 - 插值表达式符号(懂得)

<div id="app">
    {{ msg }}
    {[ msg ]}
</div>
<script>
new Vue({
    el: #app,
    data: {
        msg: 12345
    },
    // delimiters: [‘{{‘, ‘}}‘],
    delimiters: [{[, ]}],
})
</script>

修改插值符号。

计算属性

// 1) computed是用来声明 办法属性 的
// 2) 声明的办法属性不克不及在data中反复定义
// 3) 办法属性必须在页面中衬着应用,才会对外部出现的一切变量停止监听
// 4) 计算属性的值来源于监听办法的前往值
<div id="app">
    姓:<input type="text" v-model="fName">
    名:<input type="text" v-model="lName">
    姓名:<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            fName: ‘‘,
            lName: ‘‘,
        },
        computed: {
            flName(){
                // this.fName和this.lName有值发送改变,该办法都邑被调用
                // 变量flName的值是由函数的前往值决定
                return this.fName + this.lName;
            }
        }
    })
</script>

属性监听

// 1) watch为data中已存在的属性设置监听事宜
// 2) 监听的属性值发送改变,就会触发监听事宜
// 3) 监听事宜的办法前往值没有任何意义
<div id="app">
    姓名:<input type="text" v-model="fullName">
    姓:<b>{{ firstName }}</b>
    名:<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            fullName: ‘‘,
            firstName: ‘‘,
            lastName: ‘‘,
        },
        watch: {
            // fullName值改变,就会调用绑定的事宜办法
            fullName() {
                nameArr = this.fullName.split(‘‘);
                this.firstName = nameArr[0];
                this.lastName = nameArr[1];
            }
        }
    })
</script>

组件

// 1) 组件:一个包含html、css、js自力的集合体,如许的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与部分组件
//      根组件:一切被new Vue()产生的组件,在项目开辟阶段,一个项目只会出现一个根组件
//      全局组件:不消注册,便可以成为任何一个组件的子组件
//      部分组件:必须注册,才可以成为注册该部分组件的子组件
// 3) 每个组件都有本身的html构造,css款式,js逻辑
//      每个组件其实都有本身的template,就是用来标识本身html构造的
//      template模板中有且只要一个根标签
//      根组件普通不供给template,就由挂载点的真实DOM供给html构造
// 4) 除根组件的其他组件,数据要有部分感化域,包管组件复用时,各组件间数据的自力性
// 5) 在多组件共处时,在哪个组件模板中出现的变量,有以后组件组件供给

部分组件

// 1) 创建部分组件
// 2) 在父组件中注册该部分组件
// 3) 在父组件的template模板中衬着该部分组件
<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>
<div id="app">
    <!--<mcc></mcc>-->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    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>

compnents中注册了localTag(弥补的是,自定义标签不克不及用驼峰体的方法,由于在衬着时会同一改换成小写)

全局组件

// 1) 创建全局组件
// 2) 在父组件的template模板中直接衬着该全局组件
<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>
<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script src="js/vue.js"></script>
<script>
    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();
    // 如许处理b1,b2,b3的数据就彼此自力的,然则都来源于a

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

组件交互-父传子

// 数据交互 - 父传子 - 经过过程绑定属性的方法
// 1) 父组件供给数据
// 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件供给
// 3) 在子组件实例中,经过过程props实例成员取得自定义属性
<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>
<div id="app">
    <!-- 2) 在父组件模板中,为子组件标签设置自定义属性,绑定的值由父组件供给 -->
    <info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
<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>
        `,
        // 3) 在子组件实例中,经过过程props实例成员取得自定义属性
        props: [myinfo]
    };

    new Vue({
        el: #app,
        components: {
            info,
        },
        data: {
            infos,  // 1) 父组件供给数据
        }
    })
</script>

在子组件的模板中拿到根组件中的数据。父组件中经过过程自定义属性myinfo=‘info‘,然后在子组件中经过过程props:[‘myinfo‘]来获得的父组件传过去的数据,最后将其衬着到子组件的模板上。

组件交互-子传父

// 组件交互-子传父
// 1) 数据由子组件供给
// 2) 子组件外部经过过程触发体系事宜,发送一个自定义事宜,将数据携带出来
// 3) 父组件位子组件标签的自定义属性经过过程办法完成,便可以经过过程参数拿到子组件传递处理的参数
<style>
    .close:hover {
        cursor: pointer;
        color: red;
    }
</style>
<div id="app">
    <p>
        <input type="text" v-model="userMsg">
        <button @click="sendMsg">留言</button>
    </p>
    <ul>
        <!-- 2) 子组件外部经过过程触发体系事宜,发送一个自定义事宜,将数据携带出来 -->
        <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
    </ul>
</div>
<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) {
                // 1) 数据由子组件供给
                // $emit(‘自定义事宜名‘, 参数们)
                this.$emit(remove_msg, i);
            }
        }
    };
    new Vue({
        el: #app,
        data: {
            msgs: [],
            userMsg: ‘‘
        },
        methods: {
            sendMsg() {
                if (this.userMsg) {
                    this.msgs.push(this.userMsg);
                    this.userMsg = "";
                }
            },
            // 3) 父组件位子组件标签的自定义属性经过过程办法完成,便可以经过过程参数拿到子组件传递处理的参数
            removeAction(i) {
                this.msgs.splice(i, 1)
            }
        },
        components: {
            msgLi
        }
    })
</script>

经过过程子组件模板上绑定的点击事宜触发deleteMsg(index),在deleteMsg(i)中触发了自定义事宜remove_msg并让其携带了参数i,自定义事宜触发后又会触发removeAction事宜,终究removeAciton事宜接收到了要删除的数据的索引,将其删除。

 

vue基本02

标签:lang   成功   nload   临时   padding   shadow   gif   事宜   语法   

原文地址:https://www.cnblogs.com/wangnanfei/p/11645083.html

(0)
(0)
   
告发
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!