zoukankan html css js c++ java

Vue基础笔记2

1. 如何获取Vue对象中的成员？
2. pre指定
3. for循环
4. todolist
5. 分隔符
6. computed 计算后的
7. vue的生命周期（讲解不全）
8. watch 监听绑定的变量
9. 组件（重点）
10. 组件复用，数据隔离
11. 组件信息父传子
12. 组件信息子传父

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方法中处理

查看全文

相关阅读:
web端限时活动逻辑处理总结
 js 的一些知识摘自http://img0.pconline.com.cn/Pc_intranet/1105/13/313647_7.pdf
HTML实现简单计算器
 HTML打折计算价格
 实现多线程的同时复制（三个线程同时复制）
利用多线程实现并发调用，实现一个存钱多人取钱函数
 用字符流实现每个文件夹中创建包含所有文件信息的readme.txt
Java实现文件在某个目录的检索
 Java实现列出目录下所有文件和文件夹
 大华、海康、宇视、华为等厂家RTSP标准拉流地址

原文地址：https://www.cnblogs.com/plf-Jack/p/11426548.html

Vue基础笔记2

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

2. pre指定

3. for循环

4. todolist

5. 分隔符

6. computed 计算后的

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

8. watch 监听绑定的变量

9. 组件（重点）

10. 组件复用，数据隔离

11. 组件信息 父 传 子

12. 组件信息 子 传 父

11. 组件信息父传子

12. 组件信息子传父