Vue2.0的改变

vue2.0-组件定义方式

全局

 <script>
        var Home={  //这是2.0组件
            template:'#aaa'
        };  //Vue.extend()

        Vue.component('my-aaa',Home);


        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };
    </script>
<template id="aaa">
        <div>
            <h3>我是组件</h3>
            <strong>我是加粗标签</strong>
        </div>
    </template>
    <div id="box">
        <my-aaa></my-aaa>
        {{msg}}
    </div>

局部

var Home={  //这是2.0组件
            template:'#aaa'
        };  //Vue.extend()



        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                components:{
                    'aaa':Home
                }
            });
        };

Vue.component('my-aaa',{
            template:'#aaa'
        });

        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };

生命周期

beforeCreate    组件实例刚刚被创建,属性都没有
        created    实例已经创建完成，属性已经绑定
        beforeMount    模板编译之前
        mounted    模板编译之后，代替之前ready  *
        beforeUpdate    组件更新之前
        updated    组件更新完毕    *
        beforeDestroy    组件销毁前
        destroyed    组件销毁后

  <script>

        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                methods:{
                    update(){
                        this.msg='大家好';
                    },
                    destroy(){
                        this.$destroy();
                    }
                },
                beforeCreate(){
                    console.log('组件实例刚刚被创建');
                },
                created(){
                    console.log('实例已经创建完成');
                },
                beforeMount(){
                    console.log('模板编译之前');
                },
                mounted(){
                    console.log('模板编译完成');
                },
                beforeUpdate(){
                    console.log('组件更新之前');
                },
                updated(){
                    console.log('组件更新完毕');
                },
                beforeDestroy(){
                    console.log('组件销毁之前');
                },
                destroyed(){
                    console.log('组件销毁之后');
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="更新数据" @click="update">
        <input type="button" value="销毁组件" @click="destroy">
        {{msg}}
    </div>
</body>

组件2.0循环

<script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    list:['width','height','border']
                },
                methods:{
                    add(){
                        this.list.push('background');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="添加" @click="add">
        <ul>
            <li v-for="(val,index) in list" :key="index">
                {{val}} {{index}}
            </li>
        </ul>
    </div>
</body>

自定义键盘

 <script>
        //Vue.directive('on').keyCodes.ctrl=17;
        Vue.config.keyCodes.ctrl=17;

        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                },
                methods:{
                    change(){
                        alert('改变了');
                    }
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keyup.ctrl="change">
    </div>
</body>

单一事件中心管理组件通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //准备一个空的实例对象
        var Event=new Vue();


        var A={
            template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是a数据'
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是b数据'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));

                //接收B组件的数据
                Event.$on('b-msg',function(a){
                    this.b=a;
                }.bind(this));
            }
        };


        window.οnlοad=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>
</html>

vue2.0:
bower info vue

http://vuejs.org/

到了2.0以后，有哪些变化?

在每个组件模板，不在支持片段代码
组件中模板:

 之前:
     <template>
         <h3>我是组件</h3><strong>我是加粗标签</strong>
     </template>
 现在:  必须有根元素，包裹住所有的代码
     <template id="aaa">
             <div>
                 <h3>我是组件</h3>
                 <strong>我是加粗标签</strong>
             </div>
     </template>

关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

Vue.component(组件名称,{ 在2.0继续能用
```
 data(){}
 methods:{}
 template:
```
});

2.0推出一个组件，简洁定义方式：
var Home={
```
 template:''        ->   Vue.extend()
```
};

生命周期
之前:

 init    
 created
 beforeCompile
 compiled
 ready        √    ->     mounted
 beforeDestroy    
 destroyed

现在:

 beforeCreate    组件实例刚刚被创建,属性都没有
 created    实例已经创建完成，属性已经绑定
 beforeMount    模板编译之前
 mounted    模板编译之后，代替之前ready  *
 beforeUpdate    组件更新之前
 updated    组件更新完毕    *
 beforeDestroy    组件销毁前
 destroyed    组件销毁后

循环
2.0里面默认就可以添加重复数据

arr.forEach(function(item,index){

});

去掉了隐式一些变量
```
 $index    $key
```
之前:
```
 v-for="(index,val) in array"
```
现在:
```
 v-for="(val,index) in array"
```

track-by="id"
变成

 <li v-for="(val,index) in list" :key="index">

自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;

现在: Vue.config.keyCodes.ctrl=17
过滤器
之前:
```
 系统就自带很多过滤
 {{msg | currency}}
 {{msg | json}}
 ....
 limitBy
 filterBy
 .....
```
一些简单功能，自己通过js实现

到了2.0，内置过滤器，全部删除了

lodash    工具库    _.debounce(fn,200)


自定义过滤器——还有
    但是,自定义过滤器传参

    之前:    {{msg | toDou '12' '5'}}
    现在:     {{msg | toDou('12','5')}}

组件通信:
vm.$emit()
vm.$on();

父组件和子组件:

子组件想要拿到父组件数据:
    通过  props

之前，子组件可以更改父组件信息，可以是同步  sync
现在，不允许直接给父级的数据，做赋值操作

问题，就想更改：
    a). 父组件每次传一个对象给子组件, 对象之间引用    √
    b). 只是不报错, mounted中转

可以单一事件管理组件通信: vuex
var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
    //data
}.bind(this));

debounce 废弃
-> lodash

    _.debounce(fn,时间)

vue2.0-组件定义方式

生命周期

组件2.0循环

自定义键盘

单一事件中心管理组件通信

如何使用 JS 判断用户是否处于活跃状态

lightdb秒级增加列和删除列（not null带默认值）

lightdb数据库超时相关控制参数

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

❤️‍🔥 Solon Cloud Event 新的事务特性与应用

lightdb mysql 8.0兼容之不可见主键

使用 JS 实现在浏览器控制台打印图片 console.image()

基于Ubuntu-22.04安装K8s-v1.28.2实验（四）使用域名访问网站应用

js繼承，這次把你喫透

手機端一像素解決辦法

Flex 佈局教程

better-scroll插件初使用

better-scroll的參數和方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結