Vue内部指令和自定义指令

内部指令

v-text 读取文本不能读取html标签，解析文本
　　使用{{XXX}}这种情况是有弊端的，当我们网速很慢或者javascrit出错时，会暴露我们的{{XXX}}。v-text就是解决这个问题的。
v-html 能读取html标签，解析html标签
　　双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
　　要注意的是：在正式环境上动态渲染HTML是很危险的，因为容易导致XSS攻击。

v-if 显示与隐藏 和v-show对比的区别就是是否删除dom节点 默认值为false
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
　　v-if用来判断是否加载html的DOM
v-show
　　css中display属性，DOM已经加载，只是css控制没有显示。
v-if和v-show的区别：
　　v-if:判断是否加载，可以减轻服务器的压力，在需要时加载
　　v-show:调整css display属性，可以使客户端操作更加流畅
v-bind:class
　　三种绑定方法
　　1.对象型 '{red:isred}'
　　2.三目型 'isred?"red":"blue"'
　　3.数组型 '[{red:"isred"},{blue:"isblue"}]'
v-on事件监听器
　　键盘回车事件v-on:keyup.enter

v-model 绑定数据源
　　修饰符 .lazy:取代input监听change事件
　　　　.number:输入字符串转为数字
　　　　.trim:输入去掉首尾空格
v-bind 处理HTML中的标签属性
　　完整语法：v-bind：href=
　　缩写语法：：hred=
　　修改CSS样式 绑定class样式（：class）；绑定style（：style）

v-cloak 防闪烁
　　在vue渲染完指定的DOM后才进行显示，必须和css样式一起使用

自定义指令

自定义指令分为全局指令和局部指令

注册全局自定义指令

el : 指令属性所在的标签对象**
binding : 包含制令相关信息数据的对象

Vue.directive("自定义指令名",function(el,binding){
    el.innerHTML = binding.value.toupperCase()
})

注册局部自定义指令

局部指令只在当前vm管理范围内有效

directives : {
    '自定义指令名' : {
        bind(el , binding) {
            el.innerHTML = binding.value.toupperCase()
        }    
    }
}

使用指令 v-自定义指令名