vue 操作

其他 2019-08-29 18:54:47 阅读次数: 0

vue成员获取

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <h1 @click="btnClick">{{ msg }}</h1>
        <p>{{ 10 | add }}</p>
        <p>{{ $data }}</p>
        <p>{{ $options.arr }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
            a: 1,
            b: 2,
        },
        methods: {
            btnClick() {
                console.log(this.msg)
            }
        },
        filters: {
            add(v) {
                return v+1
            }
        },
        arr: [1, 2, 3, 4],
    });

    console.log(app.msg);
    console.log(app.$data);
    console.log(app.$options.methods);
    console.log(app.$options.arr);
</script>
</html>

pre指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p v-pre>
            <!--v-pre的内部解除vue控制-->
            <!--{{}}不是插值表达式，msg不是变量，v-on不是指令，都是原义输出-->
            <p>{{ msg }}</p>
            <span v-on="abc"></span>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "message"
        }
    })
</script>
</html>

循环指令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{ arr }}</p>
        <p>
            <span>{{ arr[0] }}</span>
            <span>{{ arr[1] }}</span>
            <span>{{ arr[2] }}</span>
            <span>{{ arr[3] }}</span>
            <span>{{ arr[4] }}</span>
        </p>
        <div>
            <!--值 遍历-->
            <p v-for="v in arr">
                <span>{{ v }}</span>
            </p>
        </div>
        <div>
            <!--值，索引 遍历-->
            <p v-for="(v, i) in arr">
                <span>第{{ i + 1 }}个值：{{ v }}</span>
            </p>
        </div>
        <p>{{ student }}</p>
        <div>
            <p v-for="(v, k, i) in student">
                <span>{{ k, v, i | f1 }}</span>
            </p>
        </div>
        <div>
            <!--
            name: Bob | aendge:18 | ger:男
            name: Tom | age:1 | gender:男
            -->
            <p v-for="stu in stus">
                <!--<span v-for="(v, k, i) in stu">{{i?' | ':''}}{{k}}:{{v}}</span>-->
                <span v-for="(v, k, i) in stu">{{i|f2}}{{k}}:{{v}}</span>
            </p>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [1, 4, 2, 3, 5],
            student: {
                'name': 'Bob',
                'age': 18,
                'gender': '男'
            },
            stus: [
                {
                    'name': 'Bob',
                    'age': 18,
                    'gender': '男'
                },
                {
                    'name': 'Tom',
                    'age': 20,
                    'gender': '男'
                }
            ]
        },
        filters: {
            f1(k, v, i) {
                // return k + ":" + v + '(' + i + ')'
                return `${k}:${v}(${i})`  // ``中${}里面可以放变量
            },
            f2(i) {
                // i为0代表假，返回''，其它索引时返回' | '
                return i ? ' | ' : ''
            }
        }
    })
</script>
</html>

todolist案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>todolist</title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="info">
            <button @click="addMsg">留言</button>
            <ul>
                <li v-for="(msg, i) in msgs" @click="delFn(i)">{{ msg }}</li>
            </ul>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            // msgs: ['11111', '22222'],
            // msgs: sessionStorage.msgs && JSON.parse(sessionStorage.msgs) || [],
            // sessionStorage存放数组和字典需要JSON字符串参与
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            addMsg() {
                let info = this.info;
                if (info) {
                    // this.msgs.push(this.info);  // 尾增
                    this.msgs.unshift(this.info);  // 首增
                    // 清空留言框
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            delFn(i) {
                this.msgs.splice(i, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    })
</script>
</html>

分隔符成员

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
        [[ msg }}
        ${ msg }
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // 修改插值表达式符号
        // delimiters: ['[[', '}}'],
        // delimiters: ['${', '}'],
    })
</script>
</html>

计算属性成员

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="a">
            <input type="text" v-model="b">
        </p>
        <!--报错：计算后属性为只读属性-->
        <!--<input type="text" v-model="xyz">-->
        <!--关键：计算后属性必须渲染后，绑定的方法才会生效-->
        <p>{{ xyz }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            a: '',
            b: '',
            // 报错：计算后属性不需要在data中重复定义
            // xyz: '',
        },
        computed: {
            // 1) 计算后属性不需要在data中重复定义
            // 2) 计算后属性必须渲染后，绑定的方法才会生效
            // 3) 计算后属性绑定的方法中的任意变量值更新，方法都会被调用
            // 4) 计算后属性为只读属性(不可写)
            xyz () {
                // a值一变化，该方法就会被回调
                // 原因：计算后属性绑定的方法中的任意变量值更新，方法都会被调用
                this.a;
                // this.b;
                console.log('该方法调用了')
            }
            // 使用场景：一个计算后属性的值，可以来源于多个属性值
        }
    })
</script>
</html>

计算属性案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>
            姓：<input type="text" v-model="first_name">
            名：<input type="text" v-model="last_name">
        </p>
        <p>{{ full_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 使用场景：一个计算后属性的值，可以来源于多个属性值
    new Vue({
        el: '#app',
        data: {
            first_name: '',
            last_name: '',
        },
        computed: {
            full_name () {
                if (this.first_name && this.last_name)
                    return this.first_name + ' ' + this.last_name;
                return '姓名'
            }
        }
    })
</script>
</html>

监听属性成员

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num_a">
        <p>num_a: {{ num_a }}</p>
        <p>num_b: {{ num_b }}</p>
        <p>num_c: {{ num_c }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num_a: '',
            num_b: '',
            num_c: '',
        },
        watch: {
            // 1) 监听绑定的属性，该属性可以get、set
            // 2) 监听的属性一旦发生值更新，绑定的方法就会被调用
            // 3) 监听的属性是已定于的属性(必须在data中定义)
            num_a() {
                console.log('num_a值更新，该方法被调用');
                this.num_b = this.num_a * 10;
                this.num_c = this.num_a * 20;
            },
          }
    })
