Vue基础（二、基本指令二）

一、:style

div :style="{key:value,key:value}"

二、v-html和v-text

v-html 主要渲染富文本 （带标签的） 容易造成代码注入攻击
v-text 渲染普通字符串

 三、v-cloak

v-text和{{}} 区别

{{}} 当网络不好的情况下可能出现乱码闪烁的问题

style
    [v-cloak]{display:none}

div #app v-cloak    当vue解析道指令的时候 将该元素显示出来

 

四、v-model

v-model双向数据绑定   视图和数据相互都同步一直的

input v-model='value'

select v-model='val'
        option value=''
        
input type=checkbox v-model='val'  val-- true/false
 
input type=radio  v-model='val' value='男'

 

五、v-pre v-once

v-pre vue解析的时候越过此元素 
v-once 只解析一次，数据更新后也不在解析了

六 、自定义指令

v-drag. 拖拽
v-bgColor
  Vue.directive('drag', {
            bind(el) {
                el.style.position = 'absolute'
                el.onmousedown = function () {
                    // console.log('onmousedown-aaa')
                    document.onmousemove = function (e) {
                        el.style.left = e.pageX + 'px'
                        el.style.top = e.pageY + 'px'
                    }
                    document.onmouseup = function () {
                        // console.log('onmouseup-okok')
                        document.onmousemove = null
                    }
                }
            },
            inserted() { },
            updated() { },

});