Vue

作者: LorenaLu | 来源:发表于2017-09-01 09:56 被阅读0次

    生命周期(钩子)函数

    1、created
    2、mounted
    3、updated
    v-model.lazy 数据变化将在文本框失去焦点时触发,默认是keydown
    .trim
    .number 转换为数字

     <div id="box">
            <input type="text" v-model.number="msg">
            {{msg}}
        </div>
    
      var vm = new Vue({
            el:"#box",
            data:{
                msg : "Hello Vue"
            },
            created: function(){
                console.log("创建成功",this.$el)//undefied
            },
            mounted :function(){
                console.log("挂载成功",this.$el)//<div...>
            },
            updated:function(){
                console.log("重新渲染完成")
            }
        })
        console.log(vm.$el)
    

    4、watch
    5、mixins
    混合,对于生命周期类函数,不会覆盖都将被执行;
    对于 methods 之类的函数,将优先使用组件或实例内的同名函数

    总结

    v-for、 解决不能识别的问题 :key 、v-model 、v-class 、v-style
    v-bind 、:、v-if 、v-else、 v-else-if、v-show
    v-html 、v-once 、v-on:click、@click

    
    var vm = new Vue({//根组件
            el: "#box",
            data: {
                msg: "Hello Vue",
            },
            methods:{},
            computed:{},
            watch:{},
            directives:{},
            filters:{},
            created:function(){},
            mounted:function(){},
            beforeUpdate:function(){},
            update:function(){},
            destroyed:function(){},
            components: { //子组件
                data: function(){
                    return {}
                },
                methods: {},
                computed: {},
                watch: {},
                directives: {},
                filters: {},
                created: function () { },
                mounted: function () { },
                beforeUpdate: function () { },
                update: function () { },
                destroyed: function () { },
            }
        })
        vm.$mount("sel")
        vm.$watch("attr",function(){})
        vm.$el
        vm.$emit(eventName[,params])
        vm.$on(eventName,function(){})
    

    npm install -g cnpm --registry=http://registry.npm.taobao.org/

    cnpm install -g vue-cli
    常用命令:
    vue init webpack myapp
    cnpm install --save-dev watchpack ajv chokidar schema-utils (丢失包后安装)
    cnpm install//脚手架工具依赖的模块
    npm run dev

    cnpm install --save-dev vuex

    相关文章

      网友评论

        本文标题:Vue

        本文链接:https://www.haomeiwen.com/subject/flkelxtx.html