</script>
</html>

组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 组件：由 template + css + js 三部分组成(.vue文件)
    // 1）组件具有复用性
    // 2) 复用组件时，数据要隔离
    // 3) 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别

    // 组件介绍：
    // 1) 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
    // 2) 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
    // 3) 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
    // 4) 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
    // 5) template只能解析一个根标签
    let num = 100;
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        // template: '<div id="main"><p>{{ msg }}</p><p>{{ msg }}</p></div>'
        template: `
        <div id="main">
            <p>{{ msg }}</p>
            <p>{{ msg }}</p>
            <div>{{ msg }}</div>
            <div>${ num }</div>
        </div>
        `,

    })

</script>
</html>

局部组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--<div class="ad">-->
            <!--<img src="img/mn.jpg" alt="">-->
            <!--<h4>美女</h4>-->
        <!--</div>-->

        <!--<ad></ad>-->
        <!--<ad></ad>-->

        <!--3）组件渲染-->
        <local-tag></local-tag>
        <local-tag></local-tag>
        <local-tag></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1）创建组件
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女</h4>
        </div>
        `
    };
    new Vue({
        el: '#app',
        // 2）注册组件
        components: {
            // ad: localTag,
            // localTag: localTag,
            localTag
        }
    })
</script>
</html>

全局组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
    <div id="main">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    // 1）创建组件
    // 2）注册组件
    // 3）渲染组件
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女</h4>
        </div>
        `
    };

    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    Vue.component('global-tag', {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>共享美女</h4>
        </div>
        `
    });

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

组件复用的数据隔离

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
    <div id="main">
        <local-tag></local-tag>
        <global-tag></global-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 局部组件
    // 1）创建组件
    // 2）注册组件
    // 3）渲染组件
    let localTag = {
        template: `
        <div @click="click1" class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女被点了{{ num }}下</h4>
        </div>
        `,
        // 除了根组件，数据都是函数的返回值字典
        data () {  // 组件被复用一次，就会产生一套属于自己的数据字典
            return {
                num: 0
            }
        },
        methods: {
            click1() {
                this.num ++
            }
        },
    };

    // 全局组件
    // 1）创建组件
    // 2）渲染组件
    Vue.component('global-tag', {
        template: `
        <div class="ad" @click="click2">
            <img src="img/mn.jpg" alt="">
            <h4>共享{{ count }}次美女</h4>
        </div>
        `,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            click2() {
                this.count ++
            }
        }
    });

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

组件信息交互父传子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .ad {
            width: 200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
            width: 100%;
        }
        .ad h4 {
            margin: 0;
            font: normal 20px/30px '微软雅黑';
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <local-tag :ad_dic="ad" v-for="ad in ads" :key="ad.img"></local-tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        props: ['ad_dic'],
        template: `
        <div class="ad">
            <img :src="ad_dic.img" alt="">
            <h4>{{ ad_dic.title }}</h4>
        </div>
        `,
    };

    // 模拟后台的数据
    let ads = [
        {
            'img': 'img/001.png',
            'title': '小猫'
        },
        {
            'img': 'img/002.png',
            'title': '黄蛋'
        },
        {
            'img': 'img/003.png',
            'title': '蓝蛋'
        },
        {
            'img': 'img/004.png',
            'title': '短腿'
        },
    ];
    new Vue({
        el: '#app',
        data: {
            ads,  // 后期项目是后台返回的数据
        },
        components: {
            localTag
        }
    })
    // 分析数据 父传子
    // 1）父组件提供数据
    // 2）在父组件模板中，为子组件标签设置自定义属性绑定父级数据
    // 3）在子组件props成员中，接收自定义属性
    // 4）在子组件模板和方法中，使用自定义属性名就可以访问父级数据
</script>
</html>

组件信息交互子传父

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            font-size: 30px;
        }
        li:hover {
            color: orange;
            cursor: pointer;
        }
        .del:hover {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" v-model="info">
            <button @click="add_msg">留言</button>
            <ul>
                <msg-tag @del_action="del_li" :msg="msg" :index="i" v-for="(msg, i) in msgs" :key="msg"></msg-tag>
            </ul>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let msgTag = {
        props: ['msg', 'index'],
        template: `
        <li>
            <span @click="del_fn" class="del">x</span>
            <span>{{ msg }}</span>
        </li>
        `,
        methods: {
            del_fn() {
                this.$emit('del_action', this.index)
            }
        }
    };


    new Vue({
        el: '#app',
        components: {
            msgTag
        },
        data: {
            info: '',
            msgs: JSON.parse(sessionStorage.msgs || '[]'),
        },
        methods: {
            add_msg() {
                let info = this.info;
                if (info) {
                    this.msgs.unshift(this.info);
                    this.info = '';
                    sessionStorage.msgs = JSON.stringify(this.msgs);
                }
            },
            del_li(index) {
                console.log(index);
                this.msgs.splice(index, 1);
                sessionStorage.msgs = JSON.stringify(this.msgs);
            }
        }
    });
    // 分析数据 子传父
    // 1）子组件提供数据
    // 2）子组件通过系统事件激活自己的绑定方法，发送一个自定义事件，携带自身数据
    // 3）在父组件模板中的子组件标签中为自定义事件绑定父组件方法
    // 4）父组件实现方法获取到子组件数据
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/bladecheng/p/11431379.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022