avatar

正进一步

只有喜欢,才会全情投入,才会成功!!!

不关注架构设计细节的程序员不是一个好架构师

  • Home
  • Tags
  • Categories
  • Archives
  • 2018寄语
VueJs_getters
正 · 2018/0209 · VueJs · 前端 · 
1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.component("sub1",{
       template:"#sub1",
       methods:{
       },
       computed:{
           totalPrice:function(){
               return this.$store.getters.totalPrice;
           },
           goods:function(){
               return this.$store.getters.goods;
           }
       }
   })
VueJs_actions
正 · 2018/0209 · VueJs · 前端

this.$store.dispatch(“loadData”) 触发 store的actions

1
2
3
4
5
6
7
8
9
10
actions:{
        loadData:function(store){
            axios.get("/admin/banner/cartList").then(function(resp){
                store.commit("setGoods",{goods:resp.data});
                //激发mutations
            }).catch(function(){

            })
        }
    }
VueJs_$nextTick
正 · 2018/0209 · VueJs · 前端 ·

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

Vue 在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环
中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM 操作。然后，
在下一个事件循环tick 中， Vue 刷新队列井执行实际（己去重的）工作。所以如果你用一个for 循
环来动态改变数据100•次，其实它只会应用最后一次改变，如果没有这种机制， DOM 就要重绘100
次，这固然是一个很大的开销。
Vue 会根据当前浏览器环境优先使用原生的Promise 血en 和MutationObserver ，如果都不支持，
就会采用setTimeout 代替。

理论上，我们应该不用去主动操作DOM ，因为Vue 的核心思想就是数据驱动DOM ，但在很
多业务里，我们避免不了会使用一些第三方库，比如popper等，这些基于原生JavaScript 的库都有创建和更新及销毁的完整生命周
期，与Vue 配合使用时，就要利用好$nextTick 。

VueJs_slot_scope数据传输插槽
正 · 2018/0208 · VueJs · 前端

Slot_scope 实际上就是用于 将组件内部的slot处的变量 放到了外部的template(div 也可以，大家可以多试几个)中,通过slot-scope进行使用
同一个slot内只能被放置一次

VueJs_$set动态响应属性添加
正 · 2018/0207 · VueJs · 前端

来自:https://cn.vuejs.org/v2/guide/reactivity.html

1
2
// Vue.set(this.user,this.property,"1_1"); 这种写法也是对的
this.$set(this.user,this.property,"1_1");

Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的

VueJs_组建通信_VueBus
正 · 2018/0207 · VueJs · 前端 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var bus =new Vue();
    Vue.component("myButton",{
        template:"#my_input",
        data:function(){
            return {
                counter:1,
            }
        },
        methods:{
            updateVal:function(){
                bus.name= ++this.counter;
                bus.$emit("on-message")
            }
        }

    })
    var app=new Vue({
        el:"#app",
        data:{
            "name":"namehere",
        },
        methods:{
        },
        mounted:function(){
            var _this= this;
            bus.$on("on-message",function(){
                _this.name=bus.name;
            })
        }
    })
VueJs_组件通信_Model
正 · 2018/0207 · VueJs · 前端 
1
2
<my-button v-model="value"></my-button>
    <my-button :value="value"  :name="name" @input="fname"></my-button>

v-model 实际上就是 @input的简写

VueJs_Emit使用
正 · 2018/0206 · VueJs · 前端 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Vue.component("myButton",{
        template:"#button_template",
        methods:{
            fireEventForParent:function(event){
                this.$emit("close",event,{name:"gz"});
            }
        },
        data:function () {
            return {}
        }
    })
    var app=new Vue({
        el:"#app",
        data:{
            "name":"gz",

        },
        methods:{
            processClose:function($event,obj){
                console.info(obj)
                console.info($event)
                console.info("close process invoked")
            }
        }
    })
VueJs_Props学习
正 · 2018/0206 · VueJs · 前端 
1
2
<div2 :u="user" :d="data" txt="helloworld" arr="[1,2,3]"></div2>
   <div2 :u="user" :d="data" txt="helloworld" :arr="[1,2,3]"></div2>

props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中
的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed
和方法methods 中使用.
如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅
仅是字符串
如果是引用类型，指向同一个内存空间，所以props 是对
苦？ 象和数组时，在子组件内改变是会影响父纽件的。