VUE初识2.5

与Recat、Angular相比:

  • 中文文档更加完善
  • 代码更轻量
  • 上手简单,容易使用

NUXT框架可以快速实现服务器端渲染,随着WEEX的推出可以使用VUE的语法编写原生APP。

  • Axios:获取Ajax数据。
  • Vue Router:多页面之间的路由。
  • Vuex:各组件之间的数据共享。
  • 异步组件:代码上线性能更优。
  • Stylus:编写前端样式。
  • 递归组件:组件自身调用组件自己。
  • 各种插件、拆分公用组件。
VUE生命周期

MVVM设计模式

MVP模式面向DOM开发,MVVM面向数据开发。

自定义组件

//自定义 全局 组件TodoItem 使用时使用<todo-item></todo-item>标签
Vue.component("TodoItem",{
    props: ['content'],
    template:"<li>{{content}}</li>"  //模板中使用插值表达式
});
//自定义局部组件
var TodoItem = {
    props: ['content'],
    template:"<li>{{content}}</li>"
}
//自定义组件注册到Vue实例中
var app = new Vue(
    el: "#app",
    components: {
        TodoItem: TodoItem
    },
    data: { }
})
<!--使用自定义组件-->
<todo-item v-bind:content="item" v-for="item in list"></todo-item>

组件化:有利于后续维护开发。

组件间传值

父组件向子组件传值使用 v-bind: 向子组件传入绑定值,子组件使用 props 接受数据。

子组件向父组件传值通过 $emit 触发父组件监听的事件,向父组件传值。

v-on 指令:添加时间监听器

v-bind 可简写成 :

<todo-item :content="item" 
           :index="index"
           v-for="(item,index) in list"
           @delete="handleItemDelete">
</todo-item>
//自定义 全局 组件TodoItem
Vue.component("TodoItem",{
    props: ['content','index'],
    template:"<li @click='handleItemClick'>{{content}}</li>",
    methods:{
        handleItemClick: function(){
            this.$emit("delete",this.index)
        }
    }
});
var app = new Vue({
    el: '#app',
    data:{ },
    methods:{
        handleBtnClick: function () {
            this.list.push(this.inputVal);
        },
        handleItemDelete: function(index){
            this.list.splice(index,1);
        }
    }
})

UyoAhz