Vue基础笔记2

目录

1. 如何获取Vue对象中的成员？

第一种：this.$options.自定义的成员对象
第二种：this.$data.msg  获取的是vue对象中的data对象下的msg值

2. pre指定

场景：在vue控制的组件中，想要在组件中不被vue控制，就需要使用对应的标签就需要被v-pre修饰

3. for循环

<p v-for='v in arr'>
	<span>{{ v }}</span>
</p>



<p v-for='{k,v} in arr'>
	<span>{{ k + "" + v }}</span>
</p>

#　

4. todolist

消息删除 ，增加

5. 分隔符

6. computed 计算后的

  • 计算后的属性，不能与data下的key重复定义
  • 计算后属性必须渲染后，绑定的方法才会生效
  • 计算后的属性绑定的方法中任意的变量值更新，方法都会被调用
  • 计算后属性为只读属性（不可写）
<head>
    <meta charset="UTF-8">
    <title>获取成员对象</title>
</head>
<body>

<div id="app">

    姓：<input type="text" name="fisrt_name" v-model="f_name">
    名: <input type="text" name="last_name" v-model="l_name">
    <h1>{{ xyz }}</h1>


</div>


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

<script>
    new Vue({
        el: "#app",
        data: {
            f_name: "",
            l_name: "",
        },
        computed:{
            xyz(){
                console.log("111");
                //当computed的函数中 有  包含data中的属性时，一旦属性值发生改变，那么对应的computed下对应的函数就会被执行。
                return this.f_name + this.l_name
            }

        }


    })
</script>

7. vue的生命周期（讲解不全）

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
</script>
</html>

8. watch 监听绑定的变量

<head>
    <meta charset="UTF-8">
    <title>获取成员对象</title>
</head>
<body>

    <div id="app">
        <input type="text" name="num" v-model="a">
        
        <h1>{{ b }}</h1>
        <h1>{{ c }}</h1>
        <h1>{{ d }}</h1>

    </div>

</body>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
            c: "",
        },
        watch:{
            a(){
                this.c = this.a * 10;
                this.d = this.a * 20;
            }
        }
    })
</script>

9. 组件（重点）

组件的组成部分：由 template + css + js 三部分组成(.vue文件)

特点：

  • 组件具有复用性
  • 复用组件时，数据要隔离
  • 复用组件时，方法不需要隔离，因为方法使用隔离数据就可以产生区别

组件的详细介绍：

  • 每一个组件都有自己的template(虚拟DOM)，最后要替换掉真实DOM(渲染)
  • 挂载点el，在根组件没有规定template，用挂载的真实DOM拷贝出虚拟DOM，完成实例创建后再替换掉真实DOM(渲染)
  • 挂载点el，在根组件规定template，就采用自己的template作为虚拟DOM，挂载点还是必须的，用于占位
  • 所有 new Vue() 产生的组件都称之为根组件 - 项目开发时，整个项目只有一个根组件
  • template只能解析一个根标签
<head>
    <meta charset="UTF-8">
    <title>获取成员对象</title>
    <style>
        .ad{
             400px;
            height: 400px;
            background-color: red;
        }

    </style>
</head>
<body>

<div id="app">
    
    <h1>{{ msg }}</h1>

    <div id="naa">

        <global-tag></global-tag>

    </div>

</div>


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

<script>
    // 全局模板 不需要  注册，直接使用即可
    Vue.component('global-tag',{
        template: `
        <div class="ad">
            <h2>我是全局的模板</h2>
        </div>
        `
    });
    
    // 局部模板，需要在根组件中注册。
    let localTag = {
        template: `
        <div class="ad">
            <img src="img/mn.jpg" alt="">
            <h4>美女</h4>
        </div>
        `
    };

	// 根组件
    new Vue({
        el: "#app",
        data: {
            msg: "message",
        },
        template: `
        <div id="python">
            <h1>我把根标签替换了</h1>
        </div>
        `,
        // 将局部模板注册到根组件中
        components:{
            localTag,
        }
    })
</script>

10. 组件复用，数据隔离

除了根组件，数据都是函数的返回值的字典

<head>
    <meta charset="UTF-8">
    <title>获取成员对象</title>
    <style>
        .ad {
             200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
             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>
    // 局部组件
    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 ++
            }
        },
    };

    //全局组件
    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 ++
            }
        }
    });


    // 根组件app
    new Vue({
        el: "#app",
        data: {
            msg: "message",
        },
        components: {
            localTag
        }
    });

    // 根组件main
    new Vue({
        el: "#main",
        data: {
            msg: "message",
        },
        components: {
            localTag,
        }
    })
</script>

特点：

  • 子组件自己管理自己的数据，方法。

11. 组件信息 父 传 子

<head>
    <meta charset="UTF-8">
    <title>获取成员对象</title>
    <style>
        .ad {
             200px;
            padding: 5px;
            margin: 5px;
            box-shadow: 0 0 5px 0 gold;
            float: left;
        }
        .ad img {
             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>
                <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: {
            msg: "message",
            ads: ads,
        },
        components: {
            localTag,
        },
    })
</script>

总结：

  • 父组件与子组件进行数据交换时，是通过循环遍历数据ad后，然后利用子组件自定义的属性ad_dic将ad的值赋值给ad_dic
  • 赋值后，通过子组件的props成员属性，可以拿到对应的子组件属性指令，这样就等同于拿到了ad的值。
  • 在赋值给子组件下的其他标签时，如果是赋值给属性就一定要加上“:”，这样才能被Vue管理。如果是插值表达式，直接使用即可。

12. 组件信息 子 传 父

<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" name="info" v-model="msg">
        <button @click="down_btn"> 提交 </button>
    </p>
    <ul>
        <msg-tag :notice="info" :index="i"  v-for="(info,i) in infos" :key="info" @del_action="del_li"></msg-tag>
    </ul>

</div>


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

<script>
    let msgTag = {
        props: ['notice','index'],
        template: `
        <li>
            <span @click="del_fn" class="del">X</span>
            <span> {{ notice }} </span>
        </li>
        `,
        methods: {
            del_fn(){
                this.$emit('del_action', this.index)
            },
        }
    };

    new Vue({
        el: "#app",
        data: {
            msg: "",
            infos: JSON.parse(sessionStorage.infos||'[]'),
        },
        components:{
            msgTag
        },
        methods: {
            down_btn(){
                if(this.msg){
                    this.infos.unshift(this.msg);
                    this.msg = '';
                    sessionStorage.infos = JSON.stringify(this.infos)
                }
            },

            del_li(index) {
                console.log(index);
                console.log(111);
                this.infos.splice(index, 1);
                sessionStorage.infos = JSON.stringify(this.infos);
                console.log(sessionStorage.infos);
            }
        }
    })
</script>

总结：

  • 父组件先将数据传给子组件，通过11中的示例进行传输
  • 子组件msgTag在删除数据时，需要将数据提交给父组件app，然后由父组件对数据进行删除。详细流程为：
    • 子组件需要在自己的标签中自定义一个事件（del_action，属性名可随意取），注意该属性需要加@符号，表示被Vue管理
    • @del_action="del_li",对应的del_li变量由父组件提供，注意该变量是一个事件。
    • 子组件向父组件提交数据时使用的方法为：this.$emit('del_action', this.index)，this.index为参数。
    • 最后对数据的处理逻辑都在父组件app的del_li方法中处理
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/plf-Jack/p/11426548.html