5、vueJs基础知识05

vue2.0相比于1.0的变化

　　1、在每个组件模板中，不再支持片段代码，需要一个根元素包裹

　　　　　组件中模板:

        之前:

            <template>

                <h3>我是组件</h3><strong>我是加粗标签</strong>

            </template>

        现在:  必须有根元素，包裹住所有的模板代码

            <template id="aaa">

                    <div>

                        <h3>我是组件</h3>

                        <strong>我是加粗标签</strong>

                    </div>

            </template>

　　2、关于组件定义

　　　　a、Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃　　　

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

　　　　c、2.0推出一个组件，简洁定义方式（json形式）：

　　　　var Home={
　　　　　　template:' ' -> 类似于之前的 Vue.extend()
　　　　};

　　3、生命周期　　　

　　　　vue1.0:
　　　　　　init
　　　　　　created
　　　　　　beforeCompile
　　　　　　compiled
　　　　　　ready　 √ -> mounted
　　　　　　beforeDestroy
　　　　　　destroyed

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

　　4. 循环
　　　　2.0里面默认就可以添加重复数据，不用track by了

　　　　arr.forEach(function(item,index){

　　　　});

　　　　去掉了隐式一些变量，1.0可以不写index，但是2.0必须写上index，并且数据顺便换了
　　　　　　　　$index $key

　　　　之前:
　　　　　　v-for="(index,val) in array"

　　　　现在:需要显示的写上
　　　　　　v-for="(val,index) in array" 贴近原生的循环的参数顺序
　　　　　　v-for="(val,key) in object"

　　　　track-by="id"
　　　　　　变成
　　　　　　<li v-for="(val,index) in list" :key="index">
　　　　　　　　　　:key="index"只是为了提高循环性能

　　5、自定义键盘指令

　　　　之前：Vue.directive('on').keyCodes.f1=17;

　　　　现在: Vue.config.keyCodes.ctrl=17

　　6、过滤器　　

　　　　之前:
　　　　　　系统就自带很多过滤
　　　　　　　　{{msg | currency}}
　　　　　　　　{{msg | json}}（2.0中直接转成json展示了）
　　　　　　　　....
　　　　　　　　limitBy
　　　　　　　　filterBy
　　　　　　　　.....
　　　　　　　　一些简单功能，自己通过js实现

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

　　　　　　官方推荐：lodash 工具库（类似于underscore.js，处理数组和对象等的js库） _.debounce(fn,200)
　　　　　　网址https://www.lodashjs.com/

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

　　　　　　之前: {{msg | toDou '12' '5'}} （空格隔开）
　　　　　　现在: {{msg | toDou('12','5')}} （类似于函数调用了）

　　　　7、组件通信

　　　　　　vm.$emit()
　　　　　　vm.$on();

　　　　　　父组件和子组件:

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

　　　　　　之前1.0，子组件可以更改父组件信息，可以是同步 sync
　　　　　　　　子组件的属性后面加个.sync同步更改父组件的数据

　　　　　　　　<child-com :msg.sync="a"></child-com>

　　　　　　现在2.0，不允许直接给父级的数据，做赋值操作

　　　　　　问题，就想更改：
　　　　　　　　a). 父组件每次传一个对象给子组件, 对象之间引用(同一份数据) √
　　　　　　　　b). 只是不报错, mounted中转，定义子组件自己的变量，在mounted里面把父元素的数据赋值给子组件的变量（只改子组件数据）

单一事件管理组件通信: vuex的前身
　　var Event=new Vue();（通过中转站来进行数据交换）

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

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

　　　　 //准备一个空的实例对象

        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));

            }

        };

巴特西

5、vueJs基础知识05

最新文章

热门文章