到了Vue2.x有哪些变化?—— 知识点

1. 关于模板:在每个组件模板中(template),不在支持片段代码。

个人理解:在template中必须有有一个根元素(root element)来包裹住所有代码。也就是template标签只能有一个亲儿子。

<body>
    <template id="testMsg">
        <h3>我是组件msg</h3><span>我是span</span>  <!-- 此处是错的在2.x中 -->
    </template>
    <div id="app">
        <my-msg></my-msg>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    Vue.component('myMsg',{
        template: '#testMsg'
    });
    var vm = new Vue({
        el: '#app',
    });
</script>

注意上面的模板(template)中,有两个根元素h3标签和span标签。报错如下图:



应该改成如下:

 <template id="testMsg">
       <div>
           <h3>我是组件msg</h3><span>我是span</span>
       </div>
    </template>
2. 关于组件的定义 :利用json格式来代替extend定义组件。比较简洁。
<body>
    <template id="home">
       <div id="box">
           <h3>我是组件msg</h3><span>我是span</span>
       </div>
    </template>
    <div id="app">
        <my-msg></my-msg>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var Home = { //2.0定义一个组件,用一个json
        template: '#home'
    };
    var vm = new Vue({
        el: '#app',
        components: {
            'myMsg':Home
        }
    });
</script>
3. 生命周期(钩子函数)

beforeCreate => 组件实例刚刚被创建,属性和方法都没有;
create => 属性和方法已经绑定成功,但DOM还没有生成;
beforeMount => 模板编译之前;
mounted => 模板已经编译完成,类似之前的ready,就是模板引擎数据有没有展示;有用
beforeUpdate => 组件(数据)更新之前,用于监测实例内的变化;有用
updated => 组件更新完毕;
beforeDestroy => 组件销毁之前; this.$destroy();
destroyed => 组件销毁之后;

<body>
    <div id="app">
        <input type="button" value="更新数据" @click="update" />
        <input type="button" value="销毁组件" @click="destroy" />
        {{ msg }}
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Vue2.x 生命周期'
        },
        methods: {
            update(){
                this.msg = '点击了数据更新吧'
            },
            destroy(){
                this.$destroy();//销毁组件
            }
        },
        beforeCreate() {
            console.log('vue刚刚被创建');//还没有属性和方法
        },
        created() {
            console.log('vue实例已经创建完成');//属性和方法已经绑定成功,DOM还没有生成
        },
        beforeMount() {
            console.log('模板编译之前');
        },
        mounted() {
            console.log('模板已经编译完成');//类似之前的ready,就是模板引擎数据有没有展示
        },
        beforeUpdate() {
            console.log('组件更新之前');
        },
        updated() {
            console.log('组件更新完毕');
        },
        beforeDestroy() {
            console.log('组件销毁之前');
        },
        destroyed() {
            console.log('组件销毁之后');//组件销毁之后,更新数据就无效了
        }
    });
</script>

页面效果如图:


4. 循环(v-for)
在Vue1.x中默认不能添加重复数据,需要在此元素上添加“track-buy="$index"”,但是在2.x中是不需要的,默认就可以重复添加。
Vue2.x中去掉了,隐式的变量($index、$key等),用的时候需要自己定义,类似原生js中的arr.forEach(function(val,key){});
<body>
    <div id="app">
        <input type="button" value="添加一个" @click="add" />
        <ul>
            <li v-for="(val,key) in list" :key="key"> <!-- :key="key"用唯一标识key,来提升循环性能 -->
                {{ val }}  => {{ key }}
            </li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            list: ['red','green','blue','pink']
        },
        methods: {
            add() {
                this.list.push('buy');
            }
        }
    });
</script>

页面效果如图:


5. 自定义键盘指令

绑定在 Vue.config上了

Vue.config.keyCodes.xxx = xxx;

<script type="text/javascript">
    Vue.config.keyCodes.ctrl = 17;
    var vm = new Vue({
        el: '#app',
        methods: {
            change() {
                alert('改变了');
            }
        }
    });
</script>
6. 过滤器

Vue2.x把所有系统内置的过滤器都删除。但是可以直接展示json数据

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            msg: {
                a:1,
                b:2,
                c:3
            }
        }
    });
</script>

json数据展示如图:



注:可参考lodash工具库。

自定义传参的方式发生变化了(函数传参的方式),参数在括号内{{ msg | touble(1,2)}}
<body>
    <div id="app">
        {{ msg | touble(1,2)}}
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    Vue.filter('touble',function (n,a,b) {
        console.log('参数a:'+ a +'  参数b:'+b);
        return n<10?'0'+n:''+n;
    })
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 18
        }
    });
</script>

效果如下图:


请看下回

推荐阅读更多精彩内